/* ==========================================================================
   那拉泉生态养殖 · 官网主题样式 nlqst.css
   生态绿主色：#2f9e6e / 深绿 #1b6b46 / 暖阳金 #d9a441 / 浅底 #f2f7f4
   ========================================================================== */

/* ================================================================
   【页面】全局
   【模块】CSS 自定义属性 / :root
   【用途】定义全站统一调色板与基础圆角值，所有组件通过 var() 引用
   【关键属性】--nl-primary(主绿) / --nl-gold(金色) / --nl-bg(浅底) / --nl-radius(圆角)
   ================================================================ */
:root {
    --nl-primary: #2f9e6e;
    --nl-primary-dark: #1b6b46;
    --nl-primary-light: #4db380;
    --nl-gold: #d9a441;
    --nl-text: #2b3a32;
    --nl-text-light: #7a8a82;
    --nl-bg: #f2f7f4;
    --nl-border: #dfeae3;
    --nl-radius: 10px;
}

/* ================================================================
   【页面】全局
   【模块】基础重置 / Reset
   【用途】统一浏览器默认样式，设置全局字体、字号、行高、背景色
   【关键属性】font-family / font-size / line-height / box-sizing / scroll-behavior
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    color: var(--nl-text);
    line-height: 1.7;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; transition: color .25s ease, opacity .25s ease; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
b, strong { font-weight: 600; }

/* ================================================================
   【页面】全局
   【模块】内容容器 .nl-container
   【用途】全站通用居中容器，最大宽度 1400px，左右内边距 30px
   【关键属性】max-width: 1400px / margin: 0 auto / padding: 0 30px
   ================================================================ */
.nl-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
}

/* ================================================================
   【页面】全局
   【模块】SVG 图标系统 .nl-ic-*
   【用途】通过内联 SVG data-uri 实现纯 CSS 图标，无需额外图片请求
   【关键属性】background-image: url("data:image/svg+xml,…") / 1em 尺寸 / vertical-align: middle
   【交互】图标颜色随 fill 属性固定，多数为生态绿 #2f9e6e 或金色 #d9a441
   ================================================================ */
.nl-ic { display: inline-block; width: 1em; height: 1em; background-position: center; background-repeat: no-repeat; background-size: contain; vertical-align: middle; }
.nl-ic-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f9e6e'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.36 11.36 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.36 11.36 0 0 0 .57 3.57 1 1 0 0 1-.25 1.02z'/%3E%3C/svg%3E"); }
.nl-ic-tel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9a441'%3E%3Cpath d='M12 2a7 7 0 0 1 7 7c0 3.5-2.5 6.2-5 9-.8.9-1.3 2-2 2s-1.2-1.1-2-2c-2.5-2.8-5-5.5-5-9a7 7 0 0 1 7-7zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.nl-ic-address { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9a441'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 0 1 9.5 9a2.5 2.5 0 0 1 5 0 2.5 2.5 0 0 1-2.5 2.5z'/%3E%3C/svg%3E"); }
.nl-ic-wave { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23ffffff'%3E%3Cpath d='M2 16c3 0 4-3 6-3s3 3 6 3 4-3 6-3 3 3 6 3 3-2 4-2v4c-1 0-2 2-4 2s-4-3-6-3-3 3-6 3-4-3-6-3-3 3-4 3z'/%3E%3C/svg%3E"); }
.nl-ic-env { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 29' fill='%23ffffff'%3E%3Cpath d='M16.5 1C9 1 3 6.5 3 13c0 6.5 5.5 11 13.5 15 8-4 13.5-8.5 13.5-15 0-6.5-6-12-13.5-12zm0 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E"); }
.nl-ic-standard { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 1l9 4v6c0 5.5-3.8 10.7-9 12-5.2-1.3-9-6.5-9-12V5l9-4zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }
.nl-ic-scale { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2l10 6-10 6L2 8l10-6zM2 14l10 6 10-6-2.5-1.5L12 17l-7.5-4.5L2 14z'/%3E%3C/svg%3E"); }
.nl-ic-breed { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3c-4 0-8 3-8 8 0 2 .5 3.7 1.4 5.1L2 22h20l-3.4-5.9A9.9 9.9 0 0 0 20 11c0-5-4-8-8-8zm0 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8z'/%3E%3C/svg%3E"); }
.nl-ic-quality { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 17.3l-6.2 3.7 1.6-7L2 9.2l7.1-.6L12 2l2.9 6.6 7.1.6-5.4 4.8 1.6 7z'/%3E%3C/svg%3E"); }
.nl-ic-pinzhi { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21.1 7 14.2 2 9.3l6.9-1z'/%3E%3C/svg%3E"); }
.nl-ic-fish { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M2 8s2 5 10 5 10-5 10-5-2 8-10 8-10-8-10-8zm10 6c-2 0-3.5-.5-4.5-1.2L6 15h3l1 2 1-2h2l1 2 1-2h3l-1.5-2.2C15.5 13.5 14 14 12 14z'/%3E%3C/svg%3E"); }
.nl-ic-fruit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 3c-3 0-5 2-5 5 0 .3 0 .7.1 1H4v2h2.3c.5 4 3.5 7 5.7 7s5.2-3 5.7-7H20V9h-3.1c.1-.3.1-.7.1-1 0-3-2-5-5-5z'/%3E%3C/svg%3E"); }

/* ================================================================
   【页面】全局
   【模块】按钮系统 .nl-btn / .nl-btn--primary / .nl-btn--gold
   【用途】全站统一样式的按钮，支持主色绿渐变和金色渐变两种变体
   【关键属性】border-radius: 40px / 渐变色背景 / box-shadow 投影
   【交互】hover 时上移 2px、加深渐变、提亮投影
   ================================================================ */
.nl-btn {
    display: inline-block;
    padding: 12px 34px;
    font-size: 15px;
    border-radius: 40px;
    cursor: pointer;
    border: none;
    transition: all .3s ease;
    text-align: center;
}
.nl-btn--primary {
    background: linear-gradient(135deg, var(--nl-primary), var(--nl-primary-dark));
    color: #fff;
    box-shadow: 0 8px 20px rgba(27, 107, 70, .25);
}
.nl-btn--primary:hover { background: linear-gradient(135deg, var(--nl-primary-dark), #145233); color: #fff; transform: translateY(-2px); }
.nl-btn--gold {
    background: linear-gradient(135deg, #e0b052, var(--nl-gold));
    color: #fff;
    box-shadow: 0 8px 20px rgba(217, 164, 65, .3);
}
.nl-btn--gold:hover { background: linear-gradient(135deg, #c7952e, #b8862a); color: #fff; transform: translateY(-2px); }

/* ================================================================
   【页面】全局
   【模块】区块标题系统 .nl-section-head / .nl-section-title / .nl-section-subtitle / .nl-section-more
   【用途】各板块统一的标题区域：主标题 + 副标题 + 右侧渐隐装饰线 + 可选"查看更多"按钮
   【关键属性】display: flex / ::after 渐变线 / .nl-section-more 绿描边圆角按钮
   【交互】.nl-section-more hover 时背景反色（绿底白字 → 白底绿箭头）
   ================================================================ */
.nl-section-head {
    display: flex;
    align-items: baseline;
    gap: 26px;
    margin-bottom: 54px;
    position: relative;
}
/* 与主营产品标题一致：主标 + 副标同排，右侧渐隐细线 */
.nl-section-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 114, 86, .35), rgba(15, 114, 86, 0));
    margin-left: 10px;
    transform: translateY(-6px);
}
.nl-section-head--center { text-align: center; justify-content: center; }
.nl-section-head--center::after { display: none; }
.nl-section-head--left { text-align: left; }
.nl-section-title { font-size: 40px; font-weight: 700; color: #0f7256; letter-spacing: 2px; line-height: 1.3; margin: 0; flex-shrink: 0; }
.nl-section-subtitle { font-size: 20px; color: #55705f; letter-spacing: 1px; margin: 0; flex-shrink: 0; font-weight: 400; }
/* 查看更多（蓝湖 box_10 统一样式：133×37 绿描边圆角 + 内部绿圆白箭头，hover 反色）
   在统一头部中悬浮于右侧，与渐隐线并行（各板块 head 的线通过 margin-right 让位） */
.nl-section-more {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
    display: inline-flex; align-items: center; justify-content: space-between;
    width: 133px; height: 37px; border-radius: 7px; box-sizing: border-box;
    border: 1px solid #0f7256; color: #0f7256;
    font-size: 16px; font-weight: 500; background: #fff;
    padding: 0 9px 0 10px; text-decoration: none;
    transition: background .3s ease, color .3s ease;
}
/* 带查看更多按钮的板块：线让位于按钮（右侧留 133px + 间距） */
.nl-resort .nl-section-head::after,
.nl-news .nl-section-head::after,
.nl-fish .nl-section-head::after {
    margin-right: 160px;
}
.nl-section-more::after {
    content: ''; flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
    background-color: #0f7256;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.2l6.8 2.8-6.8 2.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 11px 8px;
    transition: background-color .3s ease;
}
.nl-section-more:hover { background: #0f7256; color: #fff; }
.nl-section-more:hover::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 8' fill='none' stroke='%230f7256' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.2l6.8 2.8-6.8 2.8'/%3E%3C/svg%3E"); }

/* ================================================================
   【页面】首页 / 全局
   【模块】顶部导航 .nl-header / .nl-logo / .nl-nav / .nl-subnav / .nl-header__phone / .nl-nav-toggle
   【用途】全站粘性顶部导航栏，含 logo、一级菜单、二级下拉菜单、联系电话、移动端汉堡按钮
   【关键属性】position: sticky / .is-scrolled 滚动态收缩效果 / ::after 下划线指示器
   【交互】hover 显示绿色下划线动画 + 二级下拉菜单淡入上浮 / 滚动后背景透明度降低 + logo 缩小
   ================================================================ */
.nl-header {
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--nl-border);
    position: sticky; top: 0; z-index: 1000;
    /* 不用 backdrop-filter（滚动时每帧重绘会卡顿），纯半透明背景更流畅 */
    transition: background .3s ease, box-shadow .3s ease;
}
/* 滚动后：视觉收缩（logo/菜单收紧 + 背景透明）；导航总高度固定，杜绝 sticky 布局抖动 */
.nl-header.is-scrolled { background: rgba(255, 255, 255, .72); box-shadow: 0 6px 26px rgba(14, 59, 40, .08); }
.nl-header.is-scrolled .nl-logo img { height: 38px; }
.nl-header.is-scrolled .nl-nav > ul > li > a { padding-top: 24px; padding-bottom: 24px; }
.nl-header__inner { display: flex; align-items: center; height: 84px; }
.nl-logo { margin-right: 50px; flex-shrink: 0; }
.nl-logo img { height: 56px; width: auto; }
.nl-nav { flex: 1; }
.nl-nav > ul { display: flex; align-items: center; }
.nl-nav > ul > li { position: relative; margin: 0 8px; }
.nl-nav > ul > li > a {
    display: block; padding: 30px 18px; font-size: 16px; font-weight: 500;
    color: var(--nl-text); position: relative;
}
.nl-nav > ul > li > a::after {
    content: ''; position: absolute; left: 18px; right: 18px; bottom: 24px;
    height: 3px; border-radius: 2px; background: var(--nl-primary);
    transform: scaleX(0); transition: transform .3s ease;
}
.nl-nav > ul > li:hover > a,
.nl-nav > ul > li.cur > a { color: var(--nl-primary); }
.nl-nav > ul > li:hover > a::after,
.nl-nav > ul > li.cur > a::after { transform: scaleX(1); }
/* 二级下拉 */
.nl-subnav {
    position: absolute; top: 100%; left: 0; min-width: 160px;
    background: #fff; border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 40px rgba(14, 59, 40, .14);
    padding: 10px 0; opacity: 0; visibility: hidden;
    transform: translateY(10px); transition: all .3s ease;
}
.nl-nav > ul > li:hover .nl-subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.nl-subnav a { display: block; padding: 10px 22px; font-size: 14px; color: var(--nl-text); }
.nl-subnav a:hover { color: var(--nl-primary); background: var(--nl-bg); }
.nl-header__phone { display: flex; align-items: center; gap: 10px; margin-left: 20px; flex-shrink: 0; }
.nl-header__phone .nl-ic { width: 22px; height: 22px; }
.nl-header__phone-txt span { display: block; font-size: 12px; color: var(--nl-text-light); line-height: 1.3; }
.nl-header__phone-txt b { display: block; font-size: 20px; color: var(--nl-primary); letter-spacing: 1px; line-height: 1.3; }

/* 汉堡菜单按钮（默认隐藏，≤768px 显示） */
.nl-nav-toggle {
    display: none; width: 40px; height: 40px; margin-left: 12px; flex-shrink: 0;
    border: 1px solid var(--nl-border); border-radius: 8px; background: none;
    cursor: pointer; padding: 0; position: relative;
}
.nl-nav-toggle span,
.nl-nav-toggle span::before,
.nl-nav-toggle span::after {
    content: ''; position: absolute; left: 9px; width: 20px; height: 2px;
    background: #2d2d2d; border-radius: 2px; transition: all .3s ease;
}
.nl-nav-toggle span { top: 19px; }
.nl-nav-toggle span::before { top: -6px; }
.nl-nav-toggle span::after { top: 6px; }
.nl-nav-toggle.is-active span { background: transparent; }
.nl-nav-toggle.is-active span::before { top: 0; transform: rotate(45deg); }
.nl-nav-toggle.is-active span::after { top: 0; transform: rotate(-45deg); }

/* ================================================================
   【页面】首页 / 全局
   【模块】导航响应式
   【用途】1200px / 992px / 768px 三档断点适配导航栏布局
   【关键属性】@media (max-width: 1200px) / 992px / 768px
   【交互】≤768px 显示汉堡按钮，导航变为垂直折叠面板，二级下拉改为静态展开
   ================================================================ */
/* 导航响应式 */
@media (max-width: 1200px) {
    .nl-nav > ul > li > a { padding: 30px 12px; font-size: 15px; }
    .nl-logo { margin-right: 24px; }
}
@media (max-width: 992px) {
    .nl-header__phone { display: none; }
    .nl-logo img { height: 44px; }
}
@media (max-width: 768px) {
    .nl-header__inner { height: 64px; }
    /* 汉堡按钮：靠右（左 logo · 右菜单按钮，标准移动端 header） */
    .nl-nav-toggle { display: block; margin-left: auto; }
    .nl-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        background: #fff; box-shadow: 0 18px 44px rgba(14, 59, 40, .14);
        max-height: 0; overflow: hidden;
        transition: max-height .45s cubic-bezier(.4, 0, .2, 1);
    }
    .nl-nav.is-open { max-height: 520px; overflow-y: auto; }
    .nl-nav > ul { flex-direction: column; align-items: stretch; padding: 8px 24px 14px; }
    .nl-nav > ul > li { margin: 0; }
    .nl-nav > ul > li > a { padding: 15px 0; border-bottom: 1px solid var(--nl-border); font-size: 16px; }
    .nl-nav > ul > li > a::after { display: none; }
    /* 二级下拉在移动端改为静态展开 */
    .nl-subnav {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; padding: 0 0 8px;
    }
    .nl-subnav a { padding: 9px 0 9px 14px; }
}

/* ================================================================
   【页面】首页
   【模块】Banner 轮播 .nl-banner / swiper 容器 / 分页条
   【用途】首页全屏大图轮播区域，swiper 实现，含视频/图片切换、分页条、声音开关、全屏按钮
   【关键属性】height: 920px / object-fit: cover / .swiper-pagination-bullet 自定义横条分页
   【交互】分页条 hover 宽度变化 / 激活项使用绿色渐变 + 放大 + 发光投影
   ================================================================ */
.nl-banner {
    position: relative;
    height: 920px;
    overflow: hidden;
}
/* 自研轮播：swiper 容器需撑满高度（slide 为 absolute 布局） */
.nl-banner .nl-banner-swiper {
    height: 920px;
    width: 100%;
    position: relative;
}
.nl-banner .swiper-slide {
    width: 100%;
    height: 920px;
    overflow: hidden;
}
.nl-banner .swiper-slide img {
    width: 100%;
    height: 920px;
    object-fit: cover;
    display: block;
}
.nl-banner .swiper-pagination {
    top: auto;
    bottom: 44px;
    left: 0;
    right: 0;
    transform: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index: 10;
}
/* 分页横条（绿色 · 激活项放大） */
.nl-banner .swiper-pagination-bullet {
    width: 28px;
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .42);
    font-size: 0;
    opacity: 1;
    cursor: pointer;
    transition: width .55s cubic-bezier(.22, .68, .35, 1),
                background .4s ease,
                box-shadow .4s ease;
    box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.nl-banner .swiper-pagination-bullet-active {
    width: 60px;
    background: linear-gradient(90deg, var(--nl-primary), #55c98d);
    box-shadow: 0 2px 14px rgba(47, 158, 110, .65);
}
.nl-banner__video video {
    width: 100%;
    height: 920px;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
/* ================================================================
   【页面】首页
   【模块】Banner 视频声音开关 .nl-banner__mute
   【用途】视频播放时控制声音开关的半透明圆形按钮，位于右下角
   【关键属性】position: absolute / right: 40px / bottom: 60px / border-radius: 50%
   【交互】hover 加深背景 / .is-muted 切换图标显示状态
   ================================================================ */
.nl-banner__video { position: relative; }
.nl-banner__mute {
    position: absolute;
    right: 40px;
    bottom: 60px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease;
}
.nl-banner__mute:hover { background: rgba(0, 0, 0, .65); }
.nl-banner__mute svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nl-banner__mute .nl-banner__mute-off { display: none; }
.nl-banner__mute.is-muted .nl-banner__mute-on { display: none; }
.nl-banner__mute.is-muted .nl-banner__mute-off { display: block; }
/* ================================================================
   【页面】首页
   【模块】Banner 全屏观看按钮 .nl-banner__fullscreen
   【用途】视频全屏切换按钮，半透明圆形，位于声音开关左侧
   【关键属性】position: absolute / right: 100px / bottom: 60px / border-radius: 50%
   【交互】hover 加深背景
   ================================================================ */
.nl-banner__fullscreen {
    position: absolute;
    right: 100px;
    bottom: 60px;
    z-index: 5;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease;
}
.nl-banner__fullscreen:hover { background: rgba(0, 0, 0, .65); }
.nl-banner__fullscreen svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ================================================================
   【页面】首页
   【模块】Banner 品牌排版 .nl-banner__caption / .nl-banner__eyebrow / .nl-banner__headline / .nl-banner__caption-text / .nl-banner__caption-line
   【用途】左对齐垂直居中的品牌标题组：眉题 XINJIANG NALAQUAN + 主标题 + 生态绿装饰线，带入场动画
   【关键属性】position: absolute / inset: 0 渐变叠加层 / pointer-events: none
   【交互】swiper-slide-active 触发眉题下沉淡入 → 标题上浮 → 绿线从左向右展开
   ================================================================ */
.nl-banner .swiper-slide { position: relative; }
.nl-banner__caption {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* 底部渐变压暗托字；顶部右上角微暗避免白区过曝 */
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 46%,
            rgba(0, 0, 0, .16) 74%,
            rgba(0, 0, 0, .42) 100%),
        linear-gradient(90deg,
            rgba(6, 40, 24, .30) 0%,
            rgba(6, 40, 24, .10) 24%,
            rgba(6, 40, 24, 0) 52%);
}
/* 与顶部 logo 同一套 1400 容器（logo 左缘 = 内容区左缘） */
.nl-banner__shell {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

/* ================================================================
   【页面】首页
   【模块】Banner 标题组 .nl-banner__headline
   【用途】左侧垂直居中的标题容器，左缘与 logo 对齐，最大宽度 860px
   【关键属性】position: absolute / top: 50% / transform: translateY(-50%)
   ================================================================ */
.nl-banner__headline {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 860px;
}
/* ================================================================
   【页面】首页
   【模块】Banner 眉题 .nl-banner__eyebrow (XINJIANG NALAQUAN)
   【用途】品牌英文眉题，白色细体 + 生态绿粗体组合，带入场淡入下沉动画
   【关键属性】display: flex / gap: 14px / opacity: 0（由动画触发）
   【交互】swiper-slide-active 触发 nlEyebrowIn 动画
   ================================================================ */
.nl-banner__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    opacity: 0;
    padding-bottom: 20px;      /* 上方空间，避免与顶部拥挤 */
}
.nl-banner__eyebrow-x {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: .5em;
    color: rgba(255, 255, 255, .88);
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.nl-banner__eyebrow-n {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .26em;
    color: #55c98d;             /* 亮雾背景可读的生态绿 */
    text-transform: uppercase;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}
/* ================================================================
   【页面】首页
   【模块】Banner 标题包裹层 .nl-banner__titlewrap
   【用途】包裹主标题与绿装饰线，使绿线右端与标题文字右缘对齐
   【关键属性】display: flex / flex-direction: column / width: fit-content / max-width: 60vw
   ================================================================ */
.nl-banner__titlewrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 60vw;
}
/* ================================================================
   【页面】首页
   【模块】Banner 主标题 .nl-banner__caption-text
   【用途】品牌主标题大字，白色粗体，带文字阴影，最多显示 2 行
   【关键属性】font-size: 68px / letter-spacing: .12em / text-shadow / -webkit-line-clamp: 2
   【交互】swiper-slide-active 触发 nlHeadlineIn 上浮动画
   ================================================================ */
.nl-banner__caption-text {
    color: #fff;
    font-size: 68px;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.18;
    margin: 0;
    text-shadow:
        0 2px 6px rgba(0, 0, 0, .35),
        0 10px 34px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ================================================================
   【页面】首页
   【模块】Banner 生态绿装饰线 .nl-banner__caption-line
   【用途】标题下方生态绿渐变细线，与标题等宽，右端对齐，从右向左展开
   【关键属性】width: 180px / height: 3px / gradient 左淡右实 / transform-origin: right center
   【交互】swiper-slide-active 触发 nlLineGrow 动画（scaleX 0→1）
   ================================================================ */
.nl-banner__caption-line {
    display: block;
    width: 180px;
    height: 3px;
    margin-top: 30px;
    margin-left: auto;              /* 滑动到右侧：右端与上方文字右缘对齐 */
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(47, 158, 110, .15), #2f9e6e);  /* 左淡右实，实色收口在文字右缘 */
    transform-origin: right center; /* 从右端对齐点向左滑出 */
    opacity: 0;
}
/* ================================================================
   【页面】首页
   【模块】Banner 入场动画触发器
   【用途】swiper-slide-active 时依次触发眉题、标题、绿线的入场动画
   【关键属性】animation 各属性 / cubic-bezier 缓动 / forwards 保持终态
   【交互】眉题先入 → 标题上浮 → 绿线展开，时间错开 0.25s / 0.45s / 1.05s
   ================================================================ */
.swiper-slide-active .nl-banner__eyebrow {
    animation: nlEyebrowIn .8s cubic-bezier(.2, .66, .3, 1) .25s forwards;
}
.swiper-slide-active .nl-banner__caption-text {
    opacity: 0;
    animation: nlHeadlineIn 1s cubic-bezier(.2, .66, .3, 1) .45s forwards;
}
.swiper-slide-active .nl-banner__caption-line {
    animation: nlLineGrow .9s cubic-bezier(.2, .66, .3, 1) 1.05s forwards;
}

/* ================================================================
   【页面】首页
   【模块】Banner 入场关键帧动画 @keyframes
   【用途】眉题下沉淡入 / 标题上浮 / 绿线展开 三种入场动画
   【关键属性】nlEyebrowIn / nlHeadlineIn / nlLineGrow
   ================================================================ */
@keyframes nlEyebrowIn {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes nlHeadlineIn {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes nlLineGrow {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

/* ================================================================
   【页面】首页
   【模块】Banner 响应式
   【用途】1199px / 991px / 767px 三档断点适配 Banner 高度、标题字号、眉题字号
   【关键属性】@media (max-width: 1199px) / 991px / 767px
   【交互】≤767px 移动端隐藏标题文字，仅保留背景图
   ================================================================ */
@media (max-width: 1199px) {
    .nl-banner,
    .nl-banner .nl-banner-swiper,
    .nl-banner .swiper-slide { height: 720px; }
    .nl-banner .swiper-slide img,
    .nl-banner__video video { height: 720px; }
    .nl-banner__eyebrow { margin-bottom: 16px; gap: 12px; padding-bottom: 12px; }
    .nl-banner__eyebrow-x { font-size: 14px; letter-spacing: .42em; }
    .nl-banner__eyebrow-n { font-size: 18px; letter-spacing: .22em; }
    .nl-banner__caption-text { font-size: 52px; letter-spacing: .1em; }
    .nl-banner__caption-line { margin-top: 22px; }
}
@media (max-width: 991px) {
    .nl-banner,
    .nl-banner .nl-banner-swiper,
    .nl-banner .swiper-slide { height: 540px; }
    .nl-banner .swiper-slide img,
    .nl-banner__video video { height: 540px; }
    .nl-banner__shell { padding: 0 22px; }
    .nl-banner__headline { max-width: 78vw; }
    .nl-banner__eyebrow { margin-bottom: 12px; gap: 10px; padding-bottom: 10px; }
    .nl-banner__eyebrow-x { font-size: 12px; letter-spacing: .36em; }
    .nl-banner__eyebrow-n { font-size: 15px; letter-spacing: .18em; }
    .nl-banner__caption-text { font-size: 34px; letter-spacing: .08em; }
    .nl-banner__caption-line { height: 2px; margin-top: 14px; }
}
@media (max-width: 767px) {
    .nl-banner__caption { display: none; }   /* 移动端只保图 */
    /* 移动端 Banner 整图完整显示：容器高度交给 JS 按当前图/视频比例设置（slide 为 absolute 叠放） */
    .nl-banner,
    .nl-banner .nl-banner-swiper {
        height: auto;
        transition: height .5s ease;
    }
    /* 防塌兜底：JS 未测出媒体比例前（iOS 上视频 metadata / 图片加载未就绪），
       容器至少占视口宽 52%（各 banner 图比例 1.78~2.09 → 高约 48~56vw），
       避免容器塌为 0 导致整块 banner 被 overflow:hidden 裁空。
       JS nlFitBannerHeight 测到精确比例后会给 swiper 设 inline min-height:0 + 精确 height 覆盖。 */
    .nl-banner .nl-banner-swiper {
        min-height: 52vw;
    }
    .nl-banner .swiper-slide img,
    .nl-banner__video video {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }
    .nl-banner .swiper-pagination { bottom: 14px; }
    .nl-banner .swiper-pagination-bullet { width: 20px; height: 5px; }
    .nl-banner .swiper-pagination-bullet-active { width: 40px; }
    /* 移动端视频未自动播放时的"轻触播放"引导胶囊（微信 iOS 首手势放行限制的兜底）
       仅当视频 1.2s 内仍停在 poster 才由 JS 加 .is-show 浮现；点它即播并淡出；
       底部 20px 高于分页条(bottom:14) 且低于右下角声音/全屏按钮(bottom:60)，互不遮挡 */
    .nl-banner__tap-play {
        position: absolute;
        left: 50%;
        bottom: 20px;
        z-index: 8;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin: 0;
        padding: 9px 16px 9px 13px;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 999px;
        background: rgba(10, 22, 16, .58);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
        color: #fff;
        font-size: 13px;
        line-height: 1;
        letter-spacing: .08em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%) translateY(6px);
        transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
    }
    .nl-banner__tap-play svg {
        width: 12px;
        height: 12px;
        fill: rgba(255, 255, 255, .95);
        margin-right: 1px;
    }
    .nl-banner__tap-play.is-show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* ================================================================
   【页面】首页
   【模块】关于那拉泉 .nl-about / .nl-about__stats / .nl-stat
   【用途】品牌介绍区域，左文右数据卡片布局，含背景图层
   【关键属性】display: flex / gap: 60px / grid-template-columns: repeat(3, 1fr) 统计卡片
   【关键属性】::before 背景图独立层 / border-radius: var(--nl-radius) 统计卡片圆角
   ================================================================ */
.nl-about {
    background-color: #ffffff;
    padding: 90px 0 240px;   /* 底部 +150px，板块高度增加 150px */
    position: relative;
    overflow: hidden;
}
/* 背景图独立层：从板块顶部 150px 处开始显示（背景整体下移 150px），
   top:150px 后区域高度=原板块高度，背景图 cover 尺寸不变、底部覆盖到新板块底 */
.nl-about::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    bottom: 0;
    background: url(../images/bg_about.png) center / cover no-repeat;
    z-index: 0;
}
.nl-about .nl-container { z-index: 1; transform: translateY(-30px); }
.nl-about__body { display: flex; gap: 60px; align-items: flex-start; }
.nl-about__text { flex: 1; font-size: 15px; color: #4a5a52; text-align: justify; }
.nl-about__text p { margin-bottom: 16px; text-indent: 2em; }
.nl-about__more { margin-top: 14px; }
.nl-about__stats { width: 460px; flex-shrink: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.nl-stat {
    background: linear-gradient(160deg, #eef7f1, #e2efe8);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius);
    padding: 16px 12px; text-align: center;
}
.nl-stat__num { font-size: 13px; color: var(--nl-text-light); margin-bottom: 6px; }
.nl-stat__num b { font-size: 30px; color: var(--nl-primary); font-weight: 700; margin-right: 3px; }
.nl-stat__num span { font-size: 12px; color: var(--nl-text-light); }
.nl-stat__label { font-size: 12px; color: var(--nl-text); }

/* ≤640px（栋生 2026-09-07 全首页板块间距调小）：关于那拉泉 底部 240px 是为桌面
   bg_about 下移留位；手机端收至 160px，同步 ::before top 150→70 保持背景覆盖
   高度不变（cover 图显示区域一致，视觉零回归），板块总高 -80px 使后续内容上移 */
@media (max-width: 640px) {
    .nl-about { padding: 90px 0 160px; }
    .nl-about::before { top: 70px; }
}

/* ================================================================
   【页面】首页
   【模块】冰川雪水那拉泉 .nl-icewater / 生态特色左右结构
   【用途】左侧特色列表 + 右侧视频/图片的左右分栏布局，展示冰川雪水生态优势
   【关键属性】background: url(../images/bg_block2.png) / display: flex / gap: 80px / align-items: stretch
   【关键属性】.nl-icewater__play 视频播放按钮（纯描边无背景）
   【交互】播放按钮带呼吸动画 + 扩散光环，hover 描边变亮，播放后隐藏
   ================================================================ */
.nl-icewater {
    background: url(../images/bg_block2.png) center / cover no-repeat;
    padding: 90px 0;
    position: relative;
}
.nl-icewater__inner { display: flex; gap: 80px; align-items: stretch; }
.nl-icewater__content { flex: 0 0 46%; padding: 10px 0; }
.nl-icewater__item { margin-bottom: 36px; }
.nl-icewater__icon {
    width: 64px; height: 64px; border-radius: 50%;
    background: #e3ebe7; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.nl-icewater__icon img { width: 32px; height: 32px; }
.nl-icewater__item h3 { font-size: 23px; color: #2d2d2d; font-weight: 600; margin-bottom: 10px; }
.nl-icewater__item p { font-size: 15px; color: #5a6a62; line-height: 1.9; }
.nl-icewater__desc { font-size: 15px; color: #5a6a62; line-height: 1.9; }
.nl-icewater__desc p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
.nl-icewater__media { flex: 1; min-width: 0; }
.nl-icewater__media img, .nl-icewater__media video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    border-radius: var(--nl-radius);
}
/* ================================================================
   【页面】首页
   【模块】冰川雪水视频播放按钮 .nl-icewater__play
   【用途】视频上的播放按钮，纯描边无背景，带呼吸和扩散光环动画
   【关键属性】position: absolute / top: 50% / left: 50% / border: 1px solid rgba(255,255,255,.60)
   【交互】静态呼吸闪动 / ::after 扩散光环 / hover 描边变白 / .is-hidden 播放后隐藏
   ================================================================ */
.nl-icewater__video { position: relative; height: 100%; border-radius: var(--nl-radius); overflow: hidden; }
.nl-icewater__play {
    position: absolute; top: 50%; left: 50%;
    width: 58px; height: 58px; border-radius: 50%;
    transform: translate(-50%, -50%);
    /* 完全无背景：不填充、不模糊、不投影，只留一圈细描边 */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, .60);
    box-shadow: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .35s ease,
                opacity .3s ease, transform .3s ease, visibility .3s ease;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}
.nl-icewater__play svg {
    width: 26px; height: 26px; fill: #2f9e6e; margin-left: 4px;
    filter: drop-shadow(0 1px 3px rgba(9, 32, 22, .35));
}
/* 静态（未播放）时轻微呼吸；播放后按钮隐藏，动画随之停止 */
.nl-icewater__play:not(.is-hidden) {
    animation: nl-play-breathe 2.8s ease-in-out infinite;
}
/* 扩散光环 */
.nl-icewater__play::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .60);
    opacity: 0; pointer-events: none;
}
.nl-icewater__play:not(.is-hidden)::after {
    animation: nl-play-ripple 2.8s ease-out infinite;
}
/* 呼吸动画会接管 border-color，hover 需 !important 才生效 */
.nl-icewater__play:not(.is-hidden):hover {
    border-color: rgba(255, 255, 255, 1) !important;
}
.nl-icewater__play:active { opacity: .8; }
.nl-icewater__play.is-hidden {
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -50%) scale(.86);
}

/* ================================================================
   【页面】首页
   【模块】播放按钮及相关动画 @keyframes
   【用途】nl-play-breathe 呼吸缩放 / nl-play-ripple 扩散光环 / nl-arrow-flicker 箭头闪烁
   【关键属性】transform: scale / border-color / opacity 过渡
   ================================================================ */
@keyframes nl-play-breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(255, 255, 255, .48);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.09);
        border-color: rgba(255, 255, 255, .95);
    }
}
@keyframes nl-play-ripple {
    0%   { transform: scale(.94); opacity: .70; }
    70%  { transform: scale(1.52); opacity: 0; }
    100% { transform: scale(1.52); opacity: 0; }
}
@keyframes nl-arrow-flicker {
    0%, 100% { opacity: 1; transform: translateY(0); }
    50%      { opacity: .55; transform: translateY(2px); }
}

/* ================================================================
   【页面】全局
   【模块】无障碍 / prefers-reduced-motion
   【用途】尊重系统"减少动态效果"设置，关闭所有装饰性动画
   【关键属性】@media (prefers-reduced-motion: reduce) / animation: none
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .nl-icewater__play:not(.is-hidden),
    .nl-icewater__play:not(.is-hidden)::after,
    .nl-breed__front-arrow svg { animation: none; }
}

/* ================================================================
   【页面】首页
   【模块】生态养殖 .nl-breed / 白卡竖排 hover 展开
   【用途】默认显示缩略图+标题+箭头，hover 展开显示宣传图+详细介绍
   【关键属性】height: 150px → 450px hover 展开 / 57.14% 图片占比 / cubic-bezier 过渡
   【交互】hover 时 front 淡出、detail 淡入、高度展开、box-shadow 增强
   ================================================================ */
.nl-breed {
    background: url(../images/bg_shengtai.png) center / cover no-repeat;
    padding: 90px 0; position: relative;
}
.nl-breed__list { display: flex; flex-direction: column; gap: 26px; }
.nl-breed__card {
    position: relative; height: 150px; border-radius: 20px; background: #fff;
    overflow: hidden; cursor: pointer;
    transition: height .5s cubic-bezier(.4, 0, .2, 1), box-shadow .5s ease;
}
.nl-breed__card:hover { height: 450px; box-shadow: 0 24px 60px rgba(14, 59, 40, .18); }

/* 默认态：缩略图 + 标题 + 箭头（蓝湖 group_4/5/6） */
.nl-breed__front {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center;
    opacity: 1; visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}
.nl-breed__card:hover .nl-breed__front { opacity: 0; visibility: hidden; }
.nl-breed__front-img { flex: 0 0 57.14%; height: 100%; }   /* 800/1400 */
.nl-breed__front-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-breed__front-title {
    flex: 1; min-width: 0; padding: 0 40px;
    font-size: 24px; font-weight: 700; color: #0f7256;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nl-breed__front-arrow {
    flex: 0 0 auto; width: 58px; height: 58px; margin-right: 62px;
    border-radius: 50%; background: rgba(15, 114, 86, .08);
    display: flex; align-items: center; justify-content: center;
    color: #0f7256; transition: background .35s ease, color .35s ease;
}
.nl-breed__front-arrow svg { width: 26px; height: 26px; animation: nl-arrow-flicker 2.2s ease-in-out infinite; }
.nl-breed__card:hover .nl-breed__front-arrow svg { animation: none; }

/* hover 态：宣传图 + 右侧标题/介绍（蓝湖 group_2） */
.nl-breed__detail {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: stretch;
    opacity: 0; visibility: hidden;
    transition: opacity .45s ease;
}
.nl-breed__card:hover .nl-breed__detail { opacity: 1; visibility: visible; }
.nl-breed__detail-img { flex: 0 0 57.14%; height: 100%; }
.nl-breed__detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-breed__detail-body {
    flex: 1; min-width: 0; padding: 56px 52px;
    display: flex; flex-direction: column; justify-content: center;
}
.nl-breed__detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.nl-breed__detail-ic { width: 46px; height: 43px; flex: 0 0 auto; }
.nl-breed__detail-head h3 { font-size: 24px; font-weight: 700; color: #0f7256; margin: 0; }
.nl-breed__detail-text { font-size: 18px; color: #191919; line-height: 1.9; }
.nl-breed__detail-text p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }

/* 点击 / hover 通用展开态：移动端无 hover，点击切 .is-open 与桌面 hover 视觉一致；
   桌面点击切换也生效（与 hover 共存），可再点收起 */
.nl-breed__card.is-open { height: 450px; box-shadow: 0 24px 60px rgba(14, 59, 40, .18); }
.nl-breed__card.is-open .nl-breed__front { opacity: 0; visibility: hidden; }
.nl-breed__card.is-open .nl-breed__detail { opacity: 1; visibility: visible; }
.nl-breed__card.is-open .nl-breed__front-arrow svg { animation: none; }

/* ================================================================
   【页面】首页
   【模块】生态养殖 响应式
   【用途】992px / 640px 断点适配卡片高度、图片比例、字号间距
   【关键属性】@media (max-width: 992px) / (max-width: 640px)
   ================================================================ */
@media (max-width: 992px) {
    .nl-breed__card { height: 110px; }
    .nl-breed__card:hover { height: 360px; }
    .nl-breed__front-img { flex-basis: 45%; }
    .nl-breed__detail-img { flex-basis: 45%; }
    .nl-breed__front-title { font-size: 16px; padding: 0 12px; }
    .nl-breed__front-arrow { margin-right: 12px; width: 38px; height: 38px; }
    .nl-breed__front-arrow svg { width: 20px; height: 20px; }
    .nl-breed__detail-body { padding: 18px 14px; }
    .nl-breed__detail-head { gap: 8px; margin-bottom: 12px; }
    .nl-breed__detail-head h3 { font-size: 16px; }
    .nl-breed__detail-text { font-size: 13px; }
}
/* ≤640px（栋生 2026-09-07 全首页板块间距调小）：冰川雪水 pt 70→50 让位收紧后的
   about；生态养殖 pb 60→44。冰→生态 36+50=86 保持，生态 pb44 + 主营 pt52 ≈ 96 */
@media (max-width: 640px) {
    .nl-icewater { padding: 50px 0 36px; }
    .nl-breed    { padding: 50px 0 44px; }
    /* 移动端默认即展示箭头提示可点击（加 -webkit-tap-highlight-color 防灰底） */
    .nl-breed__card { -webkit-tap-highlight-color: transparent; }
    .nl-breed__card.is-open { height: 360px; box-shadow: 0 18px 44px rgba(14, 59, 40, .18); }
}

/* ================================================================
   【页面】首页
   【模块】生态养殖 触摸设备修复（栋生 2026-09-08）
   【问题】iOS/安卓触摸屏上 :hover 会"粘滞"——第一次点击展开后 :hover 状态被系统保持，
          JS 移除 .is-open 想收起时，:hover 展开规则仍把卡片撑开 → 点不回去
   【修复】@media (hover: none) 下禁用 :hover 展开（还原默认收起态），
          展开/收起只由点击切换的 .is-open 控制；is-open 规则写在 hover 还原之后，
          同特异度下后者胜出，保证点击展开依然生效；桌面鼠标设备不匹配 hover:none，行为不变
   ================================================================ */
@media (hover: none) {
    /* 1) 触摸设备：:hover 不再展开（还原为默认收起态） */
    .nl-breed__card:hover { height: 150px; box-shadow: none; }
    .nl-breed__card:hover .nl-breed__front { opacity: 1; visibility: visible; }
    .nl-breed__card:hover .nl-breed__front-arrow svg { animation: nl-arrow-flicker 2.2s ease-in-out infinite; }
    .nl-breed__card:hover .nl-breed__detail { opacity: 0; visibility: hidden; }
    /* 2) 展开态仅由 .is-open 控制（后写 → 优先于上面的 hover 还原） */
    .nl-breed__card.is-open { height: 450px; box-shadow: 0 24px 60px rgba(14, 59, 40, .18); }
    .nl-breed__card.is-open .nl-breed__front { opacity: 0; visibility: hidden; }
    .nl-breed__card.is-open .nl-breed__front-arrow svg { animation: none; }
    .nl-breed__card.is-open .nl-breed__detail { opacity: 1; visibility: visible; }
}
@media (hover: none) and (max-width: 992px) {
    .nl-breed__card:hover { height: 110px; }
    .nl-breed__card.is-open { height: 360px; box-shadow: 0 18px 44px rgba(14, 59, 40, .18); }
}

/* ================================================================
   【页面】首页
   【模块】泉边度假 .nl-resort / 房型tab + 三图轮播 + 描述区 + 放大相册
   【用途】展示度假村房型与设施，支持标签切换、图片轮播、点击图片放大查看
   【关键属性】display: flex 布局 / flex: 0 0 calc((100% - 56px) / 3) 三图一屏 / cursor: zoom-in
   【交互】tab hover/激活绿底白字 / 图片 hover 放大 + 阴影增强 / 点击打开全屏 lightbox
   ================================================================ */
.nl-resort {
    background: url(../images/bg_dujia.png) center / cover no-repeat;
    padding: 90px 0; position: relative;
}
.nl-resort .nl-container { position: relative; z-index: 1; }

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 分类标签 .nl-resort__tabs / .nl-resort__tabs-row / .nl-resort__tab
   【用途】房型筛选标签栏，图标+名称。任意宽度恒单行：
         外层容器可横向滚动（滚动条隐藏），内层 row 用 margin:0 auto 居中 ——
         内容放得下时整排居中（与旧 flex-wrap 视觉一致），放不下时自动贴左并左右滑动。
   【关键属性】overflow-x: auto / row margin:0 auto + flex-shrink:0 / border-radius: 26px
   【交互】hover/激活时绿底白字 + 投影增强
   ================================================================ */
.nl-resort__tabs {
    display: flex; overflow-x: auto; margin-bottom: 36px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nl-resort__tabs::-webkit-scrollbar { display: none; }
.nl-resort__tabs-row {
    display: flex; align-items: center; gap: 14px;
    margin: 0 auto; flex-shrink: 0;
}
.nl-resort__tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 22px; border-radius: 26px; border: 1px solid rgba(15, 114, 86, .35);
    background: #fff; color: #0f7256; font-size: 16px; cursor: pointer; white-space: nowrap;
    transition: all .3s ease;
}
/* 名称小图标：默认绿色（随文字 currentColor），hover/激活整卡深绿 → 图标文字变白 */
.nl-resort__tab-ic { display: inline-flex; align-items: center; }
.nl-resort__tab-ic svg { width: 19px; height: 19px; }
.nl-resort__tab:hover {
    border-color: #0f7256; background: #0f7256; color: #fff;
    box-shadow: 0 8px 20px rgba(15, 114, 86, .26);
}
.nl-resort__tab.is-active {
    background: #0f7256; border-color: #0f7256; color: #fff;
    box-shadow: 0 8px 20px rgba(15, 114, 86, .3);
}
.nl-resort__tab img { width: 20px; height: auto; opacity: .75; transition: opacity .3s ease; }
.nl-resort__tab.is-active img { opacity: 1; }

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 轮播面板 .nl-resort__panes
   【用途】三图一屏轮播展示，间距 28px，每个 slide flex 三等分
   【关键属性】display: flex / gap: 28px / transition: transform .6s
   【交互】左右箭头切换时整体平移
   ================================================================ */
.nl-resort__panes { position: relative; }
.nl-resort__pane { display: none; }
.nl-resort__pane.is-active { display: block; }
.nl-resort__stage {
    position: relative; max-width: 1400px; margin: 0 auto;
    overflow: hidden; padding: 0 2px;
}
.nl-resort__track { display: flex; gap: 28px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.nl-resort__slide { flex: 0 0 calc((100% - 56px) / 3); }
.nl-resort__slide img {
    width: 100%; height: 325px; object-fit: cover; display: block;
    border-radius: 14px; box-shadow: 0 12px 30px rgba(14, 59, 40, .14);
    cursor: zoom-in;
    transition: transform .45s ease, box-shadow .45s ease;
}
.nl-resort__slide img:hover {
    transform: scale(1.02);
    box-shadow: 0 18px 42px rgba(14, 59, 40, .22);
}

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 图片放大相册 .nl-resort__lightbox
   【用途】点击图片后全屏预览相册，含前后翻页、计数、关闭按钮
   【关键属性】position: fixed / inset: 0 / z-index: 2000 / background: rgba(6,24,17,.94)
   【交互】.is-open 显示 / 左右导航按钮 hover 变绿 / 关闭按钮 hover 反色
   ================================================================ */
.nl-resort__lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;          /* 高于 sticky 导航(1000) */
    background: rgba(6, 24, 17, .94);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.nl-resort__lightbox.is-open { display: flex; }
.nl-resort__lb-img {
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .25s ease;
}
.nl-resort__lb-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(6, 24, 17, .35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease;
    z-index: 2;
}
.nl-resort__lb-nav svg { width: 24px; height: 24px; }
.nl-resort__lb-nav:hover { background: #2f9e6e; border-color: #2f9e6e; }
.nl-resort__lb-nav--prev { left: 26px; }
.nl-resort__lb-nav--next { right: 26px; }
.nl-resort__lb-count {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(6, 24, 17, .55);
    color: rgba(255, 255, 255, .9);
    font-size: 14px;
    letter-spacing: 1px;
    z-index: 2;
    white-space: nowrap;
}
.nl-resort__lb-close {
    position: absolute;
    right: 30px;
    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;
}
.nl-resort__lb-close:hover { background: #fff; color: #0f7256; }

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 轮播箭头 .nl-resort__arrow
   【用途】左右切换箭头按钮，半透明背景，悬浮在轮播两侧
   【关键属性】position: absolute / top: 50% / transform: translateY(-50%) / width: 52px
   【交互】hover 背景变实 + 轻微放大 scale(1.08)
   ================================================================ */
.nl-resort__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(255, 255, 255, .38); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: rgba(15, 114, 86, .8); box-shadow: 0 4px 16px rgba(14, 59, 40, .10);
    transition: background .3s ease, transform .3s ease;
}
.nl-resort__arrow:hover { background: rgba(255, 255, 255, .75); transform: translateY(-50%) scale(1.08); }
.nl-resort__arrow svg { width: 24px; height: 24px; }
.nl-resort__arrow--prev { left: -10px; }
.nl-resort__arrow--next { right: -10px; }

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 小圆点分页 .nl-resort__dots
   【用途】每 3 张图片一页的分页指示器
   【关键属性】display: flex / gap: 10px / .is-active 激活态宽度 26px 椭圆
   【交互】激活项由圆点变成长条，背景色加深
   ================================================================ */
.nl-resort__dots {
    display: flex; justify-content: center; gap: 10px; margin-top: 28px;
}
.nl-resort__dots i {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(15, 114, 86, .25); cursor: pointer; transition: all .3s ease;
}
.nl-resort__dots i.is-active { background: #0f7256; width: 26px; border-radius: 5px; }

/* ================================================================
   【页面】首页
   【模块】泉边度假 · 描述 + 预约按钮 .nl-resort__info / .nl-resort__book
   【用途】轮播下方的描述文字和"立即预约"按钮，含左侧竖线装饰
   【关键属性】display: flex / justify-content: space-between / ::before 竖线装饰
   【交互】.nl-resort__book hover 时背景浅绿透明
   ================================================================ */
.nl-resort__info {
    max-width: 1400px; margin: 44px auto 0; padding-top: 36px;
    border-top: 1px solid rgba(15, 114, 86, .2);
    display: flex; align-items: center; justify-content: space-between; gap: 30px;
}
.nl-resort__info p { font-size: 16px; color: #0f7256; line-height: 2; flex: 1; }
.nl-resort__book {
    position: relative; flex: 0 0 auto;
    width: 334px; height: 79px; box-sizing: border-box;
    border: 1px solid #0f7256; text-decoration: none; display: block;
    transition: background .3s ease;
}
/* 左侧竖线装饰（蓝湖 image_16：60×1，按钮左外侧 -33px，top 40） */
.nl-resort__book::before {
    content: ''; position: absolute; left: -33px; top: 40px;
    width: 60px; height: 1px; background: #0f7256;
}
/* 两行文字：Book Now 紧凑在上（盒高约 12）、立即预约 16 在下并左缩进 7px（蓝湖 text-group_22：margin 27 0 0 47） */
.nl-resort__book b {
    display: block; font-size: 16px; font-weight: 500; color: #0f7256;
    line-height: 12px; margin: 27px 0 0 47px; white-space: nowrap;
}
.nl-resort__book span {
    display: block; font-size: 16px; color: #0f7256;
    line-height: 16px; margin: 4px 0 0 54px; white-space: nowrap;
}
.nl-resort__book:hover { background: rgba(15, 114, 86, .07); }

/* ================================================================
   【页面】首页
   【模块】泉边度假 响应式
   【用途】1200px / 992px / 640px 断点适配图片高度、slide 列数、tab 尺寸
   【关键属性】@media (max-width: 1200px) / 992px / 640px
   ================================================================ */
@media (max-width: 1200px) {
    .nl-resort__slide { flex-basis: calc((100% - 28px) / 2); }
    .nl-resort__slide img { height: 300px; }
}
/* ≤992px（手机/平板）：9 个房型 tab 内容放不下 → 右缘渐隐提示可滑动；
   padding-right 与渐隐等宽，保证滚到底时最后一项不被淡出。溢出容器自动贴左（base row margin:auto 规则）。 */
@media (max-width: 992px) {
    /* padding-right 与渐隐等宽：滚到底时最后一项不被右缘 fade 淡出 */
    .nl-resort__tabs {
        padding-right: 26px;
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    }
    .nl-resort__tabs-row { gap: 10px; }
}
@media (max-width: 640px) {
    .nl-resort__slide { flex-basis: 100%; }
    .nl-resort__slide img { height: 260px; }
    .nl-resort__tab { padding: 8px 18px; font-size: 14px; }
    .nl-resort__arrow { width: 40px; height: 40px; }
    .nl-resort__info { flex-direction: column; text-align: center; }
}

/* ================================================================
   【页面】首页
   【模块】那拉泉餐厅 .nl-restaurant / 横幅 + tab + 图标列表轮播
   【用途】展示餐厅菜品，含顶部深色横幅、分类 tab 切换、卡片列表轮播
   【关键属性】background: url(../images/bg_canting.png) / height: 420px 横幅 / flex: 0 0 calc((100% - 56px) / 3) 三卡一屏
   【交互】tab hover/激活绿底白字 / 卡片 hover 上移 + 阴影增强 / 图片 hover 轻微放大
   ================================================================ */
.nl-restaurant { position: relative; background: #fff; }

/* ================================================================
   【页面】首页
   【模块】餐厅顶部横幅 .nl-restaurant__banner
   【用途】深色背景横幅，展示餐厅标题和描述文字，左侧渐变叠加层
   【关键属性】height: 420px / background: url(../images/bg_canting.png) / ::before 渐变叠加
   ================================================================ */
.nl-restaurant__banner {
    position: relative; height: 420px;
    background: url(../images/bg_canting.png) center / cover no-repeat;
    display: flex; align-items: center;
}
.nl-restaurant__banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(9, 32, 22, .62) 0%, rgba(9, 32, 22, .28) 55%, rgba(9, 32, 22, .12) 100%);
}
.nl-restaurant__banner .nl-container { position: relative; z-index: 1; width: 100%; }
.nl-restaurant__title {
    font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 22px; letter-spacing: 2px;
    text-align: left;
}
.nl-restaurant__desc { max-width: 760px; font-size: 16px; color: #fff; line-height: 2; text-align: left; }

/* ================================================================
   【页面】首页
   【模块】餐厅分类标签 .nl-restaurant__tabs / .nl-restaurant__tab
   【用途】菜品分类切换标签，图标+名称，190px 宽胶囊形
   【关键属性】width: 190px / height: 48px / border-radius: 999px
   【交互】hover/激活时绿底白字 + 投影
   ================================================================ */
/* banner 底部与 tab 之间留出呼吸间距（52px 偏近 → 76px） */
.nl-restaurant__body { padding: 76px 0 90px; }
.nl-restaurant__tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.nl-restaurant__tab {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 190px; height: 48px; border-radius: 999px;
    border: 1.5px solid rgba(15, 114, 86, .40);
    background: #fff; color: #0f7256;
    font-size: 17px; font-weight: 700; cursor: pointer;
    transition: all .3s ease;
}
.nl-restaurant__tab-ic { display: inline-flex; align-items: center; }
.nl-restaurant__tab-ic svg { width: 20px; height: 20px; }
.nl-restaurant__tab:hover,
.nl-restaurant__tab.is-active {
    background: #0f7256; border-color: #0f7256; color: #fff;
    box-shadow: 0 8px 20px rgba(15, 114, 86, .28);
}

/* ================================================================
   【页面】首页
   【模块】餐厅菜品卡片轮播 .nl-restaurant__carousel / .nl-restaurant__card
   【用途】三卡一屏的菜品展示轮播，图片 + 名称标注
   【关键属性】display: flex / gap: 28px / flex: 0 0 calc((100% - 56px) / 3) / object-fit: contain
   【交互】卡片 hover 上移 6px / 图片 hover 放大 1.02
   ================================================================ */
.nl-restaurant__panes { position: relative; }
.nl-restaurant__pane { display: none; }
.nl-restaurant__pane.is-active { display: block; }
.nl-restaurant__carousel { position: relative; overflow: hidden; }
.nl-restaurant__track { display: flex; gap: 28px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.nl-restaurant__slide { flex: 0 0 calc((100% - 56px) / 3); }
.nl-restaurant__card {
    margin: 0; background: #f2f5f3; border-radius: 14px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(14, 59, 40, .10);
    transition: transform .35s ease, box-shadow .35s ease;
}
.nl-restaurant__card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(14, 59, 40, .16); }
/* 完整显示不裁剪：contain + 浅色底衬（图片比例不同也不遮挡） */
.nl-restaurant__card img {
    width: 100%; height: 330px; object-fit: contain; display: block;
    background: #f2f5f3; padding: 10px; box-sizing: border-box;
    transition: transform .5s ease;
}
.nl-restaurant__card:hover img { transform: scale(1.02); }
.nl-restaurant__card figcaption {
    padding: 16px 8px; text-align: center;
    font-size: 17px; color: #2d2d2d; font-weight: 600;
}

/* ================================================================
   【页面】首页
   【模块】餐厅轮播导航箭头 .nl-restaurant__arrow / .nl-restaurant__nav
   【用途】轮播下方居中排列的左右切换箭头
   【关键属性】width: 46px / height: 46px / border-radius: 50%
   【交互】hover 绿底白字反色
   ================================================================ */
.nl-restaurant__nav { display: flex; justify-content: center; gap: 14px; margin-top: 34px; }
.nl-restaurant__arrow {
    width: 46px; height: 46px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(15, 114, 86, .45); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #0f7256; transition: all .3s ease;
}
.nl-restaurant__arrow:hover { background: #0f7256; border-color: #0f7256; color: #fff; }
.nl-restaurant__arrow svg { width: 22px; height: 22px; }

/* ================================================================
   【页面】首页
   【模块】餐厅滑动提示 .nl-restaurant__hint（栋生 2026-09-08）
   【用途】仅移动端显示：小圆点沿横线左右滑动，示意"可左右滑动查看更多"
   【关键属性】display: none（桌面）→ flex（≤640）/ .nl-restaurant__hint-dot 平移动画
   ================================================================ */
.nl-restaurant__hint { display: none; }
.nl-restaurant__hint-svg { width: 44px; height: 10px; overflow: visible; }
.nl-restaurant__hint-dot { animation: nl-hint-slide 1.6s ease-in-out infinite; }
@keyframes nl-hint-slide {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(24px); }
}

/* ================================================================
   【页面】首页
   【模块】餐厅 响应式
   【用途】992px / 640px 断点适配横幅高度、slide 列数
   【关键属性】@media (max-width: 992px) / (max-width: 640px)
   ================================================================ */
@media (max-width: 992px) {
    .nl-restaurant__banner { height: 260px; }
    .nl-restaurant__slide { flex-basis: 100%; }
    .nl-restaurant__card img { height: 240px; }
    .nl-restaurant__tabs { gap: 10px; }
    .nl-restaurant__tab { width: 150px; font-size: 16px; }
}
/* 手机端（≤640px）：餐厅横幅高度随文字自适应，杜绝长描述溢出背景上下端 */
@media (max-width: 640px) {
    .nl-restaurant__banner { height: auto; min-height: 300px; padding: 44px 0 46px; }
    .nl-restaurant__title { font-size: 26px; margin-bottom: 12px; }
    .nl-restaurant__desc { font-size: 14px; line-height: 1.9; }
    /* 高特异性：防 ≤640 全局 .nl-container { padding:0 16px } 把 body 上间距覆盖为 0（tab 贴 banner 底）。
       pb 64→40（栋生 2026-09-07 全首页间距调小），与新闻 pt56 合 96 */
    .nl-restaurant .nl-restaurant__body { padding: 48px 0 40px; }

    /* ---- 餐厅图集 移动端原生横滑改造（栋生 2026-09-08）----
       需求：去掉左右箭头 → 手指左右滑动；给滑动提示；每 tab 默认露 2 张图 */
    /* 1) 左右箭头隐藏（保留 DOM，桌面轮播逻辑不受影响） */
    .nl-restaurant__nav { display: none; }
    /* 2) 滑动提示：小圆点沿横线来回 + "左右滑动查看更多" 补位原箭头位置 */
    .nl-restaurant__hint {
        display: flex; align-items: center; justify-content: center;
        gap: 10px; margin-top: 20px;
        font-size: 12px; color: #8aa296; letter-spacing: .5px;
    }
    /* 3) 轨道从 JS transform 轮播 → 原生横向滚动 + 两两吸附：
          slide 宽 (100%-gap)/2 → 一屏正好 2 张；奇数卡为吸附点，松手停两两分组起点 */
    .nl-restaurant__carousel { -webkit-overflow-scrolling: touch; }
    .nl-restaurant__track {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        -webkit-scroll-snap-type: x mandatory;
        gap: 12px; transition: none;
        scrollbar-width: none; /* Firefox */
    }
    .nl-restaurant__track::-webkit-scrollbar { display: none; height: 0; }
    .nl-restaurant__slide { flex: 0 0 calc((100% - 12px) / 2); }
    .nl-restaurant__slide:nth-child(odd) { scroll-snap-align: start; }
    /* 4) 窄卡配矮图、标题字号收小（桌面 330 / 平板 240 高度不受影响） */
    .nl-restaurant__card img { height: 176px; }
    .nl-restaurant__card figcaption { padding: 12px 4px 14px; font-size: 13px; }
}

/* ================================================================
   【页面】首页
   【模块】那拉泉动态 .nl-news / 三列新闻卡片 hover 翻牌
   【用途】三列新闻展示，默认白卡图文，hover 翻转为深色大图风格
   【关键属性】display: grid / grid-template-columns: repeat(3, 1fr) / height: 450px
   【交互】hover 时 front 淡出隐藏，back 淡入显示，翻牌效果
   ================================================================ */
.nl-news {
    background: url(../images/bg_news.png) center / cover no-repeat;
    padding: 90px 0; position: relative;
}
.nl-news::before { content: ''; position: absolute; inset: 0; background: rgba(242, 247, 244, .94); }
.nl-news .nl-container { position: relative; z-index: 1; }
.nl-news__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.nl-news__card {
    position: relative; height: 450px; border-radius: 12px; overflow: hidden;
    background: #fff; box-shadow: 0 12px 34px rgba(14, 59, 40, .12);
}
/* 默认态（右侧白卡样式） */
.nl-news__front {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
    opacity: 1; visibility: visible; transition: opacity .35s ease, visibility .35s ease;
}
.nl-news__card:hover .nl-news__front { opacity: 0; visibility: hidden; }
.nl-news__front-img { height: 200px; overflow: hidden; }
.nl-news__front-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nl-news__front-body { padding: 20px 24px; display: flex; flex-direction: column; flex: 1; }
.nl-news__front-body h3 { font-size: 18px; font-weight: 600; color: #2d2d2d; line-height: 1.6; height: 58px; overflow: hidden; margin-bottom: 10px; }
.nl-news__front-body h3 a { color: inherit; }
.nl-news__front-body h3 a:hover { color: var(--nl-primary); }
.nl-news__front-body p { font-size: 13px; color: var(--nl-text-light); line-height: 1.8; height: 70px; overflow: hidden; flex: 1; }
.nl-news__more-link { font-size: 14px; color: #0f7256; }

/* ================================================================
   【页面】首页
   【模块】那拉泉动态 · 日期块 .nl-news__date
   【用途】新闻卡片中的日期显示，大号数字 + 文字
   【关键属性】display: flex / font-size: 30px 日期数字 / color: #0f7256
   ================================================================ */
.nl-news__date { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.nl-news__date b { font-size: 30px; font-weight: 600; color: #0f7256; line-height: 1; }
.nl-news__date span { font-size: 14px; color: var(--nl-text-light); }

/* hover 态（左侧深色大卡样式） */
.nl-news__back {
    position: absolute; inset: 0; z-index: 2;
    opacity: 0; visibility: hidden; transition: opacity .4s ease;
}
.nl-news__card:hover .nl-news__back { opacity: 1; visibility: visible; }
.nl-news__back-bg {
    position: absolute; inset: 0; background: center / cover no-repeat;
    background-color: #0e3b28;
}
.nl-news__back::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(9, 32, 22, .55) 0%, rgba(9, 32, 22, .88) 100%);
}
.nl-news__back-body {
    position: relative; z-index: 1; height: 100%;
    padding: 40px 34px; display: flex; flex-direction: column;
}
.nl-news__date--light b { color: #fff; }
.nl-news__date--light span { color: rgba(255, 255, 255, .8); }
.nl-news__back-body h3 { font-size: 19px; font-weight: 600; color: #fff; line-height: 1.7; margin-bottom: 14px; }
.nl-news__back-body h3 a { color: inherit; }
.nl-news__back-body p { font-size: 14px; color: rgba(255, 255, 255, .88); line-height: 1.9; flex: 1; }
.nl-news__more-btn {
    align-self: flex-start; margin-top: 18px;
    border: 1px solid rgba(255, 255, 255, .9); border-radius: 6px;
    color: #fff; font-size: 15px; padding: 10px 22px;
    transition: background .3s ease, color .3s ease;
}
.nl-news__more-btn:hover { background: #fff; color: #0e3b28; }

/* ================================================================
   【页面】首页
   【模块】那拉泉动态 响应式
   【用途】992px 断点适配为单列布局
   ================================================================ */
@media (max-width: 992px) {
    .nl-news__list { grid-template-columns: 1fr; gap: 20px; }
    .nl-news__card { height: 400px; }
}
/* ≤640px（栋生 2026-09-07 全首页板块间距调小）：动态 90→56（::before 淡绿底 inset 自适应），
   上接餐厅 40 + 下接 fish 44 均约 100 */
@media (max-width: 640px) {
    .nl-news { padding: 56px 0; }
}

/* ================================================================
   【页面】首页
   【模块】三文鱼小知识 .nl-fish / 文章列表 hover 下拉展开
   【用途】三列卡片布局，标题 + 箭头，hover 时下拉展开详细内容
   【关键属性】display: grid / grid-template-columns: repeat(3, 1fr) / border-radius: 14px
   【交互】hover 卡片上移 4px + 阴影增强 / 箭头闪烁指示可展开 / 内容 max-height 展开
   ================================================================ */
.nl-fish { padding: 90px 0; background: #fff; position: relative; }
.nl-fish__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.nl-fish__item {
    background: linear-gradient(165deg, #f2f8f5, #eaf3ee);
    border: 1px solid var(--nl-border); border-radius: 14px;
    overflow: hidden; transition: box-shadow .35s ease, transform .35s ease;
}
.nl-fish__item:hover { box-shadow: 0 16px 40px rgba(14, 59, 40, .14); transform: translateY(-4px); }
.nl-fish__title {
    margin: 0; padding: 24px 26px; cursor: pointer;
    font-size: 18px; font-weight: 700; color: #0f7256; line-height: 1.6;
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1px solid rgba(15, 114, 86, .12);
    transition: color .3s ease;
}
.nl-fish__item:hover .nl-fish__title { color: #0b5a43; }
.nl-fish__title-text { flex: 1; min-width: 0; }
/* ================================================================
   【页面】首页
   【模块】三文鱼小知识 · 下拉箭头 .nl-fish__arrow
   【用途】提示还有更多内容，闪动动画，hover 旋转 180° 表示展开
   【关键属性】width: 22px / height: 22px / animation: nl-arrow-down
   【交互】animation 闪烁提示 / hover 停止动画 + 旋转 180°
   ================================================================ */
.nl-fish__arrow {
    flex: 0 0 auto; width: 22px; height: 22px; color: #0f7256;
    animation: nl-arrow-down 1.6s ease-in-out infinite;
    transition: transform .35s ease;
}
.nl-fish__item:hover .nl-fish__arrow,
.nl-fish__item.is-open .nl-fish__arrow { animation: none; transform: rotate(180deg); }
@keyframes nl-arrow-down {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(4px); opacity: .5; }
}
.nl-fish__no {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
    background: #0f7256; color: #fff; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
/* ================================================================
   【页面】首页
   【模块】三文鱼小知识 · 内容展开 .nl-fish__content
   【用途】hover 时从 0 高度展开到 320px 显示详细内容
   【关键属性】max-height: 0 → 320px / opacity: 0 → 1 / cubic-bezier 过渡
   ================================================================ */
.nl-fish__content {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
}
.nl-fish__item:hover .nl-fish__content { max-height: 320px; opacity: 1; }
/* 触屏点击展开态（JS 以 inline max-height 设精确高，优先于此 640 兜底上限；
   !important 兜底：防止 iOS 点击后 sticky hover 经 (hover:none) 的 :hover 禁用规则
   （同特异性、后书写）把展开态压回 0 —— inline 双保险之外的最后防线） */
.nl-fish__item.is-open .nl-fish__content { max-height: 640px !important; opacity: 1 !important; }
.nl-fish__content p { margin: 0; padding: 20px 26px 24px; font-size: 14px; color: #4a5a52; line-height: 1.9; }

/* ================================================================
   【页面】首页
   【模块】三文鱼小知识 响应式
   【用途】992px 断点适配为单列布局
   ================================================================ */
@media (max-width: 992px) {
    .nl-fish__list { grid-template-columns: 1fr; gap: 20px; }
}
/* ≤640px（栋生 2026-09-07 全首页板块间距调小）：三文鱼小知识 90→44，
   news 56 + fish 44 = 100；fish 44 + why 56 = 100 */
@media (max-width: 640px) {
    .nl-fish { padding: 44px 0; }
}
/* 触屏设备（hover:none，如 iPhone 微信）：禁用 :hover 展开——iOS 点击后会产生
   sticky hover，若不禁用会与 JS 的 .is-open 收起打架（收了又被 hover 撑开）；
   触屏的展开/收起完全由页内 JS（click → .is-open + inline max-height）接管。
   本规则置于原 :hover 规则之后，同特异性靠后覆盖生效。 */
@media (hover: none) {
    .nl-fish__item:hover .nl-fish__content { max-height: 0; opacity: 0; }
    .nl-fish__item:hover .nl-fish__arrow { animation: nl-arrow-down 1.6s ease-in-out infinite; transform: none; }
}

/* ================================================================
   【页面】首页
   【模块】选择那拉泉 .nl-why / 左侧优势列表 + 右侧高亮卡切换
   【用途】深色背景区域，左侧点击切换优势列表，右侧显示对应详情卡片
   【关键属性】background: url(../images/bg_youshi.png) / display: flex / .nl-why__item.is-active 金色竖线指示
   【交互】左侧列表项 hover 右移 / 激活项显示金色竖线 / 右侧卡片淡入上浮切换
   ================================================================ */
.nl-why {
    padding: 90px 0; position: relative;
    background: url(../images/bg_youshi.png) center / cover no-repeat;
}
.nl-why__shade {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(9, 32, 22, .82) 0%, rgba(9, 32, 22, .55) 55%, rgba(9, 32, 22, .35) 100%);
}
.nl-why .nl-container { position: relative; z-index: 1; }
/* 「选择那拉泉」标题改生态绿 */
.nl-why .nl-section-title--light { color: #35b882; }
.nl-section-subtitle--light { color: rgba(255, 255, 255, .85); }
/* 深底板块的头部渐隐线改为浅色 */
.nl-why .nl-section-head::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0));
}
/* icewater 左栏头：标题绿 / 副标深色可读（原 .nl-icewater__title 样式废弃） */
.nl-section-head--icewater { align-items: center; }
.nl-icewater__content .nl-section-head { margin-bottom: 40px; }

.nl-why__body {
    display: flex; align-items: center; gap: 40px;
    min-height: 300px;
}
/* 左侧优势列表（蓝湖 paragraph_9） */
.nl-why__list { flex: 0 0 240px; display: flex; flex-direction: column; gap: 4px; }
.nl-why__item {
    text-align: left; border: none; background: none; cursor: pointer;
    font-size: 18px; color: rgba(255, 255, 255, .82); padding: 10px 0;
    font-weight: 500; transition: all .3s ease; position: relative;
}
.nl-why__item:hover { color: #fff; padding-left: 8px; }
.nl-why__item.is-active { color: #fff; font-weight: 700; padding-left: 14px; }
.nl-why__item.is-active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 22px; border-radius: 3px; background: #d9a441;
}
/* 竖线分隔（蓝湖 image_24：212×1 竖线） */
.nl-why__divider { flex: 0 0 1px; align-self: stretch; background: rgba(255, 255, 255, .35); }

/* 右侧高亮卡（蓝湖 section_10） */
.nl-why__stage { flex: 1; min-width: 0; position: relative; min-height: 260px; }
.nl-why__card {
    position: absolute; inset: 0;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease, visibility .45s ease;
}
.nl-why__card.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.nl-why__card h3 { font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 16px; }
.nl-why__desc {
    font-size: 18px; color: rgba(255, 255, 255, .92); line-height: 1.9;
    /* 一行 50 个字：中文等宽 1em，50em 宽即每行 50 字，超出自动换行 */
    width: 50em; max-width: 100%;
    white-space: normal; overflow: visible;
}
.nl-why__desc p { margin: 0; font-size: inherit; color: inherit; line-height: inherit; }

@media (max-width: 992px) {
    .nl-why__body { flex-direction: column; align-items: flex-start; }
    .nl-why__divider { display: none; }
    .nl-why__stage { width: 100%; }
}
/* ≤640px（栋生 2026-09-07 全首页板块间距调小）：选择那拉泉 90→56，
   fish 44 + why 56 = 100；底部 56 与页脚分隔 */
@media (max-width: 640px) {
    .nl-why { padding: 56px 0; }
}

/* ================================================================
   【页面】首页
   【模块】主营产品 .nl-products / 左展台大图 + 右信息面板 + 底部缩略导航条
   【用途】画廊式产品展示，含顶部波浪装饰、产品大图、规格价格、缩略图导航
   【关键属性】display: grid / grid-template-columns: minmax(0, 620px) minmax(0, 1fr) / 顶部波浪动画
   【交互】缩略图 hover 上移 + 边框变色 / 激活项绿色渐变背景 / 按钮 hover 上移 + 箭头右滑
   ================================================================ */
.nl-products {
    background: #f7f7f7;
    padding: 90px 0 110px; position: relative; overflow: hidden;
}
.nl-products .nl-container { position: relative; z-index: 1; }

/* ================================================================
   【页面】首页
   【模块】主营产品 · 顶部波浪装饰 .nl-products__wave
   【用途】板块顶部的动态波浪 SVG 装饰，两层叠加，反向运动增加层次感
   【关键属性】position: absolute / height: 90px / animation: nlWaveMove
   【交互】两层波浪以不同速度和方向平移，产生水波流动效果
   ================================================================ */
.nl-products__wave {
    position: absolute; top: -1px; left: 0; right: 0; height: 90px; z-index: 2;
    overflow: hidden; pointer-events: none;
}
.nl-products__wave svg {
    width: 200%; height: 100%; display: block;
    animation: nlWaveMove 9s linear infinite;
}
.nl-products__wave--2 { opacity: .7; }
.nl-products__wave--2 svg { animation-duration: 14s; animation-direction: reverse; }
@keyframes nlWaveMove {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ================================================================
   【页面】首页
   【模块】主营产品 · 板块头部 .nl-products__hd
   【用途】产品区域标题，与全局 .nl-section-head 样式一致，主标+副标+渐隐线
   【关键属性】display: flex / gap: 26px / ::after 渐隐装饰线
   ================================================================ */
.nl-products__hd {
    display: flex;
    align-items: baseline;
    gap: 26px;
    margin-bottom: 54px;
    position: relative;
}
.nl-products__hd::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 114, 86, .35), rgba(15, 114, 86, 0));
    margin-left: 10px;
    transform: translateY(-6px);
}
.nl-products__title { font-size: 40px; font-weight: 700; color: #0f7256; line-height: 1.3; letter-spacing: 2px; flex-shrink: 0; }
.nl-products__subtitle { font-size: 20px; color: #55705f; font-weight: 400; letter-spacing: 1px; flex-shrink: 0; margin-bottom: 0; }
.nl-products__hd-line { display: none; }

/* ================================================================
   【页面】首页
   【模块】主营产品 · 主体网格 .nl-products__grid
   【用途】左展台大图 + 右信息面板的双栏网格布局
   【关键属性】display: grid / grid-template-columns: minmax(0, 620px) minmax(0, 1fr) / gap: 76px
   ================================================================ */
.nl-products__grid {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
    column-gap: 76px; row-gap: 64px;   /* 行距 = 原 nav margin-top 64px */
    align-items: center;
}
/* 缩略导航条随 DOM 移入 grid：桌面/平板恒为跨满两列的整行（第二行），间距交给 row-gap */
.nl-products__grid .nl-products__nav { grid-column: 1 / -1; margin-top: 0; }
/* ================================================================
   【页面】首页
   【模块】主营产品 · 展台 .nl-products__show / .nl-products__plate / .nl-products__hero
   【用途】左侧产品大图展示区域，1:1 比例方形，产品图透明底自然融合
   【关键属性】aspect-ratio: 1 / 1 / max-width: 620px / object-fit: contain
   ================================================================ */
.nl-products__show { position: relative; }
.nl-products__plate {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 620px;
    background: transparent;      /* 产品图本身近白底，与板块 #f7f7f7 自然融合，不设底色/描边 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.nl-products__hero {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    transition: opacity .5s ease;
}

/* ================================================================
   【页面】首页
   【模块】主营产品 · 信息面板 .nl-products__info
   【用途】右侧产品详情：英文名、中文名、规格标签、价格、简介、购买按钮
   【关键属性】display: flex / flex-direction: column / max-width: 560px
   【交互】按钮 hover 上移 3px + 投影增强 + 箭头右滑
   ================================================================ */
.nl-products__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 560px;
}
.nl-products__eyebrow {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}
.nl-products__eyebrow-en {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2em;
    color: #2f9e6e;
    text-transform: uppercase;
}
.nl-products__eyebrow-cn {
    font-size: 13px;
    letter-spacing: .28em;
    color: #8aa394;
    text-transform: uppercase;
}
.nl-products__name {
    font-size: 44px;
    font-weight: 700;
    color: #14352a;
    letter-spacing: 2px;
    margin: 0 0 14px;
    line-height: 1.25;
    transition: opacity .4s ease;
}
.nl-products__spec {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #0f7256;
    background: rgba(47, 158, 110, .10);
    border: 1px solid rgba(47, 158, 110, .25);
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
    letter-spacing: 1px;
    transition: opacity .4s ease;
}
.nl-products__price {
    display: flex;
    align-items: baseline;
    margin-bottom: 22px;
    transition: opacity .4s ease;
}
.nl-products__price em { font-style: normal; font-size: 20px; color: #2f9e6e; font-weight: 700; }
.nl-products__price b { font-size: 46px; font-weight: 800; color: #0f7256; margin: 0 8px; letter-spacing: 1px; }
.nl-products__price span { font-size: 17px; color: #5e5e5e; letter-spacing: 1px; }
.nl-products__tip {
    font-size: 15px;
    color: #5e7468;
    line-height: 1.9;
    margin: 0 0 28px;
    border-left: 3px solid rgba(47, 158, 110, .55);
    padding-left: 16px;
}
.nl-products__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f9e6e, #1b6b46);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    box-shadow: 0 12px 28px -10px rgba(27, 107, 70, .55);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.nl-products__btn:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -12px rgba(27, 107, 70, .6); color: #fff; }
.nl-products__btn::after { content: '→'; font-size: 18px; transition: transform .3s ease; }
.nl-products__btn:hover::after { transform: translateX(4px); }

/* ================================================================
   【页面】首页
   【模块】主营产品 · 缩略导航条 .nl-products__nav / .nl-products__thumbs
   【用途】底部产品缩略图导航，左右箭头 + 四列网格缩略卡
   【关键属性】display: grid / grid-template-columns: repeat(4, 1fr) / gap: 18px
   【交互】缩略卡 hover 上移 3px + 边框变绿 / 激活项绿色渐变背景 + 投影
   ================================================================ */
.nl-products__nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 64px;
}
.nl-products__arrow {
    flex: 0 0 52px;
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 1px solid rgba(15, 114, 86, .35);
    background: #fff;
    color: #0f7256;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
}
.nl-products__arrow:hover { background: #0f7256; color: #fff; transform: scale(1.06); box-shadow: 0 10px 22px -8px rgba(15, 114, 86, .5); }
.nl-products__arrow svg { width: 24px; height: 24px; }
.nl-products__thumbs {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    min-width: 0;
}
.nl-products__th {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: #fff;
    border: 1px solid rgba(15, 114, 86, .16);
    border-radius: 16px;
    padding: 10px 14px 10px 10px;
    cursor: pointer;
    transition: all .32s ease;
    box-shadow: 0 2px 8px rgba(20, 60, 40, .04);
}
.nl-products__th:hover { border-color: rgba(47, 158, 110, .6); transform: translateY(-3px); box-shadow: 0 14px 28px -10px rgba(20, 60, 40, .18); }
.nl-products__th.is-active {
    border-color: #2f9e6e;
    background: linear-gradient(135deg, #ffffff, #edf7f1);
    box-shadow: 0 14px 30px -10px rgba(47, 158, 110, .35);
    transform: translateY(-3px);
}
.nl-products__th-img {
    flex: 0 0 62px;
    width: 62px; height: 62px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f8f5;
    display: flex; align-items: center; justify-content: center;
}
.nl-products__th-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.nl-products__th:hover .nl-products__th-img img { transform: scale(1.08); }
.nl-products__th-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nl-products__th-body b { font-size: 15px; color: #1c3a2e; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl-products__th-body i { font-style: normal; font-size: 14px; color: #0f7256; font-weight: 700; }
.nl-products__th.is-active .nl-products__th-body b { color: #0f7256; }

@media (max-width: 1200px) {
    .nl-products__grid { gap: 48px; }
    .nl-products__name { font-size: 36px; }
    .nl-products__price b { font-size: 38px; }
    .nl-products__th { padding: 8px 10px 8px 8px; gap: 10px; }
    .nl-products__th-img { flex: 0 0 52px; width: 52px; height: 52px; }
    .nl-products__th-body b { font-size: 13px; }
    .nl-products__th-body i { font-size: 12px; }
}
@media (max-width: 992px) {
    .nl-products__grid { grid-template-columns: 1fr; gap: 44px; }
    /* 平板单列：grid 行距 44 + 此 20 = 与原 nav 上方 64px 呼吸间距一致 */
    .nl-products__grid .nl-products__nav { margin-top: 20px; }
    .nl-products__plate { max-width: 520px; }
    .nl-products__info { max-width: none; }
    .nl-products__thumbs { grid-template-columns: repeat(2, 1fr); }
    .nl-products__th:last-child:nth-child(odd) { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 640px) {
    .nl-products__hd {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 28px;
    }
    .nl-products__hd::after { display: none; }
    .nl-products__title { font-size: 24px; }
    .nl-products__subtitle { font-size: 15px; letter-spacing: 1px; line-height: 1.6; max-width: 100%; }
    .nl-products__plate { border-radius: 20px; }
    .nl-products__name { font-size: 30px; }
    .nl-products__price b { font-size: 34px; }
    /* 手机端重排：主图(order1) → 四个产品切换卡(order2) → 名称/价格(order3)。
       切换卡紧贴主图正下方，点卡切产品时主图始终在指上方可见。 */
    .nl-products__grid { display: flex; flex-direction: column; gap: 20px; }
    .nl-products__show { order: 1; }
    .nl-products__nav { order: 2; margin-top: 0; width: 100%; }
    .nl-products__info { order: 3; align-items: flex-start; }
    .nl-products__arrow { display: none; }          /* 手机端隐藏左右大箭头，点卡切换即可 */
    .nl-products__thumbs { flex: none; width: 100%; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .nl-products__th { padding: 8px; gap: 10px; }
    .nl-products__th-img { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; }
    .nl-products__th-body b { font-size: 13px; }
    .nl-products__th-body i { font-size: 12px; }
    /* 手机端（栋生 2026-09-07 全首页板块间距调小）：
       主营产品 → 泉边度假 = pb60 + 度假 pt40 = 100（保留）；顶部 pt 90→52
       与波浪装饰高度同步收窄（wave 90→52），避免波浪下压到板块标题；
       泉边度假底部 90→64，收紧与餐厅横幅的间距 */
    .nl-products { padding: 52px 0 60px; }
    .nl-products__wave { height: 52px; }
    .nl-resort { padding: 40px 0 64px; }
}

/* ================================================================
   【页面】全站
   【模块】页脚 .nl-footer / 品牌深绿渐变 + 四栏网格 + 版权条 + 回到顶部
   【用途】全站页脚，含品牌信息、导航链接、二维码、版权信息
   【关键属性】background: radial-gradient + linear-gradient / display: grid / grid-template-columns: 4 栏
   【交互】链接 hover 变色 / 回到顶部按钮 hover 变绿
   ================================================================ */
.nl-footer { background: #0b2f20; }
/* 主区：深绿渐变背景，白色文字 */
.nl-footer__main {
    background:
        radial-gradient(120% 100% at 85% -10%, rgba(47, 158, 110, .22) 0%, transparent 55%),
        linear-gradient(180deg, #0d3a28 0%, #0b2f20 70%, #0a291c 100%);
    color: rgba(255, 255, 255, .78);
    padding: 54px 0 48px;
}
.nl-footer .nl-container { position: relative; }

/* ================================================================
   【页面】全站
   【模块】Footer · 品牌语条 .nl-footer__slogan
   【用途】居中品牌标语，两侧金色渐变装饰线
   【关键属性】display: flex / justify-content: center / gap: 22px
   ================================================================ */
.nl-footer__slogan {
    display: flex; align-items: center; justify-content: center; gap: 22px; margin-bottom: 42px;
}
.nl-footer__slogan b {
    font-size: 22px; font-weight: 600; color: #cdeeda;
    letter-spacing: 3px; white-space: nowrap;
}
.nl-footer__slogan-line {
    flex: 1; max-width: 320px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .7), transparent);
}

/* ================================================================
   【页面】全站
   【模块】Footer · 四栏网格 .nl-footer__top
   【用途】品牌信息 / 快速了解 / 内容中心 / 扫码关注 四栏布局
   【关键属性】display: grid / grid-template-columns: minmax(320px,1.4fr) 1fr 1fr minmax(250px,.9fr) / gap: 44px
   ================================================================ */
.nl-footer__top {
    display: grid;
    grid-template-columns: minmax(320px, 1.4fr) 1fr 1fr minmax(250px, .9fr);
    gap: 44px; align-items: start;
}

/* 品牌信息 */
.nl-footer__head {
    display: flex; align-items: center; gap: 16px; margin-bottom: 20px; text-decoration: none;
}
.nl-footer__logo {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; background: #fff; border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28); padding: 6px;
}
.nl-footer__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nl-footer__word {
    display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.nl-footer__word b { font-size: 22px; font-weight: 800; color: #fff; }
.nl-footer__word i { font-size: 13px; color: rgba(255, 255, 255, .5); letter-spacing: 4px; text-transform: uppercase; }
.nl-footer__brief {
    font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .65);
    margin: 0 0 22px; max-width: 400px;
}
.nl-footer__contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nl-footer__contact li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.nl-footer__contact i {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center;
}
.nl-footer__contact i svg { width: 17px; height: 17px; }
.nl-footer__ct { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nl-footer__ct span { font-size: 12px; color: rgba(255, 255, 255, .45); }
.nl-footer__contact a { font-size: 15px; font-weight: 600; color: #63d6a0; text-decoration: none; }
.nl-footer__contact b { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .85); }
.nl-footer__contact a:hover { color: #63d6a0; }

/* 导航列 */
.nl-footer__nav h4,
.nl-footer__qr h4 {
    font-size: 17px; font-weight: 700; color: #fff;
    margin: 0 0 22px; padding-bottom: 12px; position: relative;
}
.nl-footer__nav h4::after,
.nl-footer__qr h4::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 32px; height: 2px; background: #63d6a0; border-radius: 1px;
}
.nl-footer__nav ul { list-style: none; margin: 0; padding: 0; }
.nl-footer__nav li { margin-bottom: 12px; }
.nl-footer__nav li a {
    font-size: 14px; color: rgba(255, 255, 255, .65); text-decoration: none;
    display: inline-block; transition: all .25s;
}
.nl-footer__nav li a::before { content: "›"; margin-right: 8px; color: #63d6a0; }
.nl-footer__nav li a:hover { color: #fff; transform: translateX(4px); }

/* ================================================================
   【页面】全站
   【模块】Footer · 二维码区 .nl-footer__ewm
   【用途】微信公众号/小程序二维码展示
   【关键属性】display: flex / gap: 16px
   ================================================================ */
.nl-footer__ewm { display: flex; gap: 16px; }
.nl-footer__ewm-item { text-align: center; }
.nl-footer__ewm-img {
    width: 120px; height: 120px; background: #fff; border-radius: 10px;
    padding: 8px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.nl-footer__ewm-img img { width: 100%; height: 100%; object-fit: contain; }
.nl-footer__ewm-item span { font-size: 13px; color: rgba(255, 255, 255, .72); letter-spacing: 1px; }

/* ================================================================
   版权条：深色底 + 全部内容居中对齐
   ================================================================ */
.nl-footer__bottom {
    background: #081f15;
    color: rgba(255, 255, 255, .55);
    padding: 15px 0;
    font-size: 13px;
    position: relative;
}
.nl-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nl-footer__copy {
    display: inline;
}
.nl-footer__beian {
    display: inline;
}
.nl-footer__bottom a {
    color: rgba(255, 255, 255, .55);
    margin: 0 4px;
    text-decoration: none;
}
.nl-footer__bottom a:hover { color: #63d6a0; }
/* 回到顶部按钮：右侧绝对定位，不干扰居中流 */
.nl-footer__toplink {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.nl-footer__toplink svg { width: 18px; height: 18px; }
.nl-footer__toplink:hover { background: #2f9e6e; border-color: #2f9e6e; color: #fff; }

/* ================================================================
   【页面】全站
   【模块】Footer 响应式
   【用途】1100px / 640px 断点适配四栏折叠为两栏再折叠为单栏
   ================================================================ */
@media (max-width: 1100px) {
    .nl-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
    .nl-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .nl-footer__slogan b { font-size: 16px; letter-spacing: 1px; }
    /* 手机端：品牌(整行) → 「快速了解」「内容中心」并排两列 → 二维码(整行) */
    .nl-footer__top { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
    .nl-footer__qr { grid-column: 1 / -1; }
    /* 手机端「扫码关注」整行展示：标题与两个二维码水平居中（栋生 2026-09-07） */
    .nl-footer__qr h4 { text-align: center; }
    .nl-footer__qr h4::after { left: 50%; transform: translateX(-50%); }
    .nl-footer__ewm { justify-content: center; }
    .nl-footer__bottom-inner { justify-content: center; text-align: center; }
    .nl-footer__toplink {
        position: static;
        transform: none;
        margin: 8px auto 0;
    }
}

/* ================================================================
   【页面】全站
   【模块】全局响应式
   【用途】1200px / 992px / 640px 三档全站断点，调整布局、字号、间距
   【关键属性】@media (max-width: 1200px) / 992px / 640px
   ================================================================ */
@media (max-width: 1200px) {
    .nl-products__list { grid-template-columns: repeat(3, 1fr); }
    .nl-about__body { flex-direction: column; }
    .nl-about__stats { width: 100%; }
}
@media (max-width: 992px) {
    .nl-header__inner { flex-wrap: wrap; height: auto; padding: 12px 0; }
    .nl-nav { order: 3; width: 100%; margin-top: 10px; }
    .nl-nav > ul { justify-content: space-around; }
    .nl-nav > ul > li > a { padding: 14px 10px; }
    .nl-nav > ul > li > a::after { bottom: 8px; }
    .nl-header__phone { margin-left: auto; }
    .nl-icewater__inner { flex-direction: column; gap: 40px; }
    .nl-icewater__content { flex: 1 1 auto; width: 100%; }
    .nl-icewater__media img, .nl-icewater__media video { height: 420px; }
    .nl-breed__grid, .nl-resort__rooms,
    .nl-restaurant__dishes, .nl-news__list, .nl-why__list { grid-template-columns: repeat(2, 1fr); }
    .nl-products__list { grid-template-columns: repeat(2, 1fr); }
    .nl-section-title { font-size: 30px; }
}
@media (max-width: 640px) {
    .nl-container { padding: 0 16px; }
    .nl-breed__grid, .nl-resort__rooms,
    .nl-restaurant__dishes, .nl-news__list, .nl-why__list, .nl-products__list { grid-template-columns: 1fr; }
    .nl-breed__intro { flex-direction: column; }
    .nl-section-title { font-size: 24px; }
    .nl-header__phone { display: none; }
    /* 全站标题区（仅手机端）：副标题移到主标题下方竖排。
       根治窄屏 flex 同行 + flex-shrink:0 造成副标题超宽、页面左右滑动 */
    .nl-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 28px;
    }
    .nl-section-head--center { align-items: center; text-align: center; }
    .nl-section-head::after { display: none; }
    .nl-section-subtitle {
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1.6;
        max-width: 100%;
    }
    /* 首页「关于那拉泉」统计数字手机端调小（栋生 2026-09-08）：
       三列网格每格约 110px，30px 数字偏大 → 24px，单位/标签同步收一点 */
    .nl-stat__num { font-size: 12px; margin-bottom: 5px; }
    .nl-stat__num b { font-size: 24px; }
    .nl-stat__label { font-size: 11px; }
}