/* ================================================================
   【页面】招商合作页（B2B 商务基调：深墨绿 + 生态绿 + 细金线点缀）
   【模块】1. 招商主视觉
   【用途】深墨绿渐变hero区域，含眉题、大标题、描述文字、CTA按钮和右下角品牌字标
   【关键属性】linear-gradient背景、flex布局、品牌字标装饰
   【交互】按钮hover上浮+阴影加深，ghost按钮hover变白底绿字
   ================================================================ */
.zs-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0 130px;
    background: linear-gradient(118deg, #0a2f22 0%, #0d3f2c 52%, #16563a 100%);
    color: #fff;
}
/* 有导航Banner图时：整图铺底 + 左侧深色商务蒙版 */
.zs-hero--img {
    background-color: #0a2f22;
    background-size: cover;
    background-position: center;
}
.zs-hero--img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(5, 22, 16, .9) 0%, rgba(5, 22, 16, .72) 42%, rgba(5, 22, 16, .25) 100%);
}
.zs-hero .nl-container { position: relative; z-index: 2; }
.zs-hero__inner { max-width: 780px; }

/* 眉题：小短线 + INVEST·COOPERATE */
.zs-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, .72);
    margin-bottom: 30px;
}
.zs-hero__eyebrow span {
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, #d9a441, rgba(217, 164, 65, 0));
}
.zs-hero__title {
    margin: 0 0 26px;
    font-size: 62px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: 2px;
    color: #fff;
}
.zs-hero__desc {
    margin: 0 0 40px;
    font-size: 16px;
    line-height: 2.1;
    color: rgba(255, 255, 255, .84);
    max-width: 640px;
}
.zs-hero__ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* 通用按钮 */
.zs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 38px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all .3s ease;
    text-decoration: none;
}
.zs-btn svg { width: 20px; height: 20px; }
.zs-btn--solid {
    background: linear-gradient(135deg, #2f9e6e, #0f7256);
    color: #fff;
    box-shadow: 0 14px 30px -8px rgba(15, 114, 86, .5);
}
.zs-btn--solid:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 20px 40px -10px rgba(15, 114, 86, .6); }
.zs-btn--ghost {
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(4px);
}
.zs-btn--ghost:hover { background: #fff; color: #0d3f2c; border-color: #fff; transform: translateY(-3px); }
.zs-btn--lg { padding: 17px 52px; font-size: 17px; }

/* 右下角品牌字标（装饰） */
.zs-hero__mark {
    position: absolute;
    right: 6%;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}
.zs-hero__mark b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, .08);
    letter-spacing: 4px;
}
.zs-hero__mark-note {
    font-size: 12px;
    letter-spacing: 6px;
    color: rgba(255, 255, 255, .5);
}
.zs-hero__mark-line {
    width: 130px;
    height: 1px;
    background: linear-gradient(90deg, rgba(217, 164, 65, 0), #d9a441);
    margin-bottom: 6px;
}

/* ================================================================
   【页面】招商合作页
   【模块】2. 数据背书条
   【用途】四列网格展示核心数据（养殖基地面积/泉眼数量/品类/产业链），金色强调数字单位
   【关键属性】grid-template-columns: repeat(4, 1fr); 深绿色背景; 金色强调色
   ================================================================ */
.zs-stats {
    position: relative;
    background: #0c3827;
    padding: 0;
}
.zs-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.zs-stats__cell {
    position: relative;
    padding: 34px 30px;
    text-align: center;
    color: #fff;
}
.zs-stats__cell + .zs-stats__cell { border-left: 1px solid rgba(255, 255, 255, .1); }
.zs-stats__cell b {
    display: block;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.zs-stats__cell b em {
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: #d9a441;
    margin-left: 2px;
}
/* 第四格「全产业链」为词组非数字：44px 主数字号过大 → 收为小号金色强调
   （与前三格 em 单位 20px 金色同层级；栋生 2026-09-08） */
.zs-stats__cell b.zs-stats__word {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #d9a441;
}
.zs-stats__cell span { font-size: 14px; letter-spacing: 2px; color: rgba(255, 255, 255, .72); }

/* ================================================================
   【页面】招商合作页
   【模块】3. 合作模式
   【用途】四列网格展示四种合作模式卡片（区域经销/餐饮直供/大宗定制/文旅联动），含编号、描述和列表
   【关键属性】grid-template-columns: repeat(4, 1fr); 顶部渐变绿条装饰; hover上浮
   【交互】hover卡片上浮+边框变色+阴影加深，顶部绿条从左侧展开，编号数字变绿，了解更多箭头右移
   ================================================================ */
.zs-mode {
    background: #fff;
    padding: 90px 0;
}
.zs-mode__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.zs-mode__card {
    position: relative;
    background: #f8faf9;
    border: 1px solid #eef1ef;
    border-radius: 16px;
    padding: 30px 26px 26px;
    transition: all .35s ease;
    overflow: hidden;
}
.zs-mode__card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #0f7256, #2f9e6e);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}
.zs-mode__card:hover {
    transform: translateY(-6px);
    border-color: #d9e8df;
    box-shadow: 0 24px 48px -18px rgba(15, 114, 86, .24);
}
.zs-mode__card:hover::before { transform: scaleX(1); }
.zs-mode__no {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    font-weight: 700;
    color: rgba(15, 114, 86, .18);
    line-height: 1;
    display: block;
    margin-bottom: 16px;
    transition: color .35s ease;
}
.zs-mode__card:hover .zs-mode__no { color: #0f7256; }
.zs-mode__card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #14352a;
    margin: 0 0 12px;
}
.zs-mode__card > p {
    font-size: 14px;
    color: #5f7268;
    line-height: 1.9;
    margin: 0 0 16px;
}
.zs-mode__card ul {
    list-style: none;
    margin: 0 0 20px;
    padding: 14px 0 0;
    border-top: 1px dashed #dfe7e2;
}
.zs-mode__card li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    color: #4c6257;
    line-height: 2.2;
}
.zs-mode__card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f9e6e;
}
.zs-mode__card a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0f7256;
    text-decoration: none;
    transition: gap .3s ease;
}
.zs-mode__card a::after { content: "→"; font-size: 16px; }
.zs-mode__card a:hover { gap: 10px; color: #083d2b; }

/* ================================================================
   【页面】招商合作页
   【模块】4. 合作优势（为什么选择那拉泉）
   【用途】三列网格展示合作优势，每项包含SVG图标、标题和说明文字，标题下绿色短横线装饰
   【关键属性】grid-template-columns: repeat(3, 1fr); 白色卡片; 圆角图标背景
   【交互】hover卡片上浮+边框变绿+阴影加深
   ================================================================ */
.zs-why {
    background: #f4f7f5;
    padding: 90px 0;
}
.zs-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.zs-why__item {
    background: #fff;
    border-radius: 16px;
    padding: 30px 28px 28px;
    transition: all .35s ease;
    box-shadow: 0 4px 18px rgba(14, 59, 40, .05);
    border: 1px solid transparent;
}
.zs-why__item:hover {
    transform: translateY(-6px);
    border-color: rgba(47, 158, 110, .3);
    box-shadow: 0 22px 44px -16px rgba(15, 114, 86, .22);
}
.zs-why__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eaf6f0, #d8efe4);
    margin-bottom: 18px;
    color: #0f7256;               /* SVG 线标颜色 */
}
.zs-why__icon svg { width: 30px; height: 30px; }
.zs-why__item h3 {
    font-size: 19px;
    font-weight: 700;
    color: #14352a;
    margin: 0 0 10px;
    position: relative;
    padding-bottom: 12px;
}
.zs-why__item h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #2f9e6e, rgba(47, 158, 110, 0));
}
.zs-why__item p {
    font-size: 14px;
    color: #5f7268;
    line-height: 2;
    margin: 0;
}
.zs-why__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #9aaba2;
    padding: 40px 0;
}

/* ================================================================
   【页面】招商合作页
   【模块】5. 合作流程
   【用途】深绿背景五步流程展示，横向金色连接线 + 圆形编号节点 + 步骤说明
   【关键属性】grid-template-columns: repeat(5, 1fr); 金色渐变连接线; 圆形节点带阴影
   ================================================================ */
.zs-flow {
    background: #0c3827;
    padding: 90px 0 100px;
    color: #fff;
}
.zs-flow .nl-section-title { color: #fff; }
.zs-flow .nl-section-subtitle { color: rgba(255, 255, 255, .75); }
.zs-flow .nl-section-head::after { background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0)); }
.zs-flow__track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding-top: 26px;
}
.zs-flow__line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .8) 30%, rgba(217, 164, 65, .8) 70%, transparent);
}
.zs-flow__step { text-align: center; position: relative; padding-top: 46px; }
.zs-flow__dot {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f9e6e, #0f7256);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px rgba(12, 56, 39, 1), 0 8px 20px rgba(0, 0, 0, .3);
}
.zs-flow__dot i {
    font-style: normal;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.zs-flow__step h4 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: 1px;
}
.zs-flow__step p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.8;
    margin: 0;
}

/* ================================================================
   【页面】招商合作页
   【模块】6. 资质与背书
   【用途】分类封面卡展示荣誉资质，点击进入相册灯箱放大查看，含放大镜遮罩和分类元信息
   【关键属性】grid布局、aspect-ratio封面、灯箱fixed定位、左右翻页导航
   【交互】hover卡片上浮、封面图片缩放、放大镜按钮淡入、灯箱键盘左右/Esc控制
   ================================================================ */
.zs-honor {
    background: #fff;
    padding: 90px 0;
}
.zs-honor__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    gap: 30px;
    justify-content: center;
}
.zs-honor__card {
    background: #fff;
    border: 1px solid #e8edea;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all .35s ease;
    box-shadow: 0 6px 22px rgba(14, 59, 40, .06);
}
.zs-honor__card:hover {
    transform: translateY(-6px);
    border-color: rgba(47, 158, 110, .45);
    box-shadow: 0 26px 50px -18px rgba(15, 114, 86, .28);
}
.zs-honor__cover {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f4f7f5;
}
.zs-honor__cover img {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* 证书竖版完整显示 */
    transition: transform .5s ease;
    padding: 18px;
    box-sizing: border-box;
}
.zs-honor__card:hover .zs-honor__cover img { transform: scale(1.04); }
.zs-honor__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(9, 45, 31, .72);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: all .35s ease;
}
.zs-honor__zoom svg { width: 20px; height: 20px; }
.zs-honor__card:hover .zs-honor__zoom { opacity: 1; transform: translateY(0); }
.zs-honor__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-top: 1px solid #eef2ef;
}
.zs-honor__meta b {
    font-size: 17px;
    font-weight: 700;
    color: #14352a;
    letter-spacing: 1px;
}
.zs-honor__meta span {
    font-size: 13px;
    color: #8ba094;
    letter-spacing: .5px;
}

/* 【页面】招商合作页 | 【模块】资质相册灯箱 | 全屏fixed灯箱，默认隐藏(.is-open显示)，含左右翻页和关闭按钮 */
.zs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(4, 18, 12, .95);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 34px;
}
.zs-lightbox.is-open { display: flex; }
.zs-lightbox__stage {
    max-width: 88vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zs-lightbox__img {
    max-width: 88vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease;
}
.zs-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 2;
}
.zs-lightbox__nav svg { width: 24px; height: 24px; }
.zs-lightbox__nav:hover { background: #2f9e6e; border-color: #2f9e6e; }
.zs-lightbox__nav--prev { left: 26px; }
.zs-lightbox__nav--next { right: 26px; }
.zs-lightbox__count {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
    letter-spacing: 1px;
    z-index: 2;
    white-space: nowrap;
}
.zs-lightbox__close {
    position: absolute;
    right: 28px;
    top: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 2;
}
.zs-lightbox__close:hover { background: #fff; color: #0f7256; }

/* ================================================================
   【页面】招商合作页
   【模块】7. 洽谈 CTA
   【用途】底部深绿渐变CTA区域，含标题文案、地址、合作洽谈按钮和联系电话
   【关键属性】linear-gradient背景、径向光晕装饰、flex布局
   ================================================================ */
.zs-cta {
    background: linear-gradient(118deg, #0a2f22 0%, #12503a 100%);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.zs-cta::after {
    content: "";
    position: absolute;
    right: -160px;
    bottom: -200px;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 158, 110, .25), transparent 70%);
}
.zs-cta .nl-container { position: relative; z-index: 1; }
.zs-cta__box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}
.zs-cta__text h3 {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin: 0 0 12px;
}
.zs-cta__text p {
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
    margin: 0;
    letter-spacing: 1px;
}
.zs-cta__actions { display: flex; align-items: center; gap: 24px; }
.zs-cta__phone {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ================================================================
   【页面】招商合作页
   【模块】8. 响应式适配
   【用途】适配 1200px / 992px / 640px 三种断点，调整栅格列数、字号和布局
   【关键属性】media queries、grid列数递减、flex布局调整、隐藏装饰元素
   ================================================================ */
@media (max-width: 1200px) {
    .zs-hero__title { font-size: 52px; }
    .zs-mode__grid { grid-template-columns: repeat(2, 1fr); }
    .zs-why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
    .zs-hero { padding: 90px 0 100px; }
    .zs-hero__title { font-size: 42px; }
    .zs-stats__grid { grid-template-columns: repeat(2, 1fr); }
    .zs-stats__cell + .zs-stats__cell { border-left: 0; }
    .zs-stats__cell:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .1); }
    .zs-stats__cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .1); }
    .zs-flow__track { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .zs-flow__line { display: none; }
    .zs-cta__box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
    .zs-hero__title { font-size: 34px; }
    .zs-hero__mark { display: none; }
    .zs-mode__grid, .zs-why__grid { grid-template-columns: 1fr; }
    .zs-flow__track { grid-template-columns: 1fr; }
    .zs-cta__actions { flex-direction: column; align-items: flex-start; }
}