/**
 * Kingsons Public Components CSS
 *
 * 此文件包含全站复用的组件样式
 * 通过 template-parts/header.php 引用
 *
 * 目录：
 * 1. CSS Variables（公共变量）
 * 2. Typography Base（统一标题样式）
 * 3. Hero Section Component（英雄区块）
 * 4. FAQ Accordion Component
 * 5. [更多组件...]
 */

/* =============================================================================
   1. CSS Variables - 公共变量
   ============================================================================= */

:root {
    /* Brand Colors */
    --color-primary:        #002361;
    --color-primary-rgb:    0, 35, 97;
    --color-accent:         #FF9700;
    --color-body:           #333333; /* Improved contrast from #444 */
    --color-bg:             #F3F4F6;
    --color-surface:        #FFFFFF;
    --color-surface-rgb:    255, 255, 255;
    --color-primary-dark:   #001A4D;
    --color-primary-light:  #1A4A8A;
    --color-primary-tint:   #E6ECF5;
    --color-accent-dark:    #E6870A;
    --color-accent-tint:    #FFF3E0;
    --color-muted:          #666666; /* Improved contrast from #888 */
    --color-border:         #BABEC8;
    --color-success:        #1D7A4F;
    --color-error:          #C0392B;

    /* Spacing Scale (Design System) */
    --space-2xs:            4px;
    --space-xs:             8px;
    --space-sm:             16px;
    --space-md:             24px;
    --space-lg:             32px;
    --space-xl:             48px;
    --space-2xl:            64px;
    --space-3xl:            100px;

    /* Elevation / Shadows */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg:            0 12px 32px rgba(var(--color-primary-rgb), 0.08);

    /* Border Radius */
    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            8px;
    --radius-xl:            12px;

    /* Transitions (Easing curves) */
    --transition-fast:      0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition:           var(--transition-normal); /* Fallback */

    /* Typography */
    --font-primary:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Fluid Heading Sizes: clamp(min, preferred, max) */
    --h1-size-lg:           clamp(40px, 5vw + 1rem, 64px);  /* Hero 区域 */
    --h1-size:              clamp(32px, 4vw + 1rem, 48px);
    --h2-size:              clamp(28px, 3vw + 1rem, 36px);
    --h3-size:              clamp(24px, 2vw + 0.5rem, 28px);
    --h4-size:              20px;
    --ks-site-header-offset: 80px;
}

/* =============================================================================
   Pocket Showroom - Header / Filters Compatibility
   ============================================================================= */

body.ks-has-ps-gallery.ps-hide-theme-header > header,
body.ks-has-ps-gallery.ps-hide-theme-header > .site-header,
body.ks-has-ps-gallery.ps-hide-theme-header .site-header,
body.ks-has-ps-gallery.ps-hide-theme-header #masthead,
body.ks-has-ps-gallery.ps-hide-theme-header .elementor-location-header {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

@media (min-width: 768px) {
    body.ks-has-ps-gallery .ps-gallery-filters {
        top: calc(var(--ks-site-header-offset, 80px)) !important;
    }
}

/* =============================================================================
   2. Bootstrap Override - 覆盖 bg-primary 颜色
   ============================================================================= */

section.bg-primary,
.ks-wrapper .bg-primary,
.bg-primary.bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-surface);
}

/* =============================================================================
   3. Container Component - 通用容器样式
   ============================================================================= */

/**
 * Container 组件说明
 *
 * 统一的容器样式，用于页面布局的主要内容包裹
 *
 * 结构：
 * <div class="ks-container">
 *     内容...
 * </div>
 */

.ks-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .ks-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =============================================================================
   4. Section Base - 区块基础样式
   ============================================================================= */

/**
 * Section 基础样式说明
 *
 * 统一的区块padding和背景色
 */

section {
    padding: 100px 0;
}

section.bg-white {
    background-color: var(--color-surface);
}

section.bg-light {
    background-color: var(--color-bg);
}

section.bg-primary {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

section.bg-primary h2,
section.bg-primary h3,
section.bg-primary h4,
section.bg-primary p {
    color: var(--color-surface);
}

/* Section Header 在深色背景上的字体颜色 */
section.bg-primary .section-header h2 {
    color: var(--color-surface);
}

section.bg-primary .section-header p,
section.bg-primary .section-header .body-lg {
    color: rgba(255, 255, 255, 0.85);
}

/* Card 在深色背景上的字体颜色 */
section.bg-primary .card-item h3,
section.bg-primary .card-item h4 {
    color: var(--color-surface);
}

section.bg-primary .card-item p,
section.bg-primary .card-item ul li {
    color: rgba(255, 255, 255, 0.8);
}

/* Feature Card 在深色背景上 - 虽然通常不放在深色背景上，但以防万一 */
section.bg-primary .feature-card h4 {
    color: var(--color-surface);
}

section.bg-primary .feature-card p {
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
    section {
        padding: 64px 0;
    }
}

/* =============================================================================
   5. Typography Base - 统一标题样式
   ============================================================================= */

/**
 * Typography 说明
 *
 * 全站标题统一样式，页面内联样式应移除并依赖此规则
 * 使用了 clamp() 流式排版，无需再写繁琐的媒体查询覆盖字体大小。
 */

/* === Base Headings === */
h1, h2, h3, h4 {
    color: var(--color-primary);
    margin-top: 0;
    text-wrap: balance;
}

h1 {
    font-size: var(--h1-size);
    font-weight: 800;
    line-height: 1.2;
}

h2 {
    font-size: var(--h2-size);
    font-weight: 700;
    line-height: 1.3;
}

h3 {
    font-size: var(--h3-size);
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    font-size: var(--h4-size);
    font-weight: 600;
    line-height: 1.5;
}

/* === Hero Section Headings === */
.ks-hero-section .hero-content h1 {
    color: var(--color-surface);
    font-size: clamp(32px, 4vw + 0.5rem, 43px); /* Adjusted for long titles */
    font-weight: 800;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: var(--space-md);
    text-wrap: balance; /* Auto-balance long text for better typography */
}

/* =============================================================================
   3. Hero Section Component - 英雄区块
   ============================================================================= */

/**
 * Hero Section 组件说明
 *
 * 统一的Hero Section样式，各页面应移除重复的hero内联样式
 *
 * 结构：
 * <section class="ks-hero-section">
 *     <div class="ks-container">
 *         <div class="hero-content">
 *             <h1 class="display">大标题</h1>  <!-- 或普通h1 -->
 *             <p class="body-lg">副标题描述</p>
 *             <div class="hero-actions">
 *                 <a href="..." class="ks-btn-primary">主按钮</a>
 *                 <a href="..." class="ks-btn-ghost">辅按钮</a>
 *                 <a href="..." class="ks-link-light">可选文本链接</a>
 *             </div>
 *             <div class="hero-stats">可选统计数据</div>
 *         </div>
 *     </div>
 * </section>
 *
 * 按钮数量标准：建议2个按钮（主+辅），第3个可选为ks-link-light
 */

/* === Hero Section Container === */
.ks-hero-section {
    position: relative;
    width: 100%;
    min-height: clamp(600px, 80vh, 800px);
    background-color: var(--color-primary);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
    margin-top: -1px;
}

/* 渐变遮罩（默认从左到右） */
.ks-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(0, 35, 97, 0.88) 0%,
        rgba(0, 35, 97, 0.65) 55%,
        rgba(0, 35, 97, 0.30) 100%
    );
    z-index: 1;
}

/* === Hero Container === */
.ks-hero-section .ks-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

/* === Hero Content === */
.ks-hero-section .hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px; /* Increased to allow more text per line */
    padding-left: 48px;
}

/* === Display - 大标题 === */
.ks-hero-section .display {
    font-size: clamp(28px, 3.5vw, 42px); /* 进一步缩小以适应长文本 */
    font-weight: 800;
    line-height: 1.2; /* 稍微增加行高防止拥挤 */
    color: var(--color-surface);
    margin-top: 0;
    margin-bottom: 16px;
    text-wrap: balance;
}

/* === Body Large - 副标题 === */
.ks-hero-section .body-lg {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 32px;
    max-width: 70ch; /* Optimized from 85ch for better readability */
}

/* === Hero Actions - 按钮容器 === */
.ks-hero-section .hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

/* === Hero Stats - 统计数据（可选） === */
.ks-hero-section .hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.ks-hero-section .hero-stat-num {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
}

.ks-hero-section .hero-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 4px;
}

/* === Buttons === */
.ks-btn-primary, .ks-btn-ghost, .ks-btn-secondary, .ks-link-light, .ks-btn-download, .ks-link {
    /* Accessibility: outline only when using keyboard navigation */
    outline: none;
}

.ks-btn-primary:focus-visible, .ks-btn-ghost:focus-visible, .ks-btn-secondary:focus-visible, 
.ks-link-light:focus-visible, .ks-btn-download:focus-visible, .ks-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.ks-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-lg);
    height: 48px;
    background-color: var(--color-accent);
    color: var(--color-surface);
    font-size: 15px; /* Increased from 13px */
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.ks-btn-primary:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-surface);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(230, 135, 10, 0.3);
}

.ks-btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.ks-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-lg);
    height: 48px;
    background-color: transparent;
    color: var(--color-surface);
    font-size: 15px; /* Increased from 13px */
    font-weight: 600;
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.ks-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--color-surface);
}

.ks-btn-ghost:active {
    background-color: rgba(255, 255, 255, 0.25);
}

.ks-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px var(--space-lg);
    height: 48px;
    background-color: transparent;
    color: var(--color-primary);
    font-size: 15px; /* Increased from 13px */
    font-weight: 600;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-sizing: border-box;
}

.ks-btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.ks-btn-secondary:active {
    transform: translateY(1px);
}

/* === Text Link - 可选第三按钮 === */
.ks-link-light {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px var(--space-sm);
    border-radius: 100px; /* 圆角胶囊形状 */
    background: rgba(255, 255, 255, 0.0);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0);
    transition: all var(--transition-normal);
}

.ks-link-light:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.ks-link-light:active {
    transform: translateY(0);
}

/* === Download Button - 下载按钮（深色背景） === */
.ks-btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.ks-btn-download:hover {
    color: var(--color-surface);
}

/* === Link - 普通链接（浅色背景使用） === */
.ks-link {
    color: var(--color-primary-light);
    text-decoration: none;
    font-weight: 600;
    transition: text-decoration var(--transition-fast), color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ks-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* === Responsive === */
@media (max-width: 1199px) {
    .ks-hero-section .hero-content {
        padding-left: 32px;
    }
}

@media (max-width: 767px) {
    .ks-hero-section {
        min-height: 500px;
        height: auto;
        padding: 64px 0;
    }

    .ks-hero-section .ks-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ks-hero-section .hero-content {
        padding-left: 0;
        padding-right: 0;
    }

    .ks-hero-section .display {
        font-size: clamp(32px, 8vw, 40px);
        margin-bottom: 16px;
    }

    .ks-hero-section .body-lg {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .ks-hero-section .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .ks-hero-section .hero-actions .ks-btn-primary,
    .ks-hero-section .hero-actions .ks-btn-ghost {
        width: 100%;
        min-width: 280px;
        justify-content: center;
    }

    .ks-hero-section .hero-stats {
        gap: 24px;
    }

    .ks-hero-section .hero-stat-num {
        font-size: 26px;
    }
}

/* =============================================================================
   4. FAQ Accordion Component
   ============================================================================= */

/* === FAQ Section === */
.ks-faq-section {
    background-color: var(--color-bg);
    padding: 100px 0;
    font-family: var(--font-primary);
}

.ks-faq-section .ks-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.ks-faq-section .section-header {
    max-width: 800px;
    margin: 0 auto 64px auto;
    text-align: center;
}

.ks-faq-section .section-header h2 {
    color: var(--color-primary);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.ks-faq-section .section-header p {
    color: var(--color-muted);
    font-size: 13px;
    margin-top: 16px;
}

.ks-faq-section .ks-accordion {
    max-width: 900px;
    margin: 0 auto;
}

/* === Accordion Item Override === */
.ks-faq-section .accordion-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md) !important;
    margin-bottom: 12px;
    overflow: hidden;
}

/* === Accordion Button Override === */
.ks-faq-section .accordion-button {
    background-color: var(--color-surface);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 20px 24px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.ks-faq-section .accordion-button:not(.collapsed) {
    background-color: var(--color-primary-tint);
    color: var(--color-primary);
}

.ks-faq-section .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 35, 97, 0.1);
}

/* 箭头图标 */
.ks-faq-section .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23002361'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    transition: transform 0.2s ease;
}

.ks-faq-section .accordion-button.collapsed::after {
    transform: rotate(0deg);
}

/* === Accordion Body === */
.ks-faq-section .accordion-body {
    padding: 20px 24px;
    font-size: 12px;
    color: var(--color-body);
    background: var(--color-surface);
}

.ks-faq-section .accordion-body p {
    margin-bottom: 12px;
}

.ks-faq-section .accordion-body ul {
    margin: 12px 0;
    padding-left: 20px;
}

.ks-faq-section .accordion-body li {
    margin-bottom: 6px;
}

/* === FAQ Highlight === */
.ks-faq-section .faq-highlight {
    background: var(--color-accent-tint);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-accent);
    margin-top: 16px;
}

/* === Timeline List === */
.ks-faq-section .faq-timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

.ks-faq-section .faq-timeline li {
    background: var(--color-bg);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* === Actions === */
.actions {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ks-faq-section .actions {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* === Responsive === */
@media (max-width: 767px) {
    .ks-faq-section {
        padding: 64px 0;
    }

    .ks-faq-section .ks-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ks-faq-section .section-header h2 {
        font-size: 22px;
    }

    .ks-faq-section .accordion-button {
        font-size: 13px;
        padding: 16px 20px;
    }

    .ks-faq-section .accordion-body {
        padding: 16px 20px;
        font-size: 11px;
    }

    .ks-faq-section .faq-timeline {
        grid-template-columns: 1fr;
    }

    .ks-faq-section .actions {
        flex-direction: column;
    }

    .ks-faq-section .actions .ks-btn-secondary {
        width: 100%;
    }
}

/* =============================================================================
   5. Scroll Fade Animation - 滚动淡入效果
   ============================================================================= */

[data-fade] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-fade].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 可选：交错延迟（用于同一容器内的多个元素） */
[data-fade-delay="1"] { transition-delay: 0.1s; }
[data-fade-delay="2"] { transition-delay: 0.2s; }
[data-fade-delay="3"] { transition-delay: 0.3s; }
[data-fade-delay="4"] { transition-delay: 0.4s; }
[data-fade-delay="5"] { transition-delay: 0.5s; }
[data-fade-delay="6"] { transition-delay: 0.6s; }

/* =============================================================================
   6. Counter Stats Component - 数字递增统计
   ============================================================================= */

/* === Counter Stats Section === */
.ks-counter-section {
    background-color: var(--color-primary);
    padding: 100px 0; /* UI/UX: Increased for premium breathing room */
    font-family: var(--font-primary);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ks-counter-section .ks-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.ks-counter-section .section-title {
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-surface);
    margin: 0 0 40px 0;
}

/* UI/UX: Upgraded to modern CSS Grid */
.ks-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 32px;
    margin-bottom: 64px;
}

/* UI/UX: Left align with top border for a technical, editorial look */
.ks-counter-item {
    text-align: left;
    color: var(--color-surface);
    border-top: 2px solid rgba(255,255,255,0.1);
    padding-top: 24px;
    transition: border-color var(--transition-fast);
}

.ks-counter-item:hover {
    border-top-color: var(--color-accent);
}

.ks-counter-number {
    font-size: clamp(40px, 4vw, 56px); /* UI/UX: Fluid typography */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--color-accent);
    letter-spacing: -1px;
}

.ks-counter-label {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

/* === Light Variant === */
.ks-counter-light {
    /* UI/UX: Let background be controlled by utility classes like bg-white */
    border-bottom: 1px solid var(--color-border);
}

.ks-counter-light .section-header h2,
.ks-counter-light .section-title {
    color: var(--color-primary);
}

.ks-counter-light .ks-counter-item {
    color: var(--color-body);
    border-top-color: rgba(0, 35, 97, 0.1);
}

.ks-counter-light .ks-counter-item:hover {
    border-top-color: var(--color-accent);
}

.ks-counter-light .ks-counter-number {
    color: var(--color-accent); /* Maintain the pop of color */
}

.ks-counter-light .ks-counter-label {
    color: var(--color-muted);
}

/* === Dark Variant === */
.ks-counter-dark .ks-counter-label {
    color: rgba(255, 255, 255, 0.85);
}

.ks-counter-dark .ks-intro-copy {
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    line-height: 1.7;
    max-width: 900px;
    margin: 0 auto 40px auto;
    text-align: center;
}

/* === Responsive === */
@media (max-width: 1199px) {
    .ks-counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
    }
}

@media (max-width: 767px) {
    .ks-counter-section .ks-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ks-counter-section {
        padding: 64px 0;
    }

    .ks-counter-section .section-title {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .ks-counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 16px;
        margin-bottom: 48px;
    }

    .ks-counter-item {
        padding-top: 16px;
    }

    .ks-counter-number {
        font-size: 32px;
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .ks-counter-label {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* =============================================================================
   7. Product Card Grid Component - 产品卡片网格
   ============================================================================= */

/* === Product Grid Container === */
.ks-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* === Product Card (带图片版本) === */
.ks-product-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
}

.ks-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 35, 97, 0.12);
    border-color: transparent;
}

/* Card Image Wrapper */
.ks-product-card .card-img-wrap {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 350px;
}

.ks-product-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease;
    background: #FFFFFF;
}

.ks-product-card:hover .card-img {
    transform: scale(1.05);
}

/* Removed Hover overlay for cleaner UI */

/* Card Content */
.ks-product-card .card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.ks-product-card .card-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 8px;
    margin-top: 0;
}

.ks-product-card .card-desc {
    color: var(--color-body);
    font-size: 13px;
    margin-bottom: 16px;
    flex-grow: 1;
    line-height: 1.6;
}

.ks-product-card .card-link {
    color: var(--color-accent);
    font-weight: 600;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition);
}

.ks-product-card .card-link:hover {
    color: var(--color-accent-dark);
}

.ks-product-card .card-link::after {
    content: '\2192';
}

/* Badge support for ks-product-card */
.ks-product-card .card-badge {
    display: inline-block;
    background-color: var(--color-accent-tint);
    color: var(--color-accent-dark);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

/* === Product Card (纯文字版本) === */
.ks-product-grid--text {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ks-product-card--text {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 35, 97, 0.04);
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
}

.ks-product-card--text:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 35, 97, 0.08);
    border-color: transparent;
}

.ks-product-card--text .card-badge {
    display: inline-block;
    background-color: var(--color-accent-tint);
    color: var(--color-accent-dark);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.ks-product-card--text .card-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 17px;
    color: var(--color-primary);
    margin-bottom: 12px;
    margin-top: 0;
}

.ks-product-card--text .card-desc {
    color: var(--color-body);
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.ks-product-card--text .card-link {
    color: var(--color-primary-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
}

.ks-product-card--text .card-link:hover {
    color: var(--color-accent);
}

.ks-product-card--text .card-link::after {
    content: '\2192';
}

/* === Responsive === */
@media (max-width: 1199px) {
    .ks-product-grid,
    .ks-product-grid--text {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ks-product-grid,
    .ks-product-grid--text {
        grid-template-columns: 1fr;
    }

    .ks-product-card .card-img-wrap {
        height: 180px;
    }
}

/* =============================================================================
   8. Checklist Component - 价值清单样式
   ============================================================================= */

/* === Base Checklist === */
.ks-checklist {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.ks-checklist li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-body);
}

.ks-checklist li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
}

/* === Dark Variant (深色背景) === */
.ks-checklist--dark li {
    color: var(--color-surface);
}

.ks-checklist--dark li::before {
    color: var(--color-accent);
}

/* === Light Variant (浅色背景) === */
.ks-checklist--light li {
    color: var(--color-primary);
}

.ks-checklist--light li::before {
    color: var(--color-success);
}

/* === Responsive === */
@media (max-width: 767px) {
    .ks-checklist li {
        font-size: 11px;
        padding-left: 28px;
        margin-bottom: 12px;
    }
}

/* =============================================================================
   9. CTA Form Container - 表单容器样式
   ============================================================================= */

/* === CTA Form Container === */
.cta-form-container {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 32px;
    max-width: 500px;
}

/* === Dark Background Variant === */
.cta-form-container--dark {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 500px;
    margin: 0 auto;
}

/* === Form Title === */
.footer-form-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 24px;
    text-align: center;
}

.cta-form-container--dark .footer-form-title {
    color: var(--color-surface);
}

/* === Responsive === */
@media (max-width: 767px) {
    .cta-form-container {
        padding: 24px;
    }

    .cta-form-container--dark {
        padding: 24px;
    }

    .footer-form-title {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

/* =============================================================================
   10. Conversion Section - 转化区块样式
   ============================================================================= */

/* === Conversion Section === */
.ks-conversion-section {
    padding: 80px 24px;
    display: flex;
    justify-content: center;
    background-color: var(--color-primary);
    background-image: radial-gradient(circle at 0% 0%, #0d2345 0%, transparent 50%);
}

.ks-conversion-container {
    max-width: 1280px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: center;
}

/* === Content Left === */
.ks-content-left h2 {
    color: var(--color-surface);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.ks-content-left p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* === Content Right === */
.ks-content-right {
    display: flex;
    justify-content: center;
}

/* === Responsive === */
@media (max-width: 1199px) {
    .ks-conversion-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ks-content-right {
        order: 2;
    }
}

@media (max-width: 767px) {
    .ks-conversion-section {
        padding: 60px 16px;
    }

    .ks-content-left h2 {
        font-size: 22px;
    }

    .ks-content-left p {
        font-size: 11px;
    }
}

/* =============================================================================
   11. CTA Section Component - 转化区块（左侧内容+右侧表单）
   ============================================================================= */

/**
 * CTA Section 组件说明
 *
 * 结构：
 * <section class="ks-cta-section bg-primary">
 *     <div class="ks-container">
 *         <div class="cta-grid">
 *             <div class="cta-content">
 *                 <h2>标题</h2>
 *                 <p>描述</p>
 *                 <ul class="cta-list">列表项</ul>
 *                 <div class="cta-actions">可选按钮</div>
 *             </div>
 *             <div class="cta-form-container">
 *                 <div class="footer-form-title">Start Your Project</div>
 *                 [表单]
 *             </div>
 *         </div>
 *     </div>
 * </section>
 */

/* === CTA Section 容器 === */
.ks-cta-section {
    padding: 80px 0;
    font-family: var(--font-primary);
}

.ks-cta-section .ks-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

/* === CTA Grid 布局 === */
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* === CTA Content（左侧） === */
.cta-content {
    max-width: 600px;
}

.cta-content h2 {
    color: var(--color-surface);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 20px;
}

.cta-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
}

/* === CTA List（深色背景列表） === */
.cta-list {
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.cta-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.cta-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-size: 15px;
}

/* === CTA Actions（按钮容器） === */
.cta-actions {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.cta-actions .ks-btn-primary {
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: background var(--transition), transform var(--transition);
}

.cta-actions .ks-btn-primary:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}

.cta-actions .ks-btn-ghost {
    background: transparent;
    color: var(--color-surface);
    padding: 14px 28px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
    transition: background var(--transition), border-color var(--transition);
}

.cta-actions .ks-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

/* === CTA Form Container（右侧） === */
.ks-cta-section .cta-form-container {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 32px;
    max-width: 550px;
}

.ks-cta-section .cta-form-container .footer-form-title {
    color: var(--color-primary);
    margin-bottom: 24px;
}

/* === Responsive === */
@media (max-width: 1199px) {
    .ks-cta-section {
        padding: 60px 0;
    }

    .cta-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-content {
        max-width: 100%;
    }

    .ks-cta-section .cta-form-container {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .ks-cta-section {
        padding: 48px 0;
    }

    .ks-cta-section .ks-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .cta-content h2 {
        font-size: 22px;
    }

    .cta-content p {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .cta-list li {
        font-size: 13px;
        padding-left: 24px;
        margin-bottom: 10px;
    }

    .cta-actions {
        flex-direction: column;
        gap: 12px;
    }

    .cta-actions .ks-btn-primary,
    .cta-actions .ks-btn-ghost {
        width: 100%;
        text-align: center;
        padding: 12px 24px;
        font-size: 13px;
    }

    .ks-cta-section .cta-form-container {
        padding: 24px;
    }

    .ks-cta-section .cta-form-container .footer-form-title {
        font-size: 16px;
    }
}

/* =============================================================================
   12. Section Header Component - 区块标题容器
   ============================================================================= */

/**
 * Section Header 组件说明
 *
 * 统一的区块标题容器，用于各个section的标题和描述
 *
 * 结构：
 * <div class="section-header">
 *     <h2>区块标题</h2>
 *     <p class="body-lg">可选描述文字</p>
 * </div>
 */

.section-header {
    max-width: 800px;
    margin-bottom: 64px;
}

.section-header h2 {
    margin-bottom: 16px;
}

.section-header p {
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.7;
}

.section-header.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767px) {
    .section-header {
        margin-bottom: 48px;
    }
}

/* =============================================================================
   13. Data Table Component - 数据表格样式
   ============================================================================= */

/**
 * Data Table 组件说明
 *
 * 统一的数据表格样式，用于规格参数、测试数据等表格展示
 *
 * 结构：
 * <table class="data-table">
 *     <thead><tr><th>...</th></tr></thead>
 *     <tbody><tr><td>...</td></tr></tbody>
 * </table>
 */

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 14px;
}

.data-table thead {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.data-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-body);
}

.data-table tbody tr:hover {
    background-color: var(--color-primary-tint);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Light variant - 浅色表头 */
.data-table--light thead {
    background-color: var(--color-primary-tint);
    color: var(--color-primary);
}

.data-table--light th {
    border-bottom: 2px solid var(--color-border);
}

@media (max-width: 767px) {
    .data-table {
        font-size: 12px;
    }

    .data-table th,
    .data-table td {
        padding: 8px 10px;
    }
}

/* =============================================================================
   14. Feature Grid Component - 特性网格卡片
   ============================================================================= */

/**
 * Feature Grid 组件说明
 *
 * 用于展示产品特性、技术参数等的网格卡片布局
 *
 * 结构：
 * <div class="feature-grid">
 *     <div class="feature-card">
 *         <h4>特性标题</h4>
 *         <p>特性描述</p>
 *     </div>
 * </div>
 */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.feature-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 35, 97, 0.08);
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 10px;
    margin-top: 0;
}

.feature-card p {
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 0;
    line-height: 1.6;
}

/* 2列变体 */
.feature-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1199px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .feature-grid,
    .feature-grid--2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .feature-card {
        padding: 24px;
    }
}

/* =============================================================================
   15. Bento Grid Component - Bento布局卡片
   ============================================================================= */

/**
 * Bento Grid 组件说明
 *
 * 现代 Bento 盒子风格布局，用于转化区块、特性展示
 *
 * 结构：
 * <div class="ks-bento-grid">
 *     <div class="ks-bento-card">
 *         <div class="ks-icon-wrapper">图标</div>
 *         <h3>标题</h3>
 *         <p>描述</p>
 *     </div>
 *     <div class="ks-bento-card ks-card-highlight">高亮卡片</div>
 * </div>
 */

.ks-bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.ks-bento-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ks-bento-card:hover {
    border-color: rgba(255, 153, 0, 0.5);
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.ks-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 153, 0, 0.1);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 20px;
}

.ks-bento-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-surface);
}

.ks-bento-card p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin: 0;
}

/* Highlight Card - 跨两列高亮卡片 */
.ks-card-highlight {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(255,153,0,0.1) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255, 153, 0, 0.3);
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.ks-card-highlight .ks-icon-wrapper {
    margin-bottom: 0;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    font-size: 28px;
}

.ks-card-highlight h3 {
    font-size: 1.2rem;
    margin-bottom: 4px;
}

/* Light variant - 浅色背景使用 */
.ks-bento-grid--light .ks-bento-card {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.ks-bento-grid--light .ks-bento-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 30px -10px rgba(0, 35, 97, 0.15);
}

.ks-bento-grid--light .ks-bento-card h3 {
    color: var(--color-primary);
}

.ks-bento-grid--light .ks-bento-card p {
    color: var(--color-body);
}

@media (max-width: 600px) {
    .ks-bento-grid {
        grid-template-columns: 1fr;
    }

    .ks-card-highlight {
        grid-column: span 1;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* =============================================================================
   16. KS Form Component - 表单容器样式
   ============================================================================= */

/**
 * KS Form 组件说明
 *
 * 统一的表单容器和输入样式，用于联系表单、订阅表单等
 *
 * 结构：
 * <div class="ks-form">
 *     <h3>表单标题</h3>
 *     <div class="form-row">
 *         <div class="form-group">...</div>
 *     </div>
 *     <button class="ks-btn-submit">提交</button>
 * </div>
 */

.ks-form {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 40px;
    color: var(--color-body);
}

.ks-form h3 {
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--color-primary);
}

.ks-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.ks-form .form-group {
    margin-bottom: 16px;
}

.ks-form label {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-body);
    margin-bottom: 8px;
    display: block;
}

.ks-form input,
.ks-form select,
.ks-form textarea {
    height: 44px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-body);
    padding: 0 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ks-form textarea {
    height: auto;
    min-height: 120px;
    padding: 12px;
    resize: vertical;
}

.ks-form input:focus,
.ks-form select:focus,
.ks-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-tint);
    outline: none;
    background: var(--color-surface);
}

.ks-form .checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
}

.ks-form .checkbox-group input {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.ks-form .checkbox-group label {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
}

.ks-form .ks-btn-submit {
    width: 100%;
    height: 56px;
    background-color: var(--color-accent);
    color: var(--color-surface);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition);
    margin-top: 16px;
}

.ks-form .ks-btn-submit:hover {
    background-color: var(--color-accent-dark);
}

/* Dark variant - 深色背景表单 */
.ks-form--dark {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-surface);
}

.ks-form--dark h3 {
    color: var(--color-surface);
}

.ks-form--dark label {
    color: var(--color-surface);
}

.ks-form--dark input,
.ks-form--dark select,
.ks-form--dark textarea {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--color-surface);
}

@media (max-width: 767px) {
    .ks-form {
        padding: 24px;
    }

    .ks-form .form-row {
        grid-template-columns: 1fr;
    }

    .ks-form .ks-btn-submit {
        height: 48px;
        font-size: 15px;
    }
}

/* =============================================================================
   17. Patent Grid Component - 专利卡片网格
   ============================================================================= */

/**
 * Patent Grid 组件说明
 *
 * 用于展示专利信息、技术特性等带边框标识的卡片
 *
 * 结构：
 * <div class="patent-grid">
 *     <div class="patent-card">
 *         <div class="patent-num">Patent 1</div>
 *         <h3>专利标题</h3>
 *         <p>专利描述</p>
 *     </div>
 * </div>
 */

.patent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.patent-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    transition: transform var(--transition), box-shadow var(--transition);
}

.patent-card .patent-img {
    margin-bottom: 16px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.patent-card .patent-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.patent-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 35, 97, 0.08);
}

.patent-card .patent-num {
    font-size: 12px;
    color: var(--color-accent-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

.patent-card h3 {
    font-size: 19px;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.patent-card p {
    font-size: 14px;
    color: var(--color-body);
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Highlight variant - 高亮卡片 */
.patent-card--highlight {
    border-left-color: var(--color-primary);
    background: var(--color-primary-tint);
}

/* Responsive */
@media (max-width: 1199px) {
    .patent-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .patent-grid {
        grid-template-columns: 1fr;
    }

    .patent-card {
        padding: 24px;
    }
}

/* =============================================================================
   18. Process Timeline Component - 流程时间线
   ============================================================================= */

/**
 * Process Timeline 组件说明
 *
 * 横向流程步骤时间线，用于展示生产流程、服务流程等
 *
 * 结构：
 * <div class="process-timeline">
 *     <div class="step">
 *         <div class="step-num">1</div>
 *         <h3>步骤标题</h3>
 *         <p>步骤描述</p>
 *     </div>
 * </div>
 */

/* === Logo Strip (Auto-scrolling client logos) === */
.logo-strip {
    overflow: hidden;
    margin-top: 48px;
    position: relative;
}

.logo-strip__track {
    display: flex;
    width: fit-content;
    will-change: transform;
}

.logo-strip__content {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 0 24px;
    flex-shrink: 0;
}

.logo-strip__content img {
    height: 60px;
    width: auto;
    max-width: none;
    border-radius: 4px;
    opacity: 0.8; /* UI/UX: Slightly transparent so it's not too overwhelming */
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    object-fit: contain;
}

.logo-strip__content img:hover {
    opacity: 1;
    transform: scale(1.05); /* Added a subtle scale effect instead of color change */
}

.logo-strip--autoplay .logo-strip__track {
    animation: logoStripScroll 30s linear infinite;
}

.logo-strip--paused .logo-strip__track {
    animation-play-state: paused;
}

.logo-strip--dragging .logo-strip__track {
    transition: none;
    cursor: grabbing;
}

@keyframes logoStripScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .logo-strip__content { gap: 32px; }
    .logo-strip__content img { height: 40px; }
}

/* === Process Timeline === */
.process-timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 0 16px;
    margin-bottom: 48px;
}

/* 连接线 (UI/UX: Thinner, more elegant) */
.process-timeline::before {
    content: '';
    position: absolute;
    top: 28px; /* Adjusted for new circle size */
    left: 50px;
    right: 50px;
    height: 2px;
    background: var(--color-border);
    opacity: 0.4;
    z-index: 1;
}

.process-timeline .step {
    position: relative;
    z-index: 2;
    width: 18%;
    text-align: center;
}

/* UI/UX: Premium step indicator */
.process-timeline .step-num {
    width: 56px;
    height: 56px;
    background: var(--color-surface);
    color: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    margin: 0 auto 20px auto;
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 0 6px var(--color-bg), 0 8px 16px rgba(0,0,0,0.06); /* Premium halo */
    transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.process-timeline .step:hover .step-num {
    transform: scale(1.1);
    background: var(--color-accent);
    color: var(--color-surface);
}

.process-timeline .step h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: var(--color-primary);
}

.process-timeline .step p {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.6; /* Improved readability */
}

/* Vertical variant - 垂直时间线（移动端自动切换） */
@media (max-width: 1199px) {
    .process-timeline {
        flex-direction: column;
        padding: 0;
        gap: 32px;
    }

    .process-timeline::before {
        top: 0;
        bottom: 0;
        left: 27px; /* Center with the 56px circle */
        width: 2px;
        height: 100%;
    }

    .process-timeline .step {
        width: 100%;
        text-align: left;
        padding-left: 80px;
        margin-bottom: 0;
    }

    .process-timeline .step-num {
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: 0 0 0 6px var(--color-surface), 0 8px 16px rgba(0,0,0,0.06);
    }
}

/* =============================================================================
   19. Photo Strip Component - 图片strip布局
   ============================================================================= */

/**
 * Photo Strip 组件说明
 *
 * 简单的多列图片网格，用于展示工厂照片、产品图片等
 *
 * 结构：
 * <div class="photo-strip">
 *     <img src="..." alt="...">
 *     <img src="..." alt="...">
 * </div>
 */

.photo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* UI/UX: Wider gap for premium feel */
    margin: 64px 0; /* UI/UX: More spacing around the gallery */
}

.photo-strip img {
    width: 100%;
    height: auto; /* Required by rule: 展示整张图片，不要剪裁 */
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* UI/UX: Premium shadow */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    background: var(--color-surface); /* For images with transparency or non-filling aspect ratios */
}

.photo-strip img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

/* 2列变体 */
.photo-strip--2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 4列变体 */
.photo-strip--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive */
@media (max-width: 1199px) {
    .photo-strip,
    .photo-strip--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .photo-strip,
    .photo-strip--2,
    .photo-strip--4 {
        grid-template-columns: 1fr;
    }
    .photo-strip img {
        height: 250px;
    }
}

/* =============================================================================
   20. Card Grid Component - 通用卡片网格（2列）
   ============================================================================= */

/**
 * Card Grid 组件说明
 *
 * 通用的两列卡片网格，用于能力展示、QC层级等
 *
 * 结构：
 * <div class="card-grid-2">
 *     <div class="card-item">
 *         <h3>标题</h3>
 *         <ul>列表</ul>
 *     </div>
 * </div>
 */

.card-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.card-item {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 35, 97, 0.06);
}

.card-item h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--color-primary);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-bg);
}

.card-item--accent {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    transition: transform var(--transition), box-shadow var(--transition);
}

.card-item--accent:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 35, 97, 0.06);
}

.card-item--accent h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--color-primary);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-bg);
}

/* 内部列表样式 */
.card-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-item ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--color-body);
}

.card-item ul li::before {
    content: '\2022';
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

@media (max-width: 1199px) {
    .card-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   22. Stats Row Component - 数据统计行
   ============================================================================= */

/**
 * Stats Row 组件说明
 *
 * 用于展示关键数字统计，如产能、专利数、年限等
 * 命名与首页 trust-stats 保持一致
 *
 * 结构：
 * <section class="ks-stats-section bg-primary">
 *     <div class="ks-container">
 *         <div class="stats-row">
 *             <div class="stat-item">
 *                 <div class="stat-number">数字</div>
 *                 <div class="stat-label">标签</div>
 *                 <div class="stat-desc">可选描述</div>
 *             </div>
 *         </div>
 *     </div>
 * </section>
 *
 * 变体：
 * - stats-row--dark: 深色背景（bg-primary）
 * - stats-row--light: 浅色背景（bg-white/bg-light）
 * - stats-row--compact: 紧凑间距
 */

/* Stats Section - 统计区块 */
.ks-stats-section {
    padding: 50px 0;
}

.stats-row {
    display: flex;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: clamp(40px, 5vw, 64px); /* UI/UX: Fluid impactful numbers */
    font-weight: 800;
    letter-spacing: -1.5px; /* Tighter for large numbers */
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 16px;
    color: var(--color-muted);
}

.stat-desc {
    font-size: 14px;
    color: var(--color-muted);
    margin-top: 4px;
}

.stats-row--dark .stat-label {
    color: rgba(255, 255, 255, 0.85);
}

.stats-row--dark .stat-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Light variant - 浅色背景 */
.stats-row--light .stat-number {
    color: var(--color-accent);
}

.stats-row--light .stat-label,
.stats-row--light .stat-desc {
    color: var(--color-muted);
}

/* Compact variant - 紧凑间距 */
.stats-row--compact {
    gap: 48px;
    padding: 32px 0;
}

/* Responsive */
@media (max-width: 1199px) {
    .stats-row {
        gap: 48px;
    }
}

@media (max-width: 767px) {
    .stats-row {
        gap: 32px;
        padding: 32px 0;
    }

    .stat-number {
        font-size: 36px;
    }

    .stat-label {
        font-size: 14px;
    }

    .stat-desc {
        font-size: 12px;
    }
}

/* =============================================================================
   21. Awards Row Component - 奖项徽章展示
   ============================================================================= */

/**
 * Awards Row 组件说明
 *
 * 用于展示奖项徽章/奖杯图片的横向排列（深色背景）
 *
 * 结构：
 * <div class="awards-row">
 *     <div class="award-badge">
 *         <img src="..." alt="奖项名称">
 *         <span>奖项名称</span>
 *     </div>
 * </div>
 */

.awards-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

.award-badge {
    text-align: center;
    color: var(--color-surface);
}

.award-badge img {
    display: block;
    height: 250px;
    width: auto;
    margin: 0 auto 12px auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter var(--transition), opacity var(--transition);
}

.award-badge:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.award-badge span {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

/* Light variant - 浅色背景 */
.awards-row--light .award-badge {
    color: var(--color-primary);
}

.awards-row--light .award-badge img {
    filter: grayscale(0%);
    opacity: 1;
}

.awards-row--light .award-badge:hover img {
    transform: scale(1.05);
}

.awards-row--light .award-badge span {
    opacity: 1;
}

/* Responsive */
@media (max-width: 1199px) {
    .awards-row {
        gap: 32px;
    }

    .award-badge img {
        height: 200px;
    }
}

@media (max-width: 767px) {
    .awards-row {
        gap: 24px;
    }

    .award-badge img {
        height: 150px;
    }

    .award-badge span {
        font-size: 12px;
    }
}

/* =============================================================================
   Branding Layout - Tabs + Gallery (通用组件)
   ============================================================================= */

.branding-layout{display:flex;gap:48px;align-items:flex-start;margin-bottom:48px}
.branding-tabs{flex:0 0 200px;display:flex;flex-direction:column;gap:8px}
.branding-tab{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px 24px;font-size:16px;font-weight:500;color:var(--color-body);cursor:pointer;transition:all var(--transition);text-align:left}
.branding-tab:hover{border-color:var(--color-primary-tint);background:var(--color-primary-tint)}
.branding-tab.active{background:var(--color-primary);color:var(--color-surface);border-color:var(--color-primary)}
.branding-gallery{flex:1;min-width:0}
.gallery-grid{display:none;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-grid.active{display:grid}
.gallery-item{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--color-border);transition:transform var(--transition),box-shadow var(--transition)}
.gallery-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,35,97,.08)}
.gallery-item img{width:100%;height:180px;object-fit:cover;display:block}
.gallery-item span{display:block;padding:12px 16px;font-size:14px;font-weight:500;color:var(--color-primary);text-align:center}
@media(max-width:1199px){.branding-layout{flex-direction:column}.branding-tabs{flex:0 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center}.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.branding-tabs{flex-direction:column}.gallery-grid{grid-template-columns:1fr}.gallery-item img{height:150px}}

/* =============================================================================
   23. Cert Carousel Component - 认证证书轮播
   ============================================================================= */

/**
 * Cert Carousel 组件说明
 *
 * 水平无限滚动的认证证书/品牌 Logo 轮播，悬停暂停
 *
 * 结构：
 * <div class="cert-carousel">
 *     <div class="cert-carousel__track">
 *         <div class="cert-carousel__content">
 *             <div class="cert-item">
 *                 <img src="..." alt="...">
 *                 <span class="cert-label">证书名称</span>
 *             </div>
 *         </div>
 *         <!-- 复制一份 content 用于无缝循环 -->
 *         <div class="cert-carousel__content" aria-hidden="true">
 *             ...
 *         </div>
 *     </div>
 * </div>
 */

.cert-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
    margin-bottom: 40px;
}

.cert-carousel__track {
    display: flex;
    width: max-content;
    animation: certCarouselScroll 25s linear infinite;
}

.cert-carousel__content {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
    flex-shrink: 0;
}

.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cert-item img {
    height: 200px;
    width: auto;
    max-width: none;
    object-fit: contain;
    opacity: 0.9;
    transition: opacity var(--transition);
}

.cert-item:hover img {
    opacity: 1;
}

.cert-item .cert-label {
    font-size: 12px;
    color: var(--color-muted);
    text-align: center;
    white-space: nowrap;
}

/* 悬停暂停 */
.cert-carousel:hover .cert-carousel__track {
    animation-play-state: paused;
}

/* 轮播动画 */
@keyframes certCarouselScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
    .cert-carousel__content {
        gap: 24px;
    }

    .cert-item img {
        height: 70px;
    }
}

/* =============================================================================
   24. Testimonials Grid Component - 评价卡片网格
   ============================================================================= */

/**
 * Testimonials Grid 组件说明
 *
 * 用于展示客户评价、用户反馈的卡片网格布局
 *
 * 结构：
 * <div class="testimonials-grid">
 *     <div class="testimonial-card">
 *         <img class="testimonial-card-img" src="..." alt="...">
 *         <div class="testimonial-card-name">姓名</div>
 *         <div class="testimonial-card-role">职位/角色</div>
 *         <div class="testimonial-card-text">评价内容</div>
 *     </div>
 * </div>
 */

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.testimonial-card {
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 35, 97, 0.06);
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0, 35, 97, 0.12);
    border-color: var(--color-accent);
}

.testimonial-card-img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    margin-bottom: 16px;
    border-radius: 50%;
    border: 3px solid var(--color-primary-tint);
    flex-shrink: 0;
}

.testimonial-card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 4px;
}

.testimonial-card-role {
    font-size: 13px;
    color: var(--color-accent);
    margin-bottom: 16px;
    font-weight: 500;
}

.testimonial-card-text {
    font-size: 14px;
    color: var(--color-body);
    line-height: 1.65;
    flex-grow: 1;
}

/* Responsive */
@media (max-width: 1199px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =============================================================================
   27. Factory Context Component - 工厂说明列表
   ============================================================================= */

/**
 * Factory Context 组件说明
 *
 * 用于在深色背景板块中展示工厂能力说明列表
 *
 * 结构：
 * <div class="factory-context">
 *     <ul>列表项</ul>
 * </div>
 */

.factory-context {
    max-width: 900px;
    margin: 32px auto 0;
    text-align: left;
}

.factory-context ul {
    list-style: disc;
    padding-left: 24px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.8;
}

.factory-context li {
    margin-bottom: 8px;
}

.factory-context li:last-child {
    margin-bottom: 0;
}

/* =============================================================================
   28. KS Actions - 按钮容器工具类
   ============================================================================= */

/**
 * KS Actions 组件说明
 *
 * 通用的按钮/行动容器，用于页面 CTA 按钮组的布局
 *
 * 结构：
 * <div class="ks-actions">
 *     <a href="..." class="ks-btn-primary">主按钮</a>
 *     <a href="..." class="ks-btn-secondary">辅按钮</a>
 * </div>
 *
 * 变体：
 * - ks-actions--centered: 居中排列
 * - ks-actions--stacked: 垂直堆叠，左对齐
 */

.ks-actions {
    display: flex;
    gap: 16px;
    margin-top: 48px;
    flex-wrap: wrap;
}

.ks-actions--centered {
    justify-content: center;
}

.ks-actions--stacked {
    flex-direction: column;
    align-items: flex-start;
}

@media (max-width: 767px) {
    .ks-actions {
        flex-direction: column;
    }
}

/* =============================================================================
   29. KS Intro Copy - 介绍文字工具类
   ============================================================================= */

/**
 * KS Intro Copy 组件说明
 *
 * 用于区块标题下方的介绍性描述文字，自动居中限制宽度
 *
 * 结构：
 * <p class="ks-intro-copy">介绍性描述文字...</p>
 *
 * 变体：
 * - ks-intro-copy--dark: 深色背景上的浅色文字
 */

.ks-intro-copy {
    max-width: 800px;
    margin: 0 auto 48px auto;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-muted);
}

/* 深色背景变体 */
.ks-intro-copy--dark {
    color: rgba(255, 255, 255, 0.85);
}

/* =============================================================================
   30. KS Card Grid Component - 通用卡片网格系统
   ============================================================================= */

/**
 * KS Card Grid 组件说明
 *
 * 通用的卡片网格系统，支持 2/3/4/auto 列布局
 * 响应式断点：1199px 降级为 2 列，767px 降级为单列
 *
 * 结构：
 * <div class="ks-card-grid ks-card-grid--3">
 *     <div>卡片 1</div>
 *     <div>卡片 2</div>
 *     <div>卡片 3</div>
 * </div>
 *
 * 变体：
 * - ks-card-grid--2: 2 列布局
 * - ks-card-grid--3: 3 列布局
 * - ks-card-grid--4: 4 列布局
 * - ks-card-grid--auto: 自动适应（minmax 280px）
 */

.ks-card-grid {
    display: grid;
    gap: 32px;
}

.ks-card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.ks-card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.ks-card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.ks-card-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Tablet breakpoint - 3/4 列降级为 2 列 */
@media (max-width: 1199px) {
    .ks-card-grid--3,
    .ks-card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile breakpoint - 全部单列 */
@media (max-width: 767px) {
    .ks-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* === 独立使用变体（无需基类） === */
.ks-card-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.ks-card-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.ks-card-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

@media (max-width: 1199px) {
    .ks-card-grid--3,
    .ks-card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .ks-card-grid--2,
    .ks-card-grid--3,
    .ks-card-grid--4 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =============================================================================
   31. KS Info Card Component - 信息卡片组件
   ============================================================================= */

/**
 * KS Info Card 组件说明
 *
 * 通用信息展示卡片，用于特性说明、参数展示、内容卡片等场景
 *
 * 结构：
 * <div class="ks-info-card">
 *     <h3>卡片标题</h3>        <!-- 或 h4 -->
 *     <p>描述文字...</p>
 *     <ul>
 *         <li>列表项</li>
 *         <li>列表项</li>
 *     </ul>
 * </div>
 *
 * 变体：
 * - ks-info-card--accent: 左侧橙色强调边框（4px solid --color-accent）
 * - ks-info-card--dark: 深色背景变体（适用于 bg-primary section）
 * - ks-info-card--tint: 浅蓝色背景（--color-primary-tint）
 * - ks-info-card--compact: 紧凑 padding（24px）
 * - ks-info-card--image: 顶部图片布局（padding:0, overflow:hidden）
 */

/* === Base Info Card === */
.ks-info-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.ks-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.ks-info-card h3,
.ks-info-card h4 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 12px;
}

.ks-info-card h3 {
    font-size: 18px;
}

.ks-info-card h4 {
    font-size: 16px;
}

.ks-info-card p {
    color: var(--color-body);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.ks-info-card p:last-child {
    margin-bottom: 0;
}

/* 列表样式：橙色圆点 */
.ks-info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ks-info-card ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--color-body);
    line-height: 1.5;
}

.ks-info-card ul li:last-child {
    margin-bottom: 0;
}

.ks-info-card ul li::before {
    content: '\2022';
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.4;
}

/* === Accent Variant - 左侧橙色强调边框 === */
.ks-info-card--accent {
    border-left: 4px solid var(--color-accent);
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.ks-info-card--accent:hover {
    border-left-color: var(--color-accent-dark);
}

/* === Dark Variant - 深色背景（适用于 bg-primary section） === */
.ks-info-card--dark {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-surface);
}

.ks-info-card--dark h3,
.ks-info-card--dark h4 {
    color: var(--color-surface);
}

.ks-info-card--dark p {
    color: rgba(255, 255, 255, 0.8);
}

.ks-info-card--dark ul li {
    color: rgba(255, 255, 255, 0.8);
}

.ks-info-card--dark ul li::before {
    color: var(--color-accent);
}

.ks-info-card--dark:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Dark + Accent combined */
.ks-info-card--dark.ks-info-card--accent {
    border-left: 4px solid var(--color-accent);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* === Tint Variant - 浅蓝色背景 === */
.ks-info-card--tint {
    background: var(--color-primary-tint);
    border: 1px solid transparent;
}

.ks-info-card--tint:hover {
    background: #dce3f0;
}

/* === Compact Variant - 紧凑间距 === */
.ks-info-card--compact {
    padding: 24px;
}

.ks-info-card--compact h3,
.ks-info-card--compact h4 {
    margin-bottom: 8px;
}

.ks-info-card--compact p {
    margin-bottom: 12px;
}

.ks-info-card--compact ul li {
    margin-bottom: 6px;
    font-size: 13px;
}

/* === Image Variant - 顶部图片布局 === */
.ks-info-card--image {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ks-info-card--image .ks-info-card__img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    display: block;
    background: var(--color-bg);
    transition: transform 0.4s ease;
}

.ks-info-card--image:hover .ks-info-card__img {
    transform: scale(1.03);
}

.ks-info-card--image .ks-info-card__body {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ks-info-card--image .ks-info-card__body > *:last-child {
    margin-top: auto;
}

/* === Responsive === */
@media (max-width: 767px) {
    .ks-info-card {
        padding: 24px;
    }

    .ks-info-card h3 {
        font-size: 16px;
    }

    .ks-info-card h4 {
        font-size: 15px;
    }

    .ks-info-card p {
        font-size: 13px;
    }

    .ks-info-card ul li {
        font-size: 13px;
    }

    .ks-info-card--compact {
        padding: 20px;
    }
}

/* =============================================================================
   32. Certificate Card Styles - 证书卡片样式（用于 ks-info-card--image）
   ============================================================================= */

/**
 * Certificate Card 说明
 *
 * 用于认证证书展示的特定样式，配合 ks-info-card--image 使用
 *
 * 结构：
 * <div class="ks-info-card--image ks-info-card--compact">
 *     <img class="ks-info-card__img" src="...">
 *     <div class="ks-info-card__body">
 *         <h3>证书名称</h3>
 *         <div class="cert-issuer">颁发机构</div>
 *         <p>证书描述</p>
 *         <div class="cert-meaning"><strong>For You</strong> 客户价值</div>
 *     </div>
 * </div>
 */

.cert-issuer {
    font-size: 12px;
    color: var(--color-muted);
    margin-bottom: 12px;
    font-weight: 400;
}

.cert-meaning {
    font-size: 13px;
    color: var(--color-body);
    background: var(--color-primary-tint);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-top: 16px;
    line-height: 1.5;
}

.cert-meaning strong {
    color: var(--color-accent);
    font-weight: 600;
    margin-right: 6px;
}

@media (max-width: 767px) {
    .cert-issuer {
        font-size: 11px;
    }

    .cert-meaning {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* =============================================================================
   33. 独立使用变体 - 无需基类的单类样式
   ============================================================================= */

/**
 * 独立变体说明
 *
 * 允许单独使用变体类（如 ks-info-card--accent）而无需搭配基类
 * 适用于快速编写 HTML 场景
 *
 * 例如：
 * <div class="ks-info-card--accent">  <!-- 无需 ks-info-card -->
 *     <h3>标题</h3>
 *     <p>内容</p>
 * </div>
 */

/* === ks-info-card--accent 独立使用 === */
.ks-info-card--accent {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 32px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.ks-info-card--accent:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-left-color: var(--color-accent-dark);
}

.ks-info-card--accent h3,
.ks-info-card--accent h4 {
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 12px;
}

.ks-info-card--accent h3 {
    font-size: 18px;
    font-weight: 600;
}

.ks-info-card--accent p {
    color: var(--color-body);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .ks-info-card--accent {
        padding: 24px;
    }

    .ks-info-card--accent h3 {
        font-size: 16px;
    }

    .ks-info-card--accent p {
        font-size: 13px;
    }
}

/* =============================================================================
   34. Built to Scale Section - 产能规模展示（左文字右指标）
   ============================================================================= */

/**
 * Built to Scale 组件说明
 *
 * 左侧文字描述 + 右侧指标数据的两栏布局
 * 指标部分：三个数据垂直排列（一行一个）
 *
 * 结构：
 * <section id="ks-xxx-scale" class="ks-scale-section bg-white/bg-light">
 *     <div class="ks-container">
 *         <div class="ks-scale-grid">
 *             <div class="ks-scale-content">
 *                 <h2>Built to Scale</h2>
 *                 <p class="ks-scale-desc">描述文字...</p>
 *                 <p class="ks-scale-certs">认证信息...</p>
 *             </div>
 *             <div class="ks-scale-stats">
 *                 <div class="ks-scale-stat" data-fade data-fade-delay="1">
 *                     <div class="ks-scale-stat-number">300,000</div>
 *                     <div class="ks-scale-stat-info">
 *                         <span class="ks-scale-stat-label">units / month</span>
 *                         <span class="ks-scale-stat-desc">Monthly Production Capacity</span>
 *                     </div>
 *                 </div>
 *                 <div class="ks-scale-stat" data-fade data-fade-delay="2">...</div>
 *                 <div class="ks-scale-stat" data-fade data-fade-delay="3">...</div>
 *             </div>
 *         </div>
 *         <div class="ks-actions ks-actions--centered">
 *             <a href="/manufacturing/" class="ks-btn-primary">Manufacturing Process</a>
 *         </div>
 *     </div>
 * </section>
 */

.ks-scale-section {
    padding: 100px 0;
}

.ks-scale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.ks-scale-content h2 {
    color: var(--color-primary);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 0;
}

.ks-scale-desc {
    color: var(--color-body);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 600px;
}

.ks-scale-certs {
    font-size: 14px;
    color: var(--color-muted);
    margin-bottom: 0;
}

.ks-scale-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ks-scale-stat {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border);
}

.ks-scale-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ks-scale-stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    min-width: 140px;
}

.ks-scale-stat-info {
    display: flex;
    flex-direction: column;
}

.ks-scale-stat-label {
    font-size: 14px;
    color: var(--color-muted);
    font-weight: 500;
}

.ks-scale-stat-desc {
    font-size: 13px;
    color: var(--color-body);
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 1199px) {
    .ks-scale-grid {
        gap: 48px;
    }

    .ks-scale-stat-number {
        font-size: 32px;
        min-width: 120px;
    }
}

@media (max-width: 767px) {
    .ks-scale-section {
        padding: 64px 0;
    }

    .ks-scale-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ks-scale-content h2 {
        font-size: 24px;
    }

    .ks-scale-desc {
        font-size: 14px;
    }

    .ks-scale-certs {
        font-size: 13px;
    }

    .ks-scale-stats {
        gap: 16px;
    }

    .ks-scale-stat {
        padding: 12px 0;
    }

    .ks-scale-stat-number {
        font-size: 28px;
        min-width: 100px;
    }

    .ks-scale-stat-label {
        font-size: 13px;
    }

    .ks-scale-stat-desc {
        font-size: 12px;
    }
}

.ps-card-body .ps-title{
 font-family: var(--font-primary);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-primary);
    margin-bottom: 8px;
    margin-top: 0;
}