/* 1. 全局重置 (完美去重) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. 全局色彩与基础变量 (来自 tools 的高级设定) */
:root {
    --bg-warm: rgb(251, 246, 234);
    --text-main: rgb(51, 73, 73);
    --text-sub: rgb(102, 119, 119);
    --brand-dark: rgb(19, 73, 61);
    --brand-cta: rgb(68, 174, 83);
    --border-line: rgba(51, 73, 73, 0.1);
}

/* 3. 基础标签设置 (融合了防溢出与平滑滚动) */
html {
    scroll-behavior: smooth;
}

body {
    font-family: "Spline Sans Mono", 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-warm);
    color: var(--text-main);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 暴力斩断横向溢出屏幕的元素 */
}

/* 4. 主页专属：隐藏滚动条与淡入动效 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.reveal-content {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-content.active {
    opacity: 1;
    transform: translateY(0);
}

/* 5. 布局容器与Hero横幅 */
.container { max-width: 1300px; margin: 0 auto; padding: 0 40px; }
.hero-section { display: flex; align-items: center; min-height: 70vh; padding: 60px 0; border-bottom: 1px solid var(--border-line); }
.hero-text { flex: 1; padding-right: 60px; }
.hero-text h1 { color: var(--brand-dark); font-size: 3.5rem; line-height: 1.1; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: -1px; }
.hero-text p { color: var(--text-sub); font-size: 1.25rem; margin-bottom: 40px; max-width: 80%; }
.cta-button { display: inline-block; background-color: var(--brand-cta); color: white; padding: 16px 40px; font-size: 1.1rem; font-weight: bold; text-decoration: none; border-radius: 4px; text-transform: uppercase; transition: all 0.3s ease; }
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(68, 174, 83, 0.3); }
.hero-image { flex: 1; display: flex; justify-content: center; align-items: center; }
.hero-image img { width: 100%; max-width: 550px; object-fit: contain; filter: drop-shadow(0 25px 35px rgba(19, 73, 61, 0.15)); }

/* 6. 产品模块基础结构 */
.product-module { display: flex; align-items: center; gap: 60px; padding: 80px 0; border-bottom: 1px solid var(--border-line); }
.product-module.reverse { flex-direction: row-reverse; }
.module-image { flex: 0 0 35%; position: relative; height: 350px; text-align: center; }
.module-data { flex: 1; }
.module-data h2 { color: var(--brand-dark); font-size: 2rem; margin: 0 0 15px 0; }
.scale-120 { transform: scale(1.2); }
.scale-150 { transform: scale(1.5); }
.scale-180 { transform: scale(1.8); }

/* 7. 原生纯净轮播图组件 */
.carousel { width: 100%; height: 100%; position: relative; }
.carousel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.6s ease-in-out; filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.08)); cursor: zoom-in; z-index: 1; }
.carousel img.active { opacity: 1; z-index: 2; }
.carousel-indicators { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--border-line); cursor: pointer; transition: background-color 0.3s; }
.dot.active { background-color: var(--brand-dark); }

/* 8. B2B 数据表格与 SEO 折叠面板 */
.sku-table { width: 100%; border-collapse: collapse; margin: 25px 0; }
.sku-table th, .sku-table td { padding: 12px 0; text-align: left; border-bottom: 1px dashed var(--border-line); }
.sku-table th { color: var(--text-sub); font-weight: 500; font-size: 0.9rem; text-transform: uppercase; }
.sku-table td { font-family: 'Courier New', Courier, monospace; font-size: 1rem; color: var(--text-main); font-weight: bold; }
.seo-accordion { margin-top: 20px; border-top: 1px solid var(--border-line); }
.seo-accordion details { border-bottom: 1px solid var(--border-line); }
.seo-accordion summary { padding: 15px 0; font-weight: bold; color: var(--brand-dark); cursor: pointer; list-style: none; position: relative; font-size: 0.95rem; text-transform: uppercase; }
.seo-accordion summary::-webkit-details-marker { display: none; }
.seo-accordion summary::after { content: '+'; position: absolute; right: 10px; color: var(--brand-cta); font-size: 1.2rem; }
.seo-accordion details[open] summary::after { content: '-'; }
.seo-accordion .details-content { padding-bottom: 20px; color: var(--text-sub); font-size: 0.95rem; line-height: 1.6; }

/* 9. 全局放大灯箱 (Lightbox) */
#lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(251, 246, 234, 0.95); z-index: 9999; justify-content: center; align-items: center; cursor: zoom-out; }
#lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15)); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 10. 移动端自适应引擎 */
@media (max-width: 900px) {
    .container { padding: 0 25px; }
    .hero-section { flex-direction: column; text-align: center; padding: 40px 0; }
    .hero-text { padding-right: 0; margin-bottom: 40px; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-text p { max-width: 100%; margin: 0 auto 30px auto; }
    .product-module, .product-module.reverse { flex-direction: column; gap: 30px; padding: 50px 0; }
    .module-image, .module-data { flex: none; width: 100%; }
    .module-image { height: 280px; padding: 15px; }
    .module-data h2 { font-size: 1.6rem; margin-top: 10px; }
    .sku-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .sku-table th, .sku-table td { min-width: 130px; }
}

/* =========================================
   交互式 8x6 网格大屏 (Interactive Matrix)
   ========================================= */
.matrix-grid-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

/* 强制格子变成正方形，并加上白色的半透明边框 */
.matrix-cell {
    position: relative;
    aspect-ratio: 1 / 1; 
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.05);
    cursor: crosshair;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 那个右下角的空格子，让它彻底变暗且无交互 */
.matrix-cell.empty-cell {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.02);
    cursor: default;
}

/* 鼠标划过时的品牌绿色发光和放大效果 */
.matrix-cell:not(.empty-cell):hover,
.matrix-cell.active {
    background-color: var(--brand-cta);
    border-color: var(--brand-cta);
    transform: scale(1.1);
    z-index: 10;
    box-shadow: 0 0 15px rgba(68, 174, 83, 0.5);
}