:root {
    --bg: #F4F7F5;
    --dark: #2D3436;
    --accent: #00B894;
    --border: rgba(45, 52, 54, 0.1);
    --font-px: 16px; 
}
.wrapper{width: 100%;}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); background-image: 
        radial-gradient(at 0% 0%, rgba(0, 184, 148, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(45, 52, 54, 0.03) 0px, transparent 50%);
    background-attachment: fixed; /* 滚动时背景光团不动 */
    color: var(--dark);
    font-family: 'Noto Sans SC', sans-serif;
    display: flex;
    font-size: var(--font-px); }



/* 侧边导航 */
.side-nav {
    width: 280px; height: 100vh; position: fixed; background: var(--bg);
    border-right: 1px solid var(--border); padding: 50px 40px;
    display: flex; flex-direction: column; justify-content: space-between; z-index: 100;
}
.logo { font-family: 'Syne'; font-size: 20px; font-weight: 800; }
.logo span { color: var(--accent); }
.nav-links a { display: block; text-decoration: none; color: var(--dark); margin: 15px 0; font-size: 14px; opacity: 0.4; transition: 0.3s; }
.nav-links a.active, .nav-links a:hover { opacity: 1; color: var(--accent); transform: translateX(8px); }

/* 主体内容 */
main { margin-left: 280px; width: calc(100% - 280px); padding: 0 80px; }
section { padding: 120px 0;  border-bottom: 1px solid var(--border); }
.section-tag { font-family: 'JetBrains Mono'; font-size: 12px; color: var(--accent); margin-bottom: 40px; }

/* 个人介绍容器 */
.intro-container {
    display: flex;
    gap: 80px;
    margin-top: 40px;
    align-items: flex-start;
}

.intro-text-flow {
    flex: 1.6; /* 文字占据更多宽度 */
}

/* 标题样式 */
.intro-title {
    font-family: 'Syne';
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 40px;
    line-height: 1.1;
}

.intro-title small {
    display: block;
    font-size: 20px;
    color: var(--accent);
    margin-top: 10px;
    font-family: 'Noto Sans SC';
    letter-spacing: 2px;
}

.intro-lead {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

/* 段落小标题与正文 */
.intro-section {
    margin-bottom: 45px;
}

.intro-section h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.intro-section h3::before {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent);
}

.intro-section p {
    font-size: 16px;
    line-height: 2;
    opacity: 0.85;
    text-align: justify;
}

.intro-section strong {
    color: var(--dark);
    font-family: 'JetBrains Mono';
    font-size: 18px;
    padding: 0 4px;
}

/* 右侧粘性图片 */
.intro-image-aside {
    flex: 1;
    position: sticky;
    top: 100px;
}

.intro-img-frame {
    position: relative;
    border: 1px solid var(--border);
    padding: 15px;
    background: white;
}

.intro-img-frame img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(10%); /* 保持一点色彩，但偏向冷色调 */
}

.frame-tag {
    position: absolute;
    top: 30px;
    right: -15px;
    background: var(--dark);
    color: var(--accent);
    padding: 8px 15px;
    font-family: 'JetBrains Mono';
    font-weight: 700;
    font-size: 12px;
    transform: rotate(90deg);
    transform-origin: right top;
}

/* About 模块专项设计 */
/* --- 关于我们模块：画册化升级 --- */

/* 1. 简介部分：增强视觉层级 */
.about-header-layout {
    display: grid;
    /* 使用 1.6fr : 1fr 的比例，文字占大头 */
    grid-template-columns: 1.6fr 1fr;
    gap: 80px;
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 60px; /* 增加留白，更显大气 */
    position: relative;
}

/* 左侧文字样式 (大部分延续之前的逻辑，增强层级) */
.about-header-text .corp-name-big {
    font-size: 42px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--dark);
}

.about-header-text .corp-meta {
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
}

.about-header-text .corp-meta .tag {
    font-family: 'JetBrains Mono';
    font-size: 11px;
    padding: 4px 12px;
    border: 1px solid var(--accent); /* 绿框 */
    color: var(--accent); /* 绿字 */
    font-weight: 500;
}



.about-header-text .corp-intro-content p {
    line-height: 2; /* 增大行高，长文案不累眼睛 */
    margin-bottom: 20px;
    color: var(--dark);
    opacity: 0.8;
    font-size: 16px;
    text-align: justify; /* 两端对齐 */
}

.about-header-text .highlight-text {
    font-size: 18px;
    color: var(--dark);
    font-weight: 600;
    opacity: 1 !important;
    margin-bottom: 25px !important;
}

/* --- 右侧图片装饰区域核心样式 --- */
.about-header-visual {
    position: relative;
    width: 100%;
    /* 严格限制可视高度，确保不把页面撑太长 */
    height: 380px; 
}

.about-visual-frame {
    position: relative;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px; /* 营造精致的白边相框效果 */
    border: 1px solid var(--border);
    overflow: hidden;
    z-index: 2; /* 图片压在装饰框上面 */
   
}

.about-visual-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 填满不拉伸 */
   
    transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.about-header-visual:hover img {
    filter: grayscale(0%); /* 悬停变彩色 */
    transform: scale(1.05); /* 轻微放大 */
}

/* 图片内部的装饰性标签 */
.visual-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--dark);
    color: var(--accent);
    padding: 8px 15px;
    font-family: 'JetBrains Mono';
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 3;
}



/* 移动端适配 (可选，确保手机上不错乱) */
@media (max-width: 1024px) {
    .about-header-layout {
        grid-template-columns: 1fr; /* 变单列 */
        gap: 50px;
    }
    .about-header-visual {
        height: 300px; /* 减小高度 */
    }
    .about-intro-content {
        padding-left: 20px;
    }
}



/* 2. 环境长廊：横向滚动条优化 */

.gallery-title-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
.gallery-title-row h3 { font-size: 14px; letter-spacing: 2px; }
.gallery-title-row h3 span { opacity: 0.3; font-family: 'Syne'; }

/* 容器必须限制宽度，防止撑开页面产生长滚动条 */
.env-swiper {
    width: 100%;
    padding: 10px 0 40px; /* 留出阴影和悬停空间 */
    cursor: grab;
}

.env-swiper:active {
    cursor: grabbing;
}

/* 强制 Slide 宽度 */
.env-card {
    width: 460px !important; /* 对应你之前的尺寸 */
    height: 320px !important;
    overflow: hidden;
    /* 确保 Swiper 下不再使用 flex: 0 0，Swiper 会自动计算 */
}

.env-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease !important;
    pointer-events: none; /* 防止拖拽时触发系统图片拖动 */
}

.env-card:hover img {
    transform: scale(1.1);
}

/* 自定义控制按钮状态 */
.scroll-btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 滚动按钮样式 */
/* =========================================
   纯 CSS 线性控制按钮（修复变形版）
   ========================================= */

/* 1. 按钮容器 */
.scroll-controls {
    display: flex;
    gap: 15px;
}

.scroll-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    outline: none;
    position: relative;
    padding: 0;
}

/* 按钮悬停：背景加深 */
.scroll-btn:hover {
    background: var(--dark);
    border-color: var(--dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08);
}

/* 2. 箭头主干 */
.custom-arrow {
    display: block;
    width: 20px;
    height: 1px;
    background: var(--dark); /* 默认深色 */
    position: relative;
    transition: all 0.3s ease;
}

/* 3. 箭头锐角 (头部) */
.custom-arrow::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 1px solid var(--dark);
    border-right: 1px solid var(--dark);
    top: 50%;
    right: 0;
    /* 核心：初始向右旋转 45 度 */
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s ease;
    transform-origin: center; /* 确保旋转中心在中间 */
}

/* 4. 左箭头特殊方向处理 */
.arr-prev {
    transform: translateX(1px); /* 初始微调位置 */
}

.arr-prev::after {
    right: auto;
    left: 0;
    /* 核心：左箭头必须保持在 -135 度 */
    transform: translateY(-50%) rotate(-135deg);
}

/* 5. 悬停交互 (Hover State) */

/* 悬停时：颜色同步变白 */
.scroll-btn:hover .custom-arrow {
    background: #fff;
}

.scroll-btn:hover .custom-arrow::after {
    border-color: #fff;
}

/* 悬停时：平滑位移，但强制保留旋转角度防止变菱形 */
.scroll-btn.next:hover .arr-next {
    transform: translateX(4px);
}

.scroll-btn.next:hover .arr-next::after {
    /* 再次声明旋转，防止被 transform 覆盖 */
    transform: translateY(-50%) rotate(45deg);
}

.scroll-btn.prev:hover .arr-prev {
    transform: translateX(-4px);
}

.scroll-btn.prev:hover .arr-prev::after {
    /* 再次声明旋转，防止被 transform 覆盖 */
    transform: translateY(-50%) rotate(-135deg);
}

/* 6. 点击反馈 */
.scroll-btn:active {
    transform: translateY(0) scale(0.92);
}

/* 3. 证书展示：卡片化 */
.about-cert-section{margin-top: 30px;}
.about-cert-section h3 ,.about-faq-section h3{ font-size: 14px; letter-spacing: 2px; margin-bottom: 30px; }
.about-cert-section h3 span,.about-faq-section h3 span { opacity: 0.3; font-family: 'Syne'; }

.cert-modern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.cert-box { transition: 0.4s; }
.cert-img-wrapper { 
    background: #fff; padding: 20px; border: 1px solid var(--border);
    height: 260px; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}


.cert-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain;cursor: zoom-in; }
.cert-info { margin-top: 15px; font-size: 13px; font-weight: 700; text-align: center; opacity: 0.6; }

/* 视频区域 */
.video-wrapper {
    position: relative;
    cursor: pointer;
}

.video-cover {
    /* height: 300px; */
    /* background: #000; */
    overflow: hidden;
    /* clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); */
    position: relative;
}

.video-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: 0.5s;
}

.video-wrapper:hover .video-cover img {
    opacity: 0.8;
    transform: scale(1.05);
}

.play-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    box-shadow: 0 10px 30px rgba(0,184,148,0.3);
    transition: 0.4s;
}

.video-wrapper:hover .play-btn-circle {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-caption {
    font-family: 'Syne';
    font-size: 12px;
    letter-spacing: 4px;
    text-align: right;
    margin-top: 15px;
    opacity: 0.4;
}
/* 视频封面包装 */
.video-wrapper {
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.video-cover {
    position: relative;
    width: 100%;
    height: 100%; /* 你可以根据需求调整高度 */
    /* background: #000; */
    overflow: hidden;
    /* border: 1px solid var(--border); */
    margin: 0 auto;
}

.video-cover video {
    width: 100%;
    height: 615px;
    object-fit: cover; /* 关键：确保视频填满容器不留黑边 */
    /* opacity: 0.6; */ /* 初始稍微暗一点，突出播放按钮 */
    transition: 0.3s;
}

.video-wrapper:hover video {
    opacity: 0.8;
   
}

/* 播放按钮居中 */
.play-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    z-index: 2;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.play-btn-circle span{content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
    margin-left: 5px;}
.video-wrapper:hover .play-btn-circle {
    transform: translate(-50%, -50%) scale(1.1);
}

.video-caption {
    font-family: 'JetBrains Mono';
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 15px;
    opacity: 0.5;
    text-align: center;
}

/* 视频弹窗容器样式 */
.video-container {
    width: 80%;
    max-width: 1000px;
    background: #000;
    line-height: 0;
    text-align: center;
}

#mainVideo {
    width: 480px;
    height: auto;
    outline: none;
}
/* 资质证书区域 */
.about-assets-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    border-top: 1px solid var(--border);
    padding-top: 60px;
}

.asset-desc h3 {
    font-size: 24px;
    margin-bottom: 20px;
}

.asset-desc p {
    font-size: 14px;
    opacity: 0.6;
    line-height: 1.6;
}

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

.cert-card {
    background: white;
    padding: 15px;
    border: 1px solid var(--border);
    transition: 0.4s;
}

.cert-img {
    height: 200px;
    background: #f9f9f9;
    margin-bottom: 15px;
    overflow: hidden;
}

.cert-img img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 证书通常需要完整显示 */
    filter: grayscale(0.3);
    transition: 0.4s;    cursor: zoom-in;
}

.cert-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent);
}

.cert-card:hover .cert-img img {
    filter: grayscale(0);
}

.cert-info {
    font-size: 13px;
    text-align: center;
    font-weight: 700;
    opacity: 0.7;
}

/* 移动端适配 */
@media (max-width: 1024px) {
    .about-main-row, .about-assets-row {
        grid-template-columns: 1fr;
    }
    .video-wrapper {
        order: -1; /* 移动端视频排在文字前面 */
    }
    .certificate-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}
/* --- 垂直极简 FAQ 优化版 --- */
.about-faq-section {
    margin-top: 90px;
}

/* 标题样式：严格同步环境展示和资质荣誉 */
.about-faq-section h3 {
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 50px;
    font-weight: 700;
}

.about-faq-section h3 span {
    opacity: 0.3;
    font-family: 'Syne', sans-serif;
    font-weight: 400;
}

.faq-vertical-list {
    border-top: 1px solid var(--dark); /* 顶部加深线，界定模块开始 */
}

.faq-group {
    padding: 60px 0;
    border-bottom: 1px solid var(--border); /* 极细分割线 */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.faq-group:nth-last-child(1){border-bottom: none;padding-bottom: 0px;}
/* Q 行排版 */
.faq-q-line {
    display: flex;
    align-items: baseline;
    margin-bottom: 25px;
}

.q-tag {
    font-family: 'JetBrains Mono';
    font-size: 13px;
    font-weight: 800;
    color: var(--accent); /* 使用品牌绿 #00b894 */
    margin-right: 25px;
    min-width: 40px;
}

.faq-q-line strong {
    font-size: 24px;
    color: var(--dark);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

/* A 内容排版 */
.faq-a-content {
    padding-left: 65px; /* 建立稳定的垂直对齐线 */
    /* max-width: 900px; */
}

.faq-a-content p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--dark);
    opacity: 0.8;
    text-align: justify;
}

/* 内部详情列表 */
.faq-detail-list {
    margin-top: 20px;
}

.faq-detail-list p {
    font-size: 16px;
    margin-bottom: 12px;
    opacity: 0.75;
}

/* 悬停微互动 */
.faq-group:hover {
    background: rgba(0, 184, 148, 0.01);
   
}

.faq-group:hover .faq-q-line strong {
    color: var(--accent); /* 悬停时问题变色 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .faq-q-line {
        flex-direction: column;
        gap: 10px;
    }
    .faq-a-content {
        padding-left: 0;
    }
    .faq-q-line strong {
        font-size: 20px;
    }
    .faq-group {
        padding: 40px 0;
    }
}

/* 手机端适配 */
@media (max-width: 768px) {
    .faq-q-line {
        flex-direction: column;
        gap: 8px;
    }
    .faq-a-content {
        padding-left: 0;
    }
    .faq-q-line strong {
        font-size: 20px;
    }
}
/* Service 模块专项 */
.service-main-title { font-size: 38px; font-weight: 800; margin-bottom: 50px; text-align: center; }

.service-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.plan-card {
    background: white;
    padding: 40px;
    border: 1px solid var(--border);
    position: relative;
    transition: 0.4s;
}

.plan-card.featured {
    border: 2px solid var(--accent);
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 20px 40px rgba(0,184,148,0.1);
}

.plan-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    font-size: 10px;
    padding: 5px 15px;
    font-weight: 800;
}

.plan-header h3 { font-size: 24px; margin-bottom: 10px; }
.plan-header p { opacity: 0.5; font-size: 14px; margin-bottom: 30px; }

.plan-features-preview { list-style: none; margin-bottom: 40px; }
.plan-features-preview li {
    font-size: 14px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.plan-features-preview li .iconify { color: var(--accent); }

.detail-btn {
    width: 100%;
    padding: 15px;
    background: transparent;
    border: 1px solid var(--dark);
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.detail-btn:hover { background: var(--dark); color: white; }

/* 联系雷锋姐大按钮 */
.service-action { text-align: center; margin-top: 40px; }
.contact-trigger-btn {
    background: var(--dark);
    color: white;
    padding: 25px 60px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: 0.4s;
}
.contact-trigger-btn:hover { background: var(--accent); transform: translateY(-5px); }

/* 服务卡片 - 恢复您喜欢的展示样式 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.s-card {
    background: white;
    border: 1px solid var(--border);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 420px;
    transition: 0.3s;
}

.s-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.s-header .iconify {
    font-size: 40px;
    color: var(--accent);
    margin-bottom: 20px;
}

.s-card h3 {
    font-family: 'Syne';
    font-size: 24px;
    border-bottom: 2px solid var(--dark);
    padding-bottom: 15px;
    margin-bottom: 25px;
}

.s-preview {
    margin-bottom: 30px;
}

.s-preview p {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 12px;
}

.detail-btn {
    background: var(--dark);
    color: white;
    border: none;
    padding: 15px 0;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;transition: all ease 0.5s;
}
.detail-btn:hover{ background: var(--accent);}
/* 弹窗核心 - 修正层级与居中 */
.product-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.p-modal-content {
    background: white;
    width: 800px;
    max-width: 90%;
    padding: 30px;
    position: relative;
}

.modal-h4 {
    font-size: 26px;
    font-family: 'Syne';
    margin-bottom: 10px;
    text-align: center;
}
.detail-grid-wrapper{text-align: center;}
.detail-grid-wrapper img{max-width: 80%;}
.detail-grid-wrapper ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    list-style: none;
}

.detail-grid-wrapper li {
    background: #f8f9fa;
    padding: 15px;
    font-size: 14px;
    border-left: 3px solid var(--accent);
}

.inner-call-trigger {
    background: var(--dark);
    color: white;
    border: none;
    padding: 18px 40px;
    font-weight: 700;
    cursor: pointer;
}
.close-p {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            cursor: pointer;
            color: var(--dark);
            line-height: 1;
        }
/* 团队风采视频 */
  /* 右侧视频区域 */
        .about-video {
            flex: 1;
            min-width: 300px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            height: 300px;
        }

        /* 视频元素 */
        #about-video {
            width: 100%;
            object-fit: cover;
            display: block;
            height: 100%;
        }

        /* 播放按钮（覆盖在视频封面之上） */
        .play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background-color: var(--accent);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }

        .play-btn:hover {
            background-color: var(--accent);
            transform: translate(-50%, -50%) scale(1.1);
        }

        .play-btn::after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent #fff;
            margin-left: 5px;
        }

        /* 响应式适配 */
        @media (max-width: 768px) {
           
            #about-video {
                /* height: 300px; */
                max-width: 100%;
            }

            .play-btn {
                width: 60px;
                height: 60px;
            }

            .play-btn::after {
                border-width: 12px 0 12px 20px;
            }
        }

/* 联系方式样式 */
.contact-card-modal { text-align: center; }
.p-phone { font-size: 32px; font-weight: 800; color: var(--accent); margin: 20px 0; font-family: 'JetBrains Mono'; }
.qr-placeholder-modal {margin: 20px auto;display: flex;align-items: center;justify-content: center;color: #999;}
/* 资料模块容器 */
.resource-flex-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 强制一行五个 */
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 40px;
}

.res-item {
    padding: 80px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
    transition: 0.3s;
}
.res-item img{width:60px;margin-bottom:20px;}
/* 最后一个去掉边框 */
.res-item:last-child {
    border-right: none;
}

.res-item:hover {
    background: #fff;
}

.res-icon {
    font-size: 24px;
    color: var(--accent);
    margin-bottom: 20px;
}

.res-item h3 {
    font-size: 18px;
    font-family: 'Syne';
    margin-bottom: 10px;
}

.res-item p {
    font-size: 12px;
    opacity: 0.5;
    margin-bottom: 25px;
    height: 36px; /* 统一高度防止错位 */
}

/* 极简按钮：透明背景，仅有线条或悬停变色 */
.res-minimal-btn {
    background: transparent;
    border: 1px solid var(--dark);
    color: var(--dark);
    padding: 8px 20px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'JetBrains Mono';
    cursor: pointer;
    transition: 0.3s;
}
.find-goods-section .contactBtn {
    width: 300px;
    margin: 30px auto 0;
    display: block;
    padding: 10px 0;
    font-size: 15px;
}
.res-minimal-btn:hover {
    background: var(--dark);
    color: white;
}
/* 成功案例 - 深度优化排版 */
.cases-container {
    display: flex;
    gap: 80px; /* 增加间距增加高级感 */
    margin-top: 40px;
    align-items: flex-start;
}

.cases-text { 
    flex: 2; /* 给文字更多空间 */
}

.case-content-full p {
    font-size: 16px;
    line-height: 2; /* 增大行高，长文案不累眼睛 */
    margin-bottom: 20px;
    color: var(--dark);
    opacity: 0.85;
    text-align: justify;
}

.case-intro {
    font-size: 18px !important;
    font-weight: 700;
    opacity: 1 !important;
    color: var(--dark);
}

.case-slogan {
    font-family: 'Syne';
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.case-thanks {
    font-weight: 700;
    color: var(--dark);
}

.case-quote-box {
    background: #fff;
    padding: 30px;
    border-left: 4px solid var(--accent);
    font-size: 14px;
    line-height: 1.8;
    margin-top: 20px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.02);
}

/* 右侧单图样式 */
.cases-gallery-single {
    flex: 1;
    position: sticky;
    top: 100px; /* 滚动时图片可以稍微吸顶，方便阅读 */
}

.thank-img-big-wrapper {
    position: relative;
    border: 1px solid var(--border);
    background: #fff;
    padding: 10px; /* 相框效果 */
    cursor: pointer;
    transition: 0.3s;
}

.thank-img-big-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.thank-img-big-wrapper:hover {
    border-color: var(--accent);
}

.zoom-hint {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: var(--dark);
    color: white;
    padding: 8px 15px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 图片放大灯箱 - 深度优化版 */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95); /* 加深背景，彻底隔绝文字干扰 */
    backdrop-filter: blur(15px);
    z-index: 200000;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox-content {
    display: block;
    max-width: 85%;
    max-height: 85vh;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    
    /* 初始状态：缩小且透明 */
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* 优雅的缓动曲线 */
    cursor: default;
}

/* 当激活显示时，图片放大并显现 */
.lightbox-overlay.active .lightbox-content {
    transform: scale(1);
    opacity: 1;
}

.close-lightbox {
    position: absolute;
    top: 40px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    cursor: pointer;
    line-height: 1;
    z-index: 200001;
    opacity: 0.5;
    transition: 0.3s;
}

.close-lightbox:hover {
    opacity: 1;
    color: var(--accent);
}

/* =========================================
   最新找货模块
   ========================================= */
.find-goods-section {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid var(--border);
}

.inner-tag {
    font-family: 'JetBrains Mono';
    font-size: 12px;
    color: var(--accent);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.goods-list {
    width: 100%;
}

/* 找货行基础样式 */
.goods-row {
    display: grid;
    /* 比例：品名3 : CAS 2 : 电话 2 : 按钮 1 */
    grid-template-columns: 3fr 2fr 2fr 1.5fr;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    transition: all 0.3s ease;
}

.goods-row:hover {
    background: rgba(0, 184, 148, 0.03); /* 极淡的绿色背景反馈 */
}

/* 文字细节 */
.g-name {
    font-weight: 700;
    color: var(--dark);
    font-size: 16px;
}

.g-cas {
    font-family: 'JetBrains Mono';
    font-size: 14px;
    opacity: 0.6;
}

.g-tel {
    font-family: 'JetBrains Mono';
    font-size: 14px;
    font-weight: 500;
}

/* 立即联系按钮 */
.contact-btn {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.contact-btn:hover {
    background: var(--accent);
    color: #fff;
}

/* =========================================
   自适应处理 (Mobile)
   ========================================= */
@media (max-width: 768px) {
    .goods-row {
        grid-template-columns: 1fr 1fr; /* 手机端变成两列 */
        gap: 10px;
        padding: 20px;
        border: 1px solid var(--border);
        margin-bottom: 15px;
        border-radius: 4px;
    }

    .g-name {
        grid-column: span 2; /* 品名占满整行 */
        font-size: 18px;
        margin-bottom: 5px;
    }

    .g-cas, .g-tel {
        font-size: 13px;
    }

    .g-action {
        grid-column: span 2; /* 按钮占满整行 */
        margin-top: 10px;
    }
}
/* 风采展示 */
.gal-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-top: 40px;}
.gal-img { height: 300px; background: #eee; overflow: hidden; }
.gal-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gal-img.tall { grid-row: span 2; height: 615px; }
.gal-img.wide { grid-column: span 2; background: var(--dark); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: 'Syne'; }

/* 联系方式 */
.contact-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;margin-top: 40px;}
.c-row { margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
.c-row label { font-size: 12px; opacity: 0.5; font-weight: 700; }
.c-row p { font-size: 20px; font-family: 'JetBrains Mono'; margin-top: 5px; }
.c-qr { border: 1px solid var(--border); padding: 40px; text-align: center; }
.qr-placeholder { background: #eee; height: 180px; width: 180px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
.qr-placeholder img {
    width: 130px;
}
/* 表单 */
.form-wrapper {background: var(--dark);padding: 60px;margin-top: 40px;}
input, textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding: 15px 0; color: white; margin-bottom: 30px; outline: none; }
.form-wrapper button { background: var(--accent); color: white; border: none; padding: 20px 50px; cursor: pointer; font-weight: 700; transition: 0.3s; }
.form-wrapper button:hover { background: var(--accent); color: #fff; }
.f-group{position:relative;}
.f-group img{position: absolute;
    right: 30px;}
@media (max-width:1400px) {
    .env-card {
    flex: 0 0 360px; 
}
}
@media (max-width: 1200px) {
    body { flex-direction: column; }
    .side-nav { width: 100%; height: auto; position: sticky; padding: 20px; flex-direction: row; }
    .nav-links, .nav-footer { display: none; }
    main { margin-left: 0; width: 100%; padding: 0 30px; }
    .hero-layout, .about-grid, .contact-grid { grid-template-columns: 1fr; }
}
/* ============================================================
   移动端响应式适配 (Mobile Responsive)
   ============================================================ */

@media (max-width: 1024px) {
    /* 1. 基础布局调整 */
    body {
        flex-direction: column;
    }

    /* 侧边栏转为顶部导航 */
    .side-nav {
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        padding: 15px 25px;
        flex-direction: row;
        align-items: center;
        background: rgba(244, 247, 245, 0.9);
        backdrop-filter: blur(10px);
        border-right: none;
        border-bottom: 1px solid var(--border);
        justify-content: space-between;
    }

    .nav-links, .nav-footer {
        display: none; /* 默认隐藏菜单 */
    }

    /* 主内容区域回归 */
    main {
        margin-left: 0;
        width: 100%;
        padding: 0 20px;
    }

    section {
        padding: 80px 0 40px; /* 减少内边距 */
        min-height: auto;
    }

    /* 2. 个人介绍 (Home) 适配 */
    .intro-container {
        flex-direction: column;
        gap: 40px;
    }

    .intro-title {
        font-size: 36px;
    }

    .intro-image-aside {
        position: relative;
        top: 0;
        width: 100%;
    }

    /* 3. 关于我们 (About) 视频适配 */
    .about-main-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .video-cover, .video-cover video {
        width: 100% !important;
        height: auto !important;
    }

    .corp-name {
        font-size: 28px;
    }

    /* 4. 会员服务 (Services) 适配 */
    .service-grid {
        grid-template-columns: 1fr; /* 三列变一列 */
        gap: 20px;
    }

    .s-card {
        min-height: auto;
        padding: 30px;
    }

    /* 5. 资料下载 (Resources) 适配 */
    .resource-flex-container {
        grid-template-columns: repeat(2, 1fr); /* 一行五个变一行两个 */
    }

    .res-item {
        padding: 40px 15px;
        border-bottom: 1px solid var(--border);
    }

    .res-item:nth-child(even) {
        border-right: none;
    }

    /* 6. 成功案例 (Cases) 适配 */
    .cases-container {
        flex-direction: column;
    }

    .cases-gallery-single {
        position: relative;
        top: 0;
        margin-top: 30px;
    }

    /* 7. 风采展示 (Gallery) 适配 */
    .gal-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .gal-img.tall {
        grid-row: span 1;
       height: auto;
    }

    /* 8. 联系我们 (Contact) 适配 */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .c-row p {
        font-size: 16px;
    }

    .c-qr {
        padding: 20px;
    }

    /* 9. 弹窗 (Modal) 适配 */
    .p-modal-content {
        padding: 40px 15px 20px;
    }

    

    /* 视频预览弹窗在手机上的尺寸 */
    #mainVideo {
        width: 100% !important;
    }
}

/* 针对超小屏幕手机 */
@media (max-width: 480px) {
    .resource-flex-container {
        grid-template-columns: 1fr; /* 资料获取变成一列 */
    }
    .res-item {
        border-right: none;
    }
    .cert-modern-grid{ grid-template-columns: 1fr; }
     .form-wrapper{padding: 30px;}
}