/* ========== 品牌故事 ========== */
.about-quote { font-size: 22px; font-style: italic; color: var(--silver-blue); margin-bottom: 28px; line-height: 1.7; position: relative; padding-left: 24px; border-left: 3px solid var(--silver-blue); font-weight: 400; }
.about-text { font-size: 15px; opacity: 0.8; line-height: 1.9; margin-bottom: 40px; }
.timeline { display: flex; gap: 16px; }
.milestone { flex: 1; text-align: center; padding: 24px 16px; background: rgba(255,255,255,0.04); border-radius: 8px; transition: var(--transition); }
.milestone:hover { background: rgba(255,255,255,0.08); }
.milestone .year { font-size: 24px; font-weight: 700; color: var(--silver-blue); margin-bottom: 8px; }
.milestone .event { font-size: 13px; opacity: 0.7; }
.about-image-wrapper { position: relative; text-align: center; padding-left: 40px; }
.about-image { border-radius: 8px; max-width: 100%; box-shadow: var(--shadow-lg); }

/* ========== 产品照片墙风格 ========== */
.photo-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.photo-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.photo-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.photo-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
}
/* iOS Safari < 15 aspect-ratio 回退：用 padding-top 撑高 */
@supports not (aspect-ratio: 1 / 1) {
    .photo-img { padding-top: 100%; }
}
.photo-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 32px;
    transition: transform 0.5s ease;
    box-sizing: border-box;
}
.photo-card:hover .photo-img img {
    transform: scale(1.05);
}
.photo-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--silver-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    z-index: 2;
}
.photo-info {
    padding: 20px 24px 24px;
    text-align: center;
}
.photo-cat {
    color: var(--tech-blue);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.photo-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--deep-gray);
}
.photo-info p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 16px;
}
.photo-link {
    font-size: 13px;
    font-weight: 500;
    color: var(--silver-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s;
}
.photo-link:hover { gap: 10px; color: var(--tech-blue); }
@media (max-width: 1200px) {
    .photo-wall { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .photo-wall { grid-template-columns: 1fr; }
}



/* ========== 品牌优势（横向紧凑） ========== */
.advantages-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.advantage-item {
    flex: 1;
    min-width: 140px;
    text-align: center;
    padding: 32px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    transition: var(--transition);
}
.advantage-item:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-4px);
}
.advantage-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(93,173,236,0.15) 0%, rgba(93,173,236,0.05) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--silver-blue);
    font-size: 24px;
}
.advantage-item h4 { margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.advantage-item p { font-size: 12px; opacity: 0.65; line-height: 1.5; }
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-item .number { font-size: 32px; font-weight: 700; color: var(--silver-blue); margin-bottom: 6px; }
.stat-item .label { font-size: 13px; opacity: 0.7; }


/* ========== 智能生态矩阵 (新增) ========== */
.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 40px;
}
.eco-card {
    background: rgba(255,255,255,0.03);
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(93,173,236,0.2);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.eco-card:hover {
    transform: translateY(-6px);
    border-color: var(--silver-blue);
    /*background: rgba(255,255,255,0.06);*/
    background: #F0F0F0;
}
.eco-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: inline-block;
}
.eco-role {
    display: inline-block;
    background: var(--silver-blue);
    color: var(--deep-gray);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 30px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.eco-card h4 {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    color: white;
}
.eco-card p {
    font-size: 14px;
    opacity: 0.7;
    line-height: 1.6;
}

.eco-card a{
    color: black;
}

.ecosystem-grid a{
    color: black;
}
.ecosystem-connector {
    text-align: center;
    margin: 40px 0 20px;
    font-size: 14px;
    color: var(--silver-blue);
    letter-spacing: 2px;
}
.ecosystem-connector i {
    margin: 0 12px;
    font-size: 20px;
    opacity: 0.7;
}
@media (max-width: 768px) {
    .ecosystem-grid { gap: 20px; }
    .eco-card { padding: 24px 16px; }
}

/* ========== 权威认证 ========== */
.cert-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.cert-item { text-align: center; background: white; padding: 28px 16px; border-radius: 12px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.cert-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cert-item i { font-size: 32px; color: var(--silver-blue); margin-bottom: 12px; }
.cert-item span { display: block; font-weight: 600; font-size: 13px; color: var(--deep-gray); }
.cert-item small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 4px; }

/* ========== 场景应用 - 点击横向滚动轮播特效 ========== */
.scene-carousel { position: relative; padding: 10px 0 20px; }
.scene-stage { position: relative; overflow: hidden; padding: 30px 100px; cursor: default; }
.scene-track { position: relative; min-height: 440px; }
/* 单卡片样式 - 由JS控制transform/opacity，不使用CSS transition避免冲突 */
.scene-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 460px;
    margin-left: -170px;
    margin-top: -220px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    transition: box-shadow 0.3s ease;
    transform-origin: center center;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateX(0) scale(0.5);
    pointer-events: none;
    cursor: pointer;
}
.scene-card .scene-card-link { display: block; }
.scene-card img { width: 100%; height: 240px; object-fit: cover; display: block; }
.scene-card .content { padding: 20px 24px; }
.scene-card h4 { margin-bottom: 8px; font-size: 18px; font-weight: 600; color: #0a0a0a; }
.scene-card h4 a { color: inherit; text-decoration: none; }
.scene-card h4 a:hover { color: var(--tech-blue); }
.scene-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.scene-more {
    font-size: 13px;
    font-weight: 500;
    color: var(--silver-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s, color 0.3s;
}
.scene-more:hover { gap: 10px; color: var(--tech-blue); }
.scene-more i { font-size: 11px; }
/* 中心卡片高亮 */
.scene-card.is-center {
    box-shadow: 0 20px 60px rgba(93,173,236,0.35), 0 0 0 2px rgba(93,173,236,0.3);
}
/* 导航按钮 */
.scene-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    /*background: rgba(255,255,255,0.1);*/
    /*color: #fff;*/
    color:dimgrey;
    border:2px solid dimgrey;
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.scene-nav:hover:not(:disabled) {
    /*background: var(--silver-blue);*/
    background: white;
    border-color: var(--silver-blue);
    transform: translateY(-50%) scale(1.1);
}
.scene-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.scene-nav-prev { left: 15px; }
.scene-nav-next { right: 15px; }

/* ========== 新闻动态 ========== */
.news-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 48px; }
.tab-btn { background: white; border: 1px solid #e8e8e8; font-size: 14px; font-weight: 500; padding: 10px 28px; cursor: pointer; border-radius: 40px; transition: 0.3s; color: var(--text-muted); }
.tab-btn:hover { border-color: var(--silver-blue); color: var(--silver-blue); }
.tab-btn.active { background: var(--silver-blue); border-color: var(--silver-blue); color: white; }

/* ========== 移动端响应式补充 ========== */
@media (max-width: 992px) {
    .photo-wall { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .cert-grid { grid-template-columns: repeat(3, 1fr); }
    .scene-card { width: 280px; height: 380px; margin-left: -140px; margin-top: -190px; }
    .scene-card img { height: 200px; }
    .scene-track { min-height: 380px; }
    .scene-stage { padding: 30px 60px; }
    .about-image-wrapper { padding-left: 0; }
    .stats-bar { gap: 40px; margin-top: 40px; }
}
@media (max-width: 768px) {
    .photo-wall { grid-template-columns: 1fr; gap: 20px; }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .news-grid { grid-template-columns: 1fr; gap: 16px; }
    .news-item .news-img { height: 200px; min-height: 200px; }
    .news-item .news-content { padding: 16px; }
    .scene-card { width: 240px; height: 340px; margin-left: -120px; margin-top: -170px; }
    .scene-card img { height: 160px; }
    .scene-card .content { padding: 16px; }
    .scene-card h4 { font-size: 16px; }
    .scene-track { min-height: 340px; }
    .scene-stage { padding: 20px 50px; }
    .scene-nav { width: 40px; height: 40px; font-size: 16px; }
    .stats-bar { gap: 20px; flex-direction: column; align-items: center; }
    .stat-item .number { font-size: 24px; }
    .eco-card h4 { font-size: 17px; }
    .eco-card p { font-size: 13px; }
    .about-quote { font-size: 17px; padding-left: 16px; margin-bottom: 20px; }
    .about-text { font-size: 14px; margin-bottom: 24px; }
}
@media (max-width: 480px) {
    .photo-wall { grid-template-columns: 1fr; }
    .cert-grid { grid-template-columns: 1fr; }
    .photo-info { padding: 14px; }
    .photo-info h3 { font-size: 15px; }
    .photo-info p { font-size: 12px; }
    .photo-img img { padding: 16px; }
    .news-tabs { gap: 6px; }
    .tab-btn { padding: 6px 14px; font-size: 12px; }
    .cert-item { padding: 20px 12px; }
    .cert-item i { font-size: 24px; }
    .cert-item span { font-size: 12px; }
    .cert-item small { font-size: 10px; }
    .scene-card { width: 200px; height: 300px; margin-left: -100px; margin-top: -150px; }
    .scene-card img { height: 140px; }
    .scene-track { min-height: 300px; }
    .scene-stage { padding: 15px 40px; }
    .scene-nav { width: 36px; height: 36px; font-size: 14px; }
}

/* ========== 首页跑马灯 =========== */
.horizontal_scroll_bar {
    background: #0a0a0a;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: marquee-scroll 100s linear infinite;
    will-change: transform;
}
.horizontal_scroll_bar:hover .marquee-track {
    animation-play-state: paused;
}
.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 32px;
    font-size: 16px;
    line-height: 1.6;
    font-family: inherit;
    font-weight: 300;
    color: #f0f0f0;
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.06);
    transition: color 0.3s, background 0.3s;
    -webkit-font-smoothing: antialiased;
}
.marquee-item:hover {
    color: #5DADEC;
    background: rgba(93,173,236,0.08);
}
.marquee-diamond {
    width: 12px;
    height: 12px;
    background: #5DADEC;
    transform: rotate(45deg);
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(93,173,236,0.7), 0 0 4px rgba(93,173,236,0.9);
    border: 1px solid rgba(255,255,255,0.5);
}
.marquee-text {
    color: inherit;
    letter-spacing: 0.5px;
    font-weight: 300;
}
.marquee-item:hover .marquee-text {
    color: #5DADEC;
}
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ========== Flexbox 手风琴卡片特效（solutions-wall） ========== */
.solutions-wall {
    display: flex !important;
    height: 460px;
    gap: 12px;
    overflow: hidden;
    grid-template-columns: none;
}
.solutions-wall .column-item {
    flex: 1;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: flex 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}
.solutions-wall .column-item:hover {
    flex: 6;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.solutions-wall .photo-card {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transform: none;
}
.solutions-wall .photo-card:hover {
    transform: none;
    box-shadow: none;
}
.solutions-wall .photo-img {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f2f5 100%);
}
.solutions-wall .photo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    transition: transform 0.6s ease;
}
.solutions-wall .column-item:hover .photo-img img {
    transform: scale(1.08);
}
/* 渐变遮罩 */
.solutions-wall .photo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,42,59,0.92) 0%, rgba(11,42,59,0.4) 45%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}
/* 信息层 */
.solutions-wall .photo-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 24px;
    text-align: left;
    z-index: 2;
}
/* 折叠状态：仅显示标题 */
.solutions-wall .photo-info h3 {
    color: #fff;
    font-size: 17px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.solutions-wall .photo-info h3 a { color: #fff; }
/* 折叠时隐藏非标题内容 */
.solutions-wall .photo-info .photo-cat,
.solutions-wall .photo-info p,
.solutions-wall .photo-info .photo-link {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease;
    color:#06a3f0;
}
/* 展开状态：分层渐显 */
.solutions-wall .column-item:hover .photo-info .photo-cat {
    max-height: 30px;
    opacity: 1;
    margin-bottom: 10px;
    transition-delay: 0.15s;
    color:#06a3f0;
}
.solutions-wall .column-item:hover .photo-info p {
    max-height: 80px;
    opacity: 1;
    margin-bottom: 16px;
    transition-delay: 0.25s;
}
.solutions-wall .column-item:hover .photo-info .photo-link {
    max-height: 30px;
    opacity: 1;
    transition-delay: 0.35s;
    color:#06a3f0;
}
/* 颜色统一 */
.solutions-wall .photo-cat { color: var(--accent); }
.solutions-wall .photo-info p { color: rgba(255,255,255,0.85); }
.solutions-wall .photo-link { color: var(--accent); }
.solutions-wall .photo-link:hover { color: #fff; }

/* ========== 产品展示墙 products-wall（容器内+栏目标题内置+横线分隔+等比例适配about宽度） ========== */
#products { padding: 60px 0 80px; }
#products .products-wall {
    display: flex !important;
    gap: 0;
    align-items: stretch;
    min-height: 600px;
    margin-top: 0;
    grid-template-columns: none !important;
    padding: 0;
    width: 100%;
}
/* 左侧：栏目标题(横线分隔) + 产品信息 + 大图圆环 */
.pw-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    padding: 20px 24px;
}
/* 产品信息（栏目标题+横线+产品内容） */
.pw-info {
    flex: 0 0 300px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.pw-info .section-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--silver-blue, #5DADEC);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.pw-info .section-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: var(--dark);
    margin-bottom: 10px;
}
.pw-info .section-desc {
    font-size: 0.92rem;
    color: var(--text-muted, #888);
    line-height: 1.6;
    margin-bottom: 100px;
}
/* 横线分隔 */
.pw-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, rgba(31, 93, 122, 0.3), rgba(31, 93, 122, 0.05));
    margin: 30px 0;
}
/* 时针圆环舞台（等比例调大，占满 about 同等宽度） */
.pw-stage {
    position: relative;
    width: 580px;
    height: 580px;
    max-width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 圆圈外环 */
.pw-clock-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed rgba(31, 93, 122, 0.25);
    background: radial-gradient(circle, rgba(240,244,248,0.7) 0%, rgba(240,244,248,0.25) 60%, transparent 88%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 8px 40px rgba(31, 93, 122, 0.1), inset 0 0 80px rgba(255,255,255,0.45);
}
/* 主图超链接 */
.pw-img-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82%;
    height: 82%;
    position: relative;
    z-index: 1;
}
/* 主图 */
.pw-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.pw-main-img.switching {
    opacity: 0.2;
}
/* 产品标题/描述 */
.pw-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.pw-title  a{
    color:black;
    text-decoration: none;
}
/* 标题超链接 */
.pw-title-link {
    display: block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.pw-title-link:hover .pw-title {
    color: var(--primary);
    opacity: 0.85;
}

.pw-desc {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 24px;
}
/* more+ 蓝色按钮 */
.pw-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 32px;
    background: #06a3f0;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(6, 163, 240, 0.35);
    align-self: flex-start;
}
.pw-more:hover {
    background: #0589c9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 163, 240, 0.45);
    gap: 12px;
    color: #fff;
}
.pw-more i { font-size: 0.9rem; transition: transform 0.3s; }
.pw-more:hover i { transform: translateX(3px); }
/* 右侧纵向大图标按钮 */
.pw-nav {
    flex: 0 0 270px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 20px 18px 20px 26px;
    border-left: 1px solid rgba(31, 93, 122, 0.08);
}
.pw-icon-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 7px 9px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    width: 100%;
    border-radius: 10px;
}
.pw-icon-btn:hover {
    background: rgba(240, 244, 248, 0.6);
}
.pw-icon-btn:hover .pw-icon-circle {
    border-color: var(--accent);
    transform: scale(1.08);
}
.pw-icon-btn:hover .pw-icon-label {
    color: var(--primary);
}
/* 圆形大图标 */
.pw-icon-circle {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
    background: #f0f4f8;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.pw-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 激活态：图标变大 */
.pw-icon-btn.active .pw-icon-circle {
    width: 82px;
    height: 82px;
    min-width: 82px;
    border-color: var(--primary);
    box-shadow: 0 6px 22px rgba(31, 93, 122, 0.3);
}
.pw-icon-btn.active {
    background: rgba(31, 93, 122, 0.06);
}
.pw-icon-label {
    font-size: 0.95rem;
    color: var(--gray);
    transition: all 0.3s ease;
    line-height: 1.4;
    flex: 1;
}
.pw-icon-btn.active .pw-icon-label {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.05rem;
}
/* ===== products-wall 响应式 ===== */
@media (max-width: 1200px) {
    .pw-stage { width: 500px; height: 500px; }
    .pw-info { flex: 0 0 260px; }
    .pw-nav { flex: 0 0 240px; }
    .pw-icon-circle { width: 54px; height: 54px; min-width: 54px; }
    .pw-icon-btn.active .pw-icon-circle { width: 74px; height: 74px; min-width: 74px; }
    .pw-info .section-title { font-size: 1.5rem; }
    .pw-title { font-size: 1.3rem; }
}
@media (max-width: 992px) {
    #products .products-wall {
        flex-direction: column-reverse;
        gap: 24px;
        min-height: auto;
    }
    .pw-display {
        flex-direction: column;
        gap: 24px;
        padding: 20px;
    }
    .pw-info {
        flex: none;
        text-align: center;
        order: 2;
        max-width: 600px;
    }
    .pw-info .section-label,
    .pw-info .section-title,
    .pw-info .section-desc { text-align: center; }
    .pw-divider { width: 80%; margin: 20px auto; }
    .pw-more { align-self: center; }
    .pw-stage {
        width: 420px;
        height: 420px;
        order: 1;
    }
    .pw-nav {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-left: none;
        border-top: 1px solid rgba(31, 93, 122, 0.08);
        padding: 20px 16px 0;
        gap: 12px;
    }
    .pw-icon-btn {
        flex: 0 0 auto;
    }
}
@media (max-width: 768px) {
    .pw-stage {
        width: 320px;
        height: 320px;
    }
    .pw-info .section-title { font-size: 1.4rem; }
    .pw-title { font-size: 1.2rem; }
    .pw-desc { font-size: 0.88rem; }
    .pw-icon-btn.active .pw-icon-circle {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .pw-icon-circle {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }
    .pw-icon-label { font-size: 0.82rem; }
    .pw-icon-btn.active .pw-icon-label { font-size: 0.9rem; }
}

/* ===== 手风琴响应式：平板/手机回退为网格 ===== */
@media (max-width: 992px) {
    .solutions-wall {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        height: auto;
        gap: 20px;
    }
    .solutions-wall .column-item { flex: none; }
    .solutions-wall .photo-card { position: relative; }
    .solutions-wall .photo-img {
        position: relative;
        aspect-ratio: 1 / 1;
        inset: auto;
    }
    .solutions-wall .photo-img img {
        object-fit: contain;
        padding: 32px;
    }
    .solutions-wall .photo-card::after { display: none; }
    .solutions-wall .photo-info {
        position: relative;
        padding: 20px 24px 24px;
        text-align: center;
    }
    .solutions-wall .photo-info h3 { color: var(--deep-gray); text-shadow: none; white-space: normal; }
    .solutions-wall .photo-info h3 a { color: var(--deep-gray); }
    .solutions-wall .photo-info .photo-cat,
    .solutions-wall .photo-info p,
    .solutions-wall .photo-info .photo-link {
        max-height: none;
        opacity: 1;
        margin: revert;
        transition: none;
    }
    .solutions-wall .photo-cat { color: var(--tech-blue); }
    .solutions-wall .photo-info p { color: var(--text-muted); }
    .solutions-wall .photo-link { color: var(--silver-blue); }
}
@media (max-width: 768px) {
    .solutions-wall { grid-template-columns: 1fr !important; }
}

/* ====== 移动端响应式（内联样式覆盖修正） ====== */
@media (max-width: 992px) {
    .row { grid-template-columns: 1fr; gap: 2rem; }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .news-tabs { flex-wrap: wrap; justify-content: center; }
    .stats-bar { gap: 30px; }
    /* 创始人模块：平板下双列堆叠后的布局优化 */
    #about .section-label { display: block; text-align: center; }
    #about .section-title { text-align: center !important; }
    #about .about-quote { text-align: left; }
    #about .about-image-wrapper { padding-left: 0; margin-top: 2.5rem; }
    #about .about-image { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 768px) {
    .cert-grid { grid-template-columns: 1fr; }
    .news-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
        justify-content: flex-start;
    }
    .tab-btn { padding: 0.5rem 1.2rem; font-size: 0.85rem; white-space: nowrap; }
    .news-grid { grid-template-columns: 1fr !important; }
    .news-img { height: 200px !important; }
    .news-content { padding: 1rem; }
    .news-content h3 { font-size: 1rem; }
    .news-content p { font-size: 0.85rem; }
    .stats-bar { gap: 20px; flex-direction: column; align-items: center; }
    .stat-item .number { font-size: 1.5rem; }
    .about-quote { font-size: 1.05rem; padding-left: 1rem; }
    .about-text { font-size: 0.88rem; }
    .timeline { gap: 0.8rem; }
    .milestone { flex: 1 1 45% !important; min-width: 120px; padding: 0.8rem; }
    .oem-step { padding: 1.5rem 1rem; }
    .oem-step-img { height: 120px; }
    .oem-step h3 { font-size: 1rem; }
    .oem-step p { font-size: 0.82rem; }
    .ecosystem-connector { font-size: 0.75rem; letter-spacing: 1px; }
    .ecosystem-connector i { margin: 0 6px; font-size: 16px; }
    .advantage-icon-img { height: 120px; }
    .advantage-icon-img img { width: 100%; }
    .oem-grid .eco-card .advantage-icon-img { height: 120px; }
    .oem-grid .eco-card { padding: 20px 16px 16px; }
    .oem-grid .eco-card h4 { font-size: 16px; }
    /* 创始人模块：手机端样式优化 */
    #about .section-title { font-size: 1.5rem !important; }
    #about .about-quote { font-size: 1rem; padding-left: 0.8rem; margin-bottom: 1.2rem; }
    #about .about-text { font-size: 0.85rem; margin-bottom: 1.5rem; line-height: 1.8; }
    #about .timeline { flex-wrap: wrap; gap: 0.6rem; }
    #about .milestone { padding: 0.7rem 0.5rem; }
    #about .milestone .year { font-size: 1.15rem; margin-bottom: 0.3rem; }
    #about .milestone .event { font-size: 0.7rem; line-height: 1.3; }
    #about .about-image-wrapper { margin-top: 2rem; }
    #about .about-image { max-width: 100%; }
}
@media (max-width: 480px) {
    .cert-grid { grid-template-columns: 1fr; }
    .timeline { flex-direction: column; }
    .milestone { flex: 1 1 100% !important; }
    .news-tabs { gap: 0.3rem; }
    .tab-btn { padding: 0.4rem 0.8rem; font-size: 0.78rem; }
    .stats-bar { gap: 16px; }
    .stat-item .number { font-size: 1.2rem; }
    .stat-item .label { font-size: 0.7rem; }
    .photo-info { padding: 1rem; }
    .photo-info h3 { font-size: 1rem; }
    .photo-info p { font-size: 0.8rem; }
    /* 创始人模块：小屏手机样式优化 */
    #about .section-title { font-size: 1.25rem !important; }
    #about .about-quote { font-size: 0.9rem; padding-left: 0.6rem; border-left-width: 2px; }
    #about .about-text { font-size: 0.8rem; }
    #about .timeline { gap: 0.5rem; }
    #about .milestone { padding: 0.6rem 0.4rem; }
    #about .milestone .year { font-size: 1rem; }
    #about .milestone .event { font-size: 0.68rem; }
    #about .about-image-wrapper { margin-top: 1.5rem; }
}

/* ABOUT */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.about-quote {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--primary);
    border-left: 4px solid var(--accent);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-weight: 500;
}
.about-text {
    font-size: 0.95rem;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 2rem;
}
.timeline {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.milestone {
    text-align: center;
    padding: 1rem 1.5rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    min-width: 120px;
}
.milestone .year {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
}
.milestone .event {
    font-size: 0.8rem;
    color: var(--gray);
    margin-top: 0.3rem;
}
.about-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}
.about-image-wrapper img {
    width: 100%;
    display: block;
}
.about-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11,42,59,0.3) 100%);
}
/* CERTIFICATIONS */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.cert-item {
    background: var(--white);
    border-radius: var(--card-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: var(--transition);
    border: 1px solid rgba(31, 93, 122, 0.08);
}
.cert-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(31, 93, 122, 0.1);
}
.cert-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1rem;
    display: block;
}
.cert-item span {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.4rem;
}
.cert-item small {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.5;
    display: block;
}

.cert-item img{
    width: 100px;
    height: 100px;
}

/* 所有新闻条目默认隐藏，通过JS控制显示；激活后为 block 竖向卡片（图上+文下） */
.news-item {
    display: none;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
.news-item.active {
    display: block;
}
.news-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}
.news-img {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
}
.news-content {
    padding: 1.1rem 1.3rem 1.4rem;
    margin: 0;
}
.news-date {
    font-size: 0.8rem;
    color: #6b8b9f;
    display: block;
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding: 0;
    line-height: 1.4;
}
.news-content h3 {
    font-size: 1.05rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    padding: 0;
    color: #0b2a3b;
    font-weight: 600;
    line-height: 1.4;
}
.news-content p {
    font-size: 0.9rem;
    color: #3d5d6e;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}
.no-data {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: #6b8b9f;
    display: none;
}
.no-data.active {
    display: block;
}

/* 新闻卡片：4 列自适应网格 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}
/* 确保作为 grid item 的 <a> 标签不受 .a-no-style { all: unset } 影响 */
.news-grid > a {
    display: none;
    margin: 0;
    padding: 0;
}
.news-grid > a.active {
    display: block;
}
.news-grid > a .news-item {
    width: 100%;
}

.oem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 2;
    margin-top: 30px;
}
/* 浅底主题下的 eco-card：与 ecosystem-grid 卡片风格统一（同圆角/过渡/悬停上浮），
   但适配白/浅灰背景（白底 + 细边框 + 轻阴影） */
.oem-grid .eco-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px 18px 20px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid rgba(93,173,236,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.oem-grid .eco-card:hover {
    transform: translateY(-6px);
    border-color: var(--silver-blue);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.oem-grid .eco-card .advantage-icon-img {
    width: 100%;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.oem-grid .eco-card .advantage-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.oem-grid .eco-card:hover .advantage-icon-img img {
    transform: scale(1.04);
}
.oem-grid .eco-card h4 {
    font-size: 17px;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--deep-gray);
}
.oem-grid .eco-card h4 a {
    color: var(--deep-gray);
    text-decoration: none;
    transition: color 0.2s ease;
}
.oem-grid .eco-card h4 a:hover {
    color: var(--tech-blue);
}

.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
}
.oem-step {
    background: rgba(255,255,255,0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--card-radius);
    padding: 2rem 1.5rem;
    transition: var(--transition);
}
.oem-step-img {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.oem-step-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.oem-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.8rem;
}
.oem-step p {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
}
.oem-section {
    background: linear-gradient(135deg, var(--dark) 0%, var(--primary-dark) 100%);
    position: relative;
    overflow: hidden;
}
.advantage-icon-img {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}
.advantage-icon-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ========== hotus-advantages 3D 悬停相册特效（3 列 2 行 + 弧形折叠） ==========
   3 列 × 2 行网格：中间列卡片保持正面，
   左列卡片左侧边（外侧）固定、右侧（内侧）向后折叠，
   右列卡片右侧边（外侧）固定、左侧（内侧）向后折叠，
   形成"两侧向中央合拢"的弧形 3D 观感。悬停时回正并向外突出浮起。
   所有规则用 #hotus-advantages .advantages-grid 作用域隔离，避免影响其他 .eco-card。
======================================================================= */
#hotus-advantages .advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 70px;                /* 行间距 50px，列间距 70px：留出折叠展开空间 */
    perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective-origin: center 35%;
    -webkit-perspective-origin: center 35%;
    max-width: 1280px;
    margin: 30px auto 0;
    padding: 50px 40px 80px;       /* 侧边留白给 3D 旋转空间，底部留白容纳投影 */
    box-sizing: border-box;
}

/* 单张卡片：3D 容器，统一过渡 */
#hotus-advantages .advantages-grid .eco-card {
    min-width: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    /* 离开时加 0.12s 延迟防抖：避免鼠标在边缘反复进出导致抖动 */
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
                box-shadow 0.5s ease 0.12s,
                border-color 0.4s ease 0.12s,
                background 0.4s ease 0.12s;
    will-change: transform;
    position: relative;
    padding: 24px 22px 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(93,173,236,0.25);
    box-shadow: 0 10px 28px rgba(0,0,0,0.4);
    border-radius: 18px;
}

/* 透明命中扩展层：向外延伸 18px，让"命中区域"覆盖卡片旋转/回正两个状态的范围，
   消除边缘视觉区与命中区不一致导致的抖动。纯透明、不影响视觉。 */
#hotus-advantages .advantages-grid .eco-card::before {
    content: '';
    position: absolute;
    inset: -18px;                 /* 四周外扩 18px：覆盖旋转前后的位置差 */
    pointer-events: auto;         /* 扩展层接收 hover 事件，维持父级 :hover 状态 */
    background: transparent;
    border-radius: 24px;
    z-index: 0;                   /* 不遮挡内容（内容靠 translateZ 浮出在前） */
    -webkit-transform: translateZ(-1px);
    transform: translateZ(-1px);  /* 略微下沉，避免与卡片表面闪烁 */
}

/* 弧形折叠布局：3 列中第 1、4 张为左列，第 2、5 张为中列，第 3 张为右列 */
/* 左列卡片：左侧（外侧）边缘固定，右侧（内侧）向后折叠，形成 \ 形弧线 */
#hotus-advantages .advantages-grid .eco-card:nth-child(3n+1) {
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transform: rotateY(38deg);
    -webkit-transform: rotateY(38deg);
}
/* 中列卡片：保持正面 */
#hotus-advantages .advantages-grid .eco-card:nth-child(3n+2) {
    transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}
/* 右列卡片：右侧（外侧）边缘固定，左侧（内侧）向后折叠，形成 / 形弧线 */
#hotus-advantages .advantages-grid .eco-card:nth-child(3n) {
    transform-origin: right center;
    -webkit-transform-origin: right center;
    transform: rotateY(-38deg);
    -webkit-transform: rotateY(-38deg);
}

/* 悬停：回正 + 向前突出 + 上浮 */
#hotus-advantages .advantages-grid .eco-card:hover {
    transform: rotateY(0deg) translateZ(50px) translateY(-14px);
    -webkit-transform: rotateY(0deg) translateZ(50px) translateY(-14px);
    border-color: var(--silver-blue);
    background: rgba(255,255,255,0.1);
    box-shadow: 0 36px 64px -16px rgba(0,0,0,0.7),
                0 0 0 1px rgba(255,255,255,0.1);
    z-index: 10;
    /* 进入时无延迟，立即响应 */
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.5s ease,
                border-color 0.4s ease,
                background 0.4s ease;
}

/* 投影：卡片下方"立在地面上"的椭圆阴影 */
#hotus-advantages .advantages-grid .eco-card::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -24px;
    height: 30px;
    background: radial-gradient(ellipse at center,
                rgba(0,0,0,0.6) 0%,
                rgba(0,0,0,0.32) 40%,
                rgba(0,0,0,0) 75%);
    -webkit-filter: blur(9px);
    filter: blur(9px);
    transform: translateZ(-70px) rotateX(80deg);
    -webkit-transform: translateZ(-70px) rotateX(80deg);
    opacity: 0.78;
    transition: opacity 0.5s ease, left 0.5s ease, right 0.5s ease, bottom 0.5s ease;
    pointer-events: none;
    border-radius: 50%;
}
#hotus-advantages .advantages-grid .eco-card:hover::after {
    left: 3%;
    right: 3%;
    bottom: -30px;
    opacity: 1;
}

/* 图片层：等比例缩小高度 + Z 轴抬升，增强立体层次 */
#hotus-advantages .advantages-grid .eco-card .advantage-icon-img {
    transform: translateZ(24px);
    -webkit-transform: translateZ(24px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    height: 180px;                 /* 等比例缩小，匹配 3 列布局 */
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(93,173,236,0.1) 0%, rgba(255,255,255,0.03) 100%);
    margin-bottom: 1.1rem;
}
#hotus-advantages .advantages-grid .eco-card .advantage-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
#hotus-advantages .advantages-grid .eco-card:hover .advantage-icon-img {
    transform: translateZ(44px);
    -webkit-transform: translateZ(44px);
}
#hotus-advantages .advantages-grid .eco-card:hover .advantage-icon-img img {
    transform: scale(1.04);
}

/* 标题 / 描述 Z 轴抬升，跟随图片层次 */
#hotus-advantages .advantages-grid .eco-card h4 {
    transform: translateZ(18px);
    -webkit-transform: translateZ(18px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    font-size: 18px;
    margin-bottom: 10px;
}
#hotus-advantages .advantages-grid .eco-card p {
    transform: translateZ(18px);
    -webkit-transform: translateZ(18px);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    font-size: 13px;
    line-height: 1.65;
}
#hotus-advantages .advantages-grid .eco-card:hover h4,
#hotus-advantages .advantages-grid .eco-card:hover p {
    transform: translateZ(34px);
    -webkit-transform: translateZ(34px);
}

/* Safari 兼容：preserve-3d 渲染优化 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #hotus-advantages .advantages-grid .eco-card {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* 不支持 3D 变换的旧浏览器回退：3 列普通网格 */
@supports not (transform: rotateY(38deg)) {
    #hotus-advantages .advantages-grid {
        gap: 24px;
        padding: 20px 0 40px;
    }
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+1),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+2),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n) {
        transform: none;
    }
    #hotus-advantages .advantages-grid .eco-card:hover {
        transform: translateY(-8px);
    }
    #hotus-advantages .advantages-grid .eco-card .advantage-icon-img,
    #hotus-advantages .advantages-grid .eco-card h4,
    #hotus-advantages .advantages-grid .eco-card p {
        transform: none;
    }
}

/* 响应式：中屏降为 2 列并调整折叠；移动端关闭 3D 改为单列 */
@media (max-width: 1200px) {
    #hotus-advantages .advantages-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 50px;
        padding: 40px 25px 70px;
    }
    /* 2 列布局下：奇数列左侧固定右侧向后折叠，偶数列右侧固定左侧向后折叠 */
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+1),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+2),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n) {
        transform-origin: center center;
        -webkit-transform-origin: center center;
        transform: rotateY(0);
        -webkit-transform: rotateY(0);
    }
    #hotus-advantages .advantages-grid .eco-card:nth-child(odd) {
        transform-origin: left center;
        -webkit-transform-origin: left center;
        transform: rotateY(30deg);
        -webkit-transform: rotateY(30deg);
    }
    #hotus-advantages .advantages-grid .eco-card:nth-child(even) {
        transform-origin: right center;
        -webkit-transform-origin: right center;
        transform: rotateY(-30deg);
        -webkit-transform: rotateY(-30deg);
    }
    #hotus-advantages .advantages-grid .eco-card { padding: 22px 20px 20px; }
    #hotus-advantages .advantages-grid .eco-card .advantage-icon-img { height: 170px; }
    #hotus-advantages .advantages-grid .eco-card h4 { font-size: 17px; }
}
@media (max-width: 768px) {
    #hotus-advantages .advantages-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        perspective: none;
        padding: 20px 0 30px;
        max-width: 100%;
    }
    #hotus-advantages .advantages-grid .eco-card,
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+1),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n+2),
    #hotus-advantages .advantages-grid .eco-card:nth-child(3n),
    #hotus-advantages .advantages-grid .eco-card:nth-child(odd),
    #hotus-advantages .advantages-grid .eco-card:nth-child(even) {
        transform: none !important;
        transform-origin: center center !important;
        padding: 20px 18px 18px;
    }
    #hotus-advantages .advantages-grid .eco-card::after { display: none; }
    #hotus-advantages .advantages-grid .eco-card .advantage-icon-img,
    #hotus-advantages .advantages-grid .eco-card h4,
    #hotus-advantages .advantages-grid .eco-card p {
        transform: none !important;
    }
    #hotus-advantages .advantages-grid .eco-card:hover {
        transform: translateY(-6px) !important;
    }
    #hotus-advantages .advantages-grid .eco-card:hover .advantage-icon-img img {
        transform: scale(1.02);
    }
    #hotus-advantages .advantages-grid .eco-card .advantage-icon-img { height: 160px; }
    #hotus-advantages .advantages-grid .eco-card h4 { font-size: 16px; }
    #hotus-advantages .advantages-grid .eco-card p { font-size: 12px; }
}

/* ========== 用户评论 - 跑马灯滚动轮播特效 ==========
   自左向右滚动；两侧边缘虚化；鼠标悬停停止滚动。
   review-marquee 使用 direction:rtl 使轨道右对齐，
   review-track 内部 direction:ltr 确保卡片从左到右排列。
   双副本 + 0→50% 位移实现无缝循环，全程无空隙。
=================================================================== */
#reviews .reviews-grid {
    overflow: hidden;
    position: relative;
    /* 两侧边缘虚化效果 */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* 跑马灯行容器：direction:rtl 使轨道右对齐，最右侧卡片紧贴容器右边 */
.review-marquee {
    overflow: hidden;
    position: relative;
    direction: rtl;
}

/* 跑马灯轨道：承载卡片的柔性容器 */
.review-track {
    display: flex;
    width: max-content;
    will-change: transform;
    align-items: stretch;
    direction: ltr;
    animation: review-marquee-ltr 60s linear infinite;
}

/* 鼠标悬停时停止滚动 */
.review-marquee:hover .review-track {
    animation-play-state: paused;
}

@keyframes review-marquee-ltr {
    0%   { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* 评论卡片：固定宽度 + 右侧间距（margin-right 确保无缝循环时 50% 位移精确对齐） */
.review-card {
    flex: 0 0 400px;
    width: 400px;
    min-height: 320px;          /* 内容少时保持最小高度 */
    margin-right: 24px;
    background: var(--white);
    border-radius: var(--card-radius);
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(31, 93, 122, 0.08);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(31, 93, 122, 0.12);
}

/* 卡片头部：产品图标 + 产品名称 */
.review-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(31, 93, 122, 0.08);
}

.review-card-head a{
    text-decoration: none;
}
.review-icon {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
}
.review-product {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--deep-gray);
    line-height: 1.4;
}

/* 评论标题 */
.review-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* 评论详情：限制 5 行，超出省略 */
.review-text {
    font-size: 0.82rem;
    color: var(--gray);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 评论时间 */
.review-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.review-date i {
    font-size: 0.8rem;
}

/* 响应式 */
@media (max-width: 992px) {
    .review-card {
        flex: 0 0 340px;
        width: 340px;
    }
}
@media (max-width: 768px) {
    .review-card {
        flex: 0 0 280px;
        width: 280px;
        padding: 1.25rem 1rem 1rem;
    }
    .review-text {
        -webkit-line-clamp: 4;
    }
}
@media (max-width: 480px) {
    .review-card {
        flex: 0 0 240px;
        width: 240px;
        margin-right: 16px;
    }
    .review-icon { font-size: 1.25rem; }
    .review-product { font-size: 0.72rem; }
    .review-title { font-size: 0.88rem; }
    .review-text { font-size: 0.72rem; -webkit-line-clamp: 3; }
    .review-date { font-size: 0.68rem; }
}

/* ===================== FAQ 问答模块（标签切换版） ===================== */
#faq {
    background: var(--bg-light);
    padding: var(--section-gap) 0;
}

/* 整体容器 */
.faq-tabs-wrap {
    max-width: 1320px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--card-radius);
    box-shadow: 0 8px 32px rgba(11, 42, 59, 0.08);
    border: 1px solid rgba(31, 93, 122, 0.08);
    overflow: hidden;
}

/* 产品分类标签栏 */
.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #f0f4f8 0%, #e6eef3 100%);
    border-bottom: 1px solid rgba(31, 93, 122, 0.1);
}

/* 单个标签 */
.faq-tab {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    background: var(--white);
    color: var(--gray);
    border-radius: 30px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(11, 42, 59, 0.06);
    transition: var(--transition);
    cursor: pointer;
}
.faq-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(31, 93, 122, 0.18);
    color: var(--primary);
}
.faq-tab.active {
    background: linear-gradient(135deg, #1f5d7a 0%, #2a7a9e 100%);
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(31, 93, 122, 0.35);
}
.faq-tab.active:hover {
    color: var(--white);
}
.faq-cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.faq-cat-icon img {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
}
.faq-tab.active .faq-cat-icon {
    background: rgba(255, 255, 255, 0.25);
}

/* 问答面板容器 */
.faq-panels {
    padding: 28px;
}

/* 单个面板 */
.faq-panel {
    display: none;
    animation: faqFadeIn 0.35s ease;
}
.faq-panel.active {
    display: block;
}
@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 问答条目 */
.faq-item {
    position: relative;
    padding: 16px 18px 16px 52px;
    margin-bottom: 14px;
    background: rgba(240, 244, 248, 0.6);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    transition: var(--transition);
}
.faq-item:last-child {
    margin-bottom: 0;
}
.faq-item:hover {
    background: rgba(31, 93, 122, 0.06);
    border-left-color: var(--accent);
    transform: translateX(4px);
}

/* 问：Q 标记 + 标题 */
.faq-item h3 {
    position: relative;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.5;
    margin: 0 0 10px 0;
}
.faq-item h3::before {
    content: "Q";
    position: absolute;
    left: -42px;
    top: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(31, 93, 122, 0.3);
}

/* 答：A 标记 + 正文 */
.faq-item span {
    display: block;
    font-size: 0.92rem;
    color: var(--gray);
    line-height: 1.75;
    padding-left: 0;
}
.faq-item span::before {
    content: "A";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--dark);
    font-size: 0.72rem;
    font-weight: 800;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ========== 响应式 ========== */
@media (max-width: 992px) {
    .faq-tabs-wrap {
        max-width: 100%;
    }
    .faq-tabs {
        padding: 20px;
        gap: 10px;
    }
    .faq-panels {
        padding: 22px 20px;
    }
}

@media (max-width: 768px) {
    .faq-tabs {
        padding: 16px 14px;
        gap: 10px;
    }
    .faq-tab {
        font-size: 0.9rem;
        padding: 10px 16px;
        gap: 10px;
    }
    .faq-cat-icon {
        width: 30px;
        height: 30px;
    }
    .faq-cat-icon img {
        width: 30px;
        height: 30px;
    }
    .faq-panels {
        padding: 18px 14px;
    }
    .faq-item {
        padding: 14px 14px 14px 46px;
        margin-bottom: 12px;
    }
    .faq-item h3 {
        font-size: 0.95rem;
    }
    .faq-item h3::before {
        left: -38px;
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }
    .faq-item span {
        font-size: 0.85rem;
        line-height: 1.7;
    }
}

/* ========== Factory 工厂介绍（16:9 横屏视频 左 | 文字 右 · 并排同高滚动） ========== */
#factory { background: var(--pearl-white); }

.factory-bird {
    display: grid;
    grid-template-columns: 48% 1fr;
    gap: 48px;
    align-items: stretch;
}

/* 左侧视频列：16:9 横屏，保持 aspect-ratio 决定的高度，不影响行高 */
.factory-left-col {
    min-width: 0;
    display: flex;
    align-self: start; /* 保持子元素 aspect-ratio 高度，不撑大行高 */
}

/* ========== 视频卡片（16:9 横屏） ========== */
.factory-con-video {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    background: #000;
}
/* 封面图 */
.factory-con-video .factory-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    transition: opacity 0.4s ease, transform 0.6s ease;
}
.factory-con-video.is-playing .factory-video-poster {
    opacity: 0;
}
.factory-con-video:hover .factory-video-poster {
    transform: scale(1.04);
}
/* video 元素 */
.factory-con-video .factory-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.factory-con-video.is-playing .factory-video {
    opacity: 1;
    pointer-events: auto;
}
/* 蓝色覆盖层 */
.factory-con-video .overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(
        135deg,
        rgba(11, 42, 59, 0.55) 0%,
        rgba(11, 42, 59, 0.25) 60%,
        rgba(11, 42, 59, 0.45) 100%
    );
    transition: background 0.3s ease;
    pointer-events: none;
}
.factory-con-video:hover .overlay {
    background: linear-gradient(
        135deg,
        rgba(11, 42, 59, 0.65) 0%,
        rgba(11, 42, 59, 0.3) 60%,
        rgba(11, 42, 59, 0.55) 100%
    );
}
.factory-con-video.is-playing .overlay {
    opacity: 0.35;
}
/* 播放中隐藏标题文字层（仅在初始化和播放完毕后显示） */
.factory-con-video.is-playing .content {
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* 内容层 */
.factory-con-video .content {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px 28px;
    color: #fff;
    pointer-events: none;
}
.factory-con-video .video-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 5px 14px;
    background: var(--silver-blue);
    color: var(--deep-gray);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 30px;
    margin-bottom: 10px;
    pointer-events: auto;
}
.factory-con-video .title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
/* 播放按钮 */
.factory-con-video .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}
.factory-con-video .play-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 20px solid var(--tech-blue);
    transition: border-color 0.3s ease;
}
.factory-con-video:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    background: #fff;
    box-shadow: 0 10px 40px rgba(93, 173, 236, 0.5);
}
.factory-con-video.is-playing .play-btn {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
    pointer-events: none;
}
/* 播放按钮外圈脉动 */
.factory-con-video .play-btn::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    animation: factory-video-pulse 2.2s ease-out infinite;
}
@keyframes factory-video-pulse {
    0%   { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.factory-con-video.is-playing .play-btn::after {
    animation: none;
    opacity: 0;
}

/* ========== 全屏播放按钮 ========== */
.factory-fullscreen-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.factory-con-video:hover .factory-fullscreen-btn,
.factory-con-video.is-playing .factory-fullscreen-btn,
.factory-fullscreen-btn:focus {
    opacity: 1;
    transform: translateY(0);
    outline: none;
}
.factory-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
.factory-fullscreen-btn svg {
    display: block;
    flex-shrink: 0;
}
.factory-fullscreen-btn .icon-exit {
    display: none;
}
.factory-con-video.is-fullscreen .factory-fullscreen-btn .icon-enter {
    display: none;
}
.factory-con-video.is-fullscreen .factory-fullscreen-btn .icon-exit {
    display: block;
}

/* ========== 进度条 ========== */
.factory-progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    height: 28px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
    border-radius: 0 0 16px 16px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
/* 播放中、hover、暂停时显示 */
.factory-con-video.is-playing .factory-progress-bar,
.factory-con-video:hover .factory-progress-bar,
.factory-progress-bar.is-dragging {
    opacity: 1;
    pointer-events: auto;
}
.factory-con-video:not(.is-playing):hover .factory-progress-bar {
    pointer-events: auto;
}
/* 全屏时控制栏更高方便操作 */
.factory-con-video.is-fullscreen .factory-progress-bar {
    height: 36px;
    padding: 0 12px;
    gap: 10px;
}

/* 轨道 */
.progress-track {
    position: relative;
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    cursor: pointer;
    transition: height 0.15s ease;
}
.progress-track:hover,
.factory-progress-bar.is-dragging .progress-track,
.factory-con-video.is-fullscreen .progress-track {
    height: 5px;
}
/* 缓冲层 */
.progress-buffered {
    position: absolute;
    inset: 0;
    width: 0%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    pointer-events: none;
}
/* 已播放层 */
.progress-filled {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, #2a7a9e 0%, #57b8e8 100%);
    border-radius: 2px;
    pointer-events: none;
}
/* 拖拽手柄 */
.progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}
.progress-track:hover .progress-thumb,
.factory-progress-bar.is-dragging .progress-thumb,
.factory-con-video.is-fullscreen .progress-thumb {
    opacity: 1;
    transform: scale(1);
}
.factory-con-video.is-fullscreen .progress-thumb {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
}
/* 时间显示 */
.progress-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 4px;
}
.factory-con-video.is-fullscreen .progress-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

/* ========== 控件按钮（播放/暂停、音量） ========== */
.ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ctrl-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}
.ctrl-btn:active {
    transform: scale(0.95);
}

/* 播放/暂停图标互斥：默认只显示▶，.is-playing 只显示⏸ */
.play-pause-btn .icon-pause { display: none; }
.factory-con-video.is-playing .play-pause-btn .icon-play { display: none; }
.factory-con-video.is-playing .play-pause-btn .icon-pause { display: block; }

/* 音量图标互斥：默认只显示🔊，.video-muted 只显示🔇 */
.volume-btn .icon-mute { display: none; }
.factory-con-video.video-muted .volume-btn .icon-volume { display: none; }
.factory-con-video.video-muted .volume-btn .icon-mute { display: block; }

/* 全屏时按钮放大 */
.factory-con-video.is-fullscreen .ctrl-btn {
    width: 28px;
    height: 28px;
}
.factory-con-video.is-fullscreen .ctrl-btn svg {
    width: 18px;
    height: 18px;
}

/* ========== 右侧文字区（与视频同高，JS 同步高度，内容可滚动） ========== */
.factory-text {
    min-width: 0;
    height: auto;          /* 默认自动高度，JS 在并排布局时设置明确像素值 */
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
    padding-left: 4px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-dark);
}
.factory-text p {
    margin-bottom: 18px;
    text-align: justify;
}
.factory-text p:last-child {
    margin-bottom: 0;
}
.factory-text strong {
    color: var(--tech-blue);
    font-weight: 700;
}

/* 自定义滚动条 - Webkit */
.factory-text::-webkit-scrollbar {
    width: 6px;
}
.factory-text::-webkit-scrollbar-track {
    background: #eef1f4;
    border-radius: 3px;
}
.factory-text::-webkit-scrollbar-thumb {
    background: var(--silver-blue);
    border-radius: 3px;
    transition: background 0.3s ease;
}
.factory-text::-webkit-scrollbar-thumb:hover {
    background: var(--tech-blue);
}

/* 自定义滚动条 - Firefox */
.factory-text {
    scrollbar-width: thin;
    scrollbar-color: var(--silver-blue) #eef1f4;
}

/* ========== Factory 工厂图文墙（2 行 × 4 列） ========== */
.factory-picture {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 28px;
    margin-top: 60px;
    padding: 0;
    background: transparent;
}

.factory-picture-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pearl-white, #F8F9FA);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(46, 134, 171, 0.08);
    box-shadow: 0 4px 16px rgba(11, 42, 59, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease,
                background-color 0.3s ease;
}

.factory-picture-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tech-blue, #2E86AB), var(--silver-blue, #5DADEC));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 2;
}

.factory-picture-item:hover {
    transform: translateY(-10px) rotateX(2deg);
    box-shadow: 0 20px 48px rgba(46, 134, 171, 0.2),
                0 6px 16px rgba(11, 42, 59, 0.08);
    border-color: rgba(46, 134, 171, 0.3);
    background: #ffffff;
}

.factory-picture-item:hover::before {
    transform: scaleX(1);
}

.factory-picture-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eef3f7;
}

.factory-picture-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(46, 134, 171, 0) 40%, rgba(46, 134, 171, 0.18) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.factory-picture-img-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg);
    z-index: 2;
    transition: left 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
    pointer-events: none;
}

.factory-picture-item:hover .factory-picture-img-wrap::after {
    opacity: 1;
}

.factory-picture-item:hover .factory-picture-img-wrap::before {
    left: 125%;
}

.factory-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
    filter: saturate(0.95);
}

.factory-picture-item:hover .factory-picture-img {
    transform: scale(1.12);
    filter: saturate(1.1);
}

.factory-picture-body {
    position: relative;
    padding: 20px 20px 22px;
    background: var(--pearl-white, #F8F9FA);
    text-align: center;
    transition: background-color 0.3s ease;
}

.factory-picture-item:hover .factory-picture-body {
    background: #ffffff;
}

.factory-picture-title {
    display: inline-block;
    font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Noto Sans SC', 'PingFang SC', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--text-dark, #333333);
    line-height: 1.4;
    position: relative;
    padding-bottom: 12px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.factory-picture-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tech-blue, #2E86AB), var(--silver-blue, #5DADEC));
    border-radius: 2px;
    transform: translateX(-50%);
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.factory-picture-item:hover .factory-picture-title {
    color: var(--tech-blue, #2E86AB);
    letter-spacing: 1.8px;
}

.factory-picture-item:hover .factory-picture-title::after {
    width: 48px;
}

/* ========== Factory 响应式 ========== */
@media (max-width: 1200px) {
    .factory-bird {
        grid-template-columns: 46% 1fr;
    }
    .factory-picture {
        gap: 26px 22px;
        margin-top: 52px;
    }
}
@media (max-width: 992px) {
    .factory-bird {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .factory-left-col {
        align-self: auto;
    }
    .factory-con-video {
        aspect-ratio: 16 / 9;
    }
    .factory-text {
        min-height: 0;
        overflow-y: visible;
        padding-right: 0;
        padding-left: 0;
    }
    /* 平板：4 列 → 3 列 */
    .factory-picture {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 20px;
        margin-top: 48px;
    }
}
@media (max-width: 768px) {
    .factory-bird {
        gap: 24px;
    }
    .factory-con-video {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
    .factory-con-video .content {
        padding: 16px 18px;
    }
    .factory-con-video .video-tag {
        font-size: 11px;
        padding: 4px 10px;
        margin-bottom: 6px;
    }
    .factory-con-video .title {
        font-size: 16px;
    }
    .factory-con-video .play-btn {
        width: 52px;
        height: 52px;
    }
    .factory-con-video .play-btn::before {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 15px;
    }
    /* 移动端全屏按钮 */
    .factory-fullscreen-btn {
        top: 10px;
        right: 10px;
        width: 34px;
        height: 34px;
        opacity: 1; /* 移动端常驻显示 */
    }
    .factory-fullscreen-btn svg {
        width: 16px;
        height: 16px;
    }
    .factory-text {
        font-size: 14px;
        line-height: 1.8;
    }
    .factory-text p {
        margin-bottom: 16px;
    }
    /* 手机：3 列 → 2 列 */
    .factory-picture {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 16px;
        margin-top: 40px;
    }
    .factory-picture-item {
        border-radius: 14px;
    }
    .factory-picture-img-wrap {
        aspect-ratio: 1 / 1;
    }
    .factory-picture-body {
        padding: 16px 16px 18px;
    }
    .factory-picture-title {
        font-size: 14px;
        letter-spacing: 1.2px;
    }
    .factory-picture-item:hover {
        transform: translateY(-6px);
    }
}
@media (max-width: 480px) {
    .factory-con-video .title {
        font-size: 14px;
    }
    .factory-con-video .play-btn {
        width: 44px;
        height: 44px;
    }
    .factory-con-video .play-btn::before {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 12px;
    }
    .factory-fullscreen-btn {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
    }
    .factory-fullscreen-btn svg {
        width: 14px;
        height: 14px;
    }
    .factory-text {
        font-size: 13px;
        line-height: 1.75;
    }
    /* 小屏手机：保持 2 列但更紧凑 */
    .factory-picture {
        gap: 14px 12px;
    }
    .factory-picture-item {
        border-radius: 12px;
    }
    .factory-picture-body {
        padding: 12px 12px 14px;
    }
    .factory-picture-title {
        font-size: 13px;
        letter-spacing: 1px;
    }
    .factory-picture-item:hover {
        transform: translateY(-4px);
    }
}

@media (max-width: 480px) {
    .faq-tabs {
        padding: 14px 10px;
        gap: 8px;
    }
    .faq-tab {
        font-size: 0.82rem;
        padding: 9px 12px;
        gap: 8px;
    }
    .faq-cat-icon {
        width: 26px;
        height: 26px;
    }
    .faq-cat-icon img {
        width: 26px;
        height: 26px;
    }
    .faq-panels {
        padding: 14px 12px;
    }
    .faq-item {
        padding: 12px 12px 12px 40px;
    }
    .faq-item h3 {
        font-size: 0.88rem;
    }
    .faq-item h3::before {
        left: -34px;
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .faq-item span {
        font-size: 0.78rem;
    }
    .faq-item span::before {
        width: 18px;
        height: 18px;
        font-size: 0.65rem;
        margin-right: 6px;
    }
}

/* ========== 权威认证 cert-grid 移动端自适应布局 ==========
   覆盖前面所有 cert-grid 媒体查询定义（同级选择器，后定义优先）。
   PC: 3列 | 平板(992): 3列 | 手机(768): 2列 | 小屏(480): 2列
   6张证书卡片在移动端保持 2 列，避免单列过长。
=================================================================== */
@media (max-width: 992px) {
    .cert-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}
@media (max-width: 768px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .cert-item {
        padding: 1.5rem 1rem;
    }
    .cert-item img {
        width: 80px;
        height: 80px;
    }
    .cert-item span {
        font-size: 0.88rem;
    }
}
@media (max-width: 480px) {
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .cert-item {
        padding: 1.25rem 0.75rem;
    }
    .cert-item img {
        width: 64px;
        height: 64px;
    }
    .cert-item span {
        font-size: 0.82rem;
    }
}

/* ========== Case Show 跑马灯 ========== */
.case-marquee {
    position: relative;
    overflow: hidden;
    /* 背景与 section 保持一致（白底），用于虚化层的渐变色匹配 */
    background: transparent;
    padding: 24px 0;
    isolation: isolate;
    /* 新增：最大宽度 + 居中 */
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* 两端虚化遮罩 */
.case-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.case-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.case-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* 轨道：flex + width:max-content 让两张图自然撑开成 2 倍宽 */
.case-marquee__track {
    display: flex;
    width: max-content;
    align-items: center;
    animation: case-marquee-scroll 60s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* 图片：不收缩、保持原始尺寸 */
.case-marquee__img {
    display: block;
    flex-shrink: 0;
    height: auto;
    /* 与原模板一致，单张图限高 360px，防止 PC 端过高 */
    max-height: 360px;
    width: auto;
}

/* 悬停暂停 */
.case-marquee:hover .case-marquee__track {
    animation-play-state: paused;
}

/* 从右向左无缝循环：0 → -50% 正好是一份内容的宽度 */
@keyframes case-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Safari < 14.1 的 max-content 回退：用足够大的宽度兜底 */
@supports not (width: max-content) {
    .case-marquee__track { width: 9999px; }
}

/* 移动端响应式 */
@media (max-width: 992px) {
    .case-marquee { padding: 20px 0; }
    .case-marquee__img { max-height: 280px; }
    .case-marquee__fade { width: 50px; }
    .case-marquee__track { animation-duration: 50s; }
}
@media (max-width: 768px) {
    .case-marquee { padding: 16px 0; }
    .case-marquee__img { max-height: 220px; }
    .case-marquee__fade { width: 40px; }
    .case-marquee__track { animation-duration: 45s; }
}
@media (max-width: 480px) {
    .case-marquee { padding: 12px 0; }
    .case-marquee__img { max-height: 160px; }
    .case-marquee__fade { width: 30px; }
    .case-marquee__track { animation-duration: 40s; }
}