/* ============================================================
   无锡瑞宏利环保工程有限公司 · 官网模板 自定义样式
   依赖：Tailwind（本地 assets/js/tailwind.js）+ Font Awesome（本地）
   设计规范：主绿 #1F9D55 / 深绿 #157A41 / 信任蓝 #0F3D5E / 行动橙 #FF5A1F
   ============================================================ */

:root {
  --brand: #1F9D55;
  --brand-d: #157A41;
  --navy: #0F3D5E;
  --navy-d: #0A2A41;
  --orange: #FF5A1F;
  --orange-d: #E24A12;
  --bg: #F6F8FA;
  --ink: #1A2430;
  --muted: #5B6B7B;
  --line: #E3E8EE;
}

/* 平滑滚动仅在桌面端启用：移动端触摸滚动的平滑回跳会导致 sticky 头部抖动与点击落空 */
@media (min-width: 1024px) { html { scroll-behavior: smooth; } }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 通用 ---------- */
.container-1600 { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) { .container-1600 { padding-left: 2rem; padding-right: 2rem; } }

.sec-pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
@media (max-width: 767px) { .sec-pad { padding-top: 3rem; padding-bottom: 3rem; } }

.sec-eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; font-weight:700; letter-spacing:.14em; color:var(--brand); text-transform:uppercase; }
.sec-eyebrow::before { content:""; width:26px; height:2px; background:var(--orange); border-radius:2px; }

.card-hover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -14px rgba(15,61,94,.22); }

.text-gradient { background: linear-gradient(90deg,var(--brand),var(--brand-d)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 区块标题通用 */
.sec-head h2 { font-weight: 800; letter-spacing: .01em; }
.sec-head p.sub { color: var(--muted); }

/* 波纹/水流装饰 */
.wave-divider { position: relative; }

/* ---------- 顶部导航 ---------- */
.topbar { background: var(--navy-d); color: rgba(255,255,255,.82); font-size: .82rem; }
.topbar a:hover { color: #fff; }

.main-nav { background:#fff; border-bottom:1px solid var(--line); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:transform; }

/* 防止任何意外横向溢出产生滚动条并破坏 sticky 定位（clip 裁剪但不创建滚动容器） */
html, body { overflow-x: clip; }
.nav-link { position: relative; font-weight:600; color:#22303E; padding:.55rem .05rem; transition:color .25s; }
.nav-link::after { content:""; position:absolute; left:0; bottom:0; width:0; height:3px; border-radius:3px; background:var(--brand); transition:width .3s ease; }
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color: var(--brand); }

.dropdown { position:relative; }
.dropdown-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(12px); min-width:232px; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 40px -14px rgba(15,61,94,.28);
  padding:.5rem; opacity:0; visibility:hidden; transition:all .28s ease; z-index:60; }
.dropdown:hover .dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-menu a { display:flex; align-items:center; gap:.55rem; padding:.62rem .9rem; border-radius:8px; font-size:.92rem; color:#2A3846; }
.dropdown-menu.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); width:560px; min-width:560px; }
@media (max-width: 1279px) { .dropdown-menu.grid-2 { width:520px; min-width:520px; } }
.dropdown-menu a i { color:var(--brand); font-size:.78rem; }
.dropdown-menu a:hover { background:var(--bg); color:var(--brand); }

/* 移动端菜单 */
.mobile-menu { position:fixed; inset:0; z-index:40; max-height:0; overflow:hidden;
  background:#fff; padding-top:0; padding-bottom:0; transition:max-height .4s ease, padding .4s ease;
  box-shadow:0 18px 40px -18px rgba(10,42,65,.35); }
.mobile-menu.open { max-height:100vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-top:69px; padding-bottom:60px; }
.mobile-menu a { display:block; padding:.8rem 1.25rem; font-weight:600; color:#22303E; border-bottom:1px dashed #EEF1F5; }
.mobile-menu a.active { color: var(--brand); }
.mobile-menu a i { width:1.4rem; color:var(--brand); }

/* 头部在滚动后的状态 */
.main-nav.scrolled { box-shadow: 0 6px 24px -12px rgba(15,61,94,.25); }

/* ---------- Banner 轮播（PC / 移动端 分开两套） ---------- */
.banner-carousel { position:relative; overflow:hidden; }
.banner-track { display:flex; height:100%; transition:transform .65s cubic-bezier(.4,0,.2,1); }
.banner-slide { flex:0 0 100%; position:relative; }
.banner-slide img { width:100%; height:100%; object-fit:cover; display:block; }

.banner-dot { width:11px; height:11px; border-radius:9999px; background:rgba(255,255,255,.5); cursor:pointer; transition:all .3s; }
.banner-dot.active { width:30px; background:#fff; }

.banner-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:9999px;
  background:rgba(15,61,94,.35); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .3s; backdrop-filter: blur(4px); z-index:5; }
.banner-arrow:hover { background:var(--orange); }
.banner-arrow.prev { left:1.1rem; }
.banner-arrow.next { right:1.1rem; }

/* banner 文案面板（覆盖在图上，PC） */
.banner-overlay { position:absolute; inset:auto 0 0 0; z-index:6;
  background:linear-gradient(180deg, rgba(10,42,65,0) 0%, rgba(10,42,65,.55) 72%, rgba(10,42,65,.78) 100%); }

/* ---------- 数字滚动 ---------- */
.counter-num { font-variant-numeric: tabular-nums; }

/* ---------- 设备滚动条 ---------- */
.marquee-track { display:flex; gap:1rem; width:max-content; animation:marquee 26s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform:translateX(0);} to { transform:translateX(-50%);} }

/* ---------- 进入视口动画（内容默认可见；滚动淡入仅作渐进增强，避免任何环境下内容透明） ---------- */
.reveal { opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
.reveal.visible { opacity:1; transform:none; }
@media (max-width:768px) { .reveal { transition:opacity .35s ease, transform .35s ease; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ---------- 服务流程 ---------- */
.step-num { width:56px; height:56px; border-radius:9999px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; font-weight:800; box-shadow:0 8px 20px -8px rgba(31,157,85,.6); position:relative; z-index:2; }
.step-line::before { content:""; position:absolute; top:28px; left:calc(50% + 44px); right:calc(-50% + 44px); height:2px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px); }

/* ---------- 案例筛选 ---------- */
.filter-btn { padding:.45rem 1.05rem; border-radius:9999px; font-size:.88rem; font-weight:600; color:#46566A; border:1px solid var(--line); background:#fff; transition:all .25s; cursor:pointer; }
.filter-btn:hover { border-color:var(--brand); color:var(--brand); }
.filter-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; }
.case-card { transition:opacity .4s ease, transform .4s ease; }
.case-card.hide, .case-card.paged { display:none; }

/* ---------- FAQ 折叠 ---------- */
.faq-item { border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden; transition:border-color .3s; }
.faq-item.open { border-color: var(--brand); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.05rem 1.25rem; text-align:left; font-weight:700; color:var(--navy-d); cursor:pointer; }
.faq-q i { color:var(--brand); transition:transform .3s; flex:none; }
.faq-item.open .faq-q i { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s ease; }
.faq-a-inner { padding:0 1.25rem 1.15rem; color:var(--muted); font-size:.93rem; line-height:1.85; }

/* ---------- 新闻页 Tab ---------- */
.news-tab { padding:.5rem 1.15rem; border-radius:9999px; font-weight:600; font-size:.9rem; color:#46566A; cursor:pointer; transition:all .25s; }
.news-tab.active { background:var(--brand); color:#fff; }
.news-panel { display:none; }
.news-panel.active { display:block; animation:fadeIn .45s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- 右侧悬浮客服（参考 foshandajiaoniu.com） ---------- */
.float-plugin { position:fixed; right:1rem; top:50%; transform:translateY(-50%); z-index:70; display:flex; flex-direction:column; gap:.6rem; }
.float-item { position:relative; width:46px; height:46px; border-radius:12px; background:#fff; color:var(--navy);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem; box-shadow:0 6px 18px -6px rgba(15,61,94,.35);
  cursor:pointer; transition:all .28s; border:1px solid var(--line); }
.float-item:hover { background:var(--brand); color:#fff; border-color:var(--brand); transform:translateY(-3px); }
.float-item .tip { position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px); white-space:nowrap;
  background:var(--navy-d); color:#fff; font-size:.8rem; padding:.38rem .8rem; border-radius:8px; opacity:0; visibility:hidden; transition:all .25s; }
.float-item .tip::after { content:""; position:absolute; left:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-left-color:var(--navy-d); }
.float-item:hover .tip { opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }

.float-wechat:hover { background:var(--brand); }
.wechat-pop { position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-50%) translateX(8px); width:150px;
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:.75rem; text-align:center;
  box-shadow:0 14px 34px -10px rgba(15,61,94,.3); opacity:0; visibility:hidden; transition:all .28s; z-index:71; }
.float-item:hover .wechat-pop { opacity:1; visibility:visible; transform:translateY(-50%) translateX(0); }
.wechat-pop img { width:100%; height:auto; border-radius:8px; }
.wechat-pop span { display:block; margin-top:.4rem; font-size:.74rem; color:var(--muted); }

.float-phone-item { background:var(--orange); color:#fff; border-color:var(--orange); }
.float-phone-item:hover { background:var(--orange-d); }
.float-phone-item .tip { background:var(--orange-d); }
.float-phone-item .tip::after { border-left-color:var(--orange-d); }

/* ---------- 右下角弹窗（PC） ---------- */
.popup-bubble { position:fixed; right:1.25rem; bottom:1.25rem; z-index:80; display:none; align-items:center; gap:.55rem;
  background:var(--orange); color:#fff; padding:.65rem 1.15rem; border-radius:9999px; font-weight:700; font-size:.92rem;
  box-shadow:0 10px 24px -8px rgba(255,90,31,.55); cursor:pointer; }
.popup-card { position:fixed; right:1.25rem; bottom:1.25rem; z-index:80; width:318px; background:#fff; border-radius:16px;
  box-shadow:0 24px 60px -18px rgba(10,42,65,.45); border:1px solid var(--line); overflow:hidden;
  transform:translateY(24px) scale(.96); opacity:0; visibility:hidden; transition:all .4s cubic-bezier(.34,1.56,.64,1); }
.popup-card.show { transform:none; opacity:1; visibility:visible; }
.popup-head { background:linear-gradient(120deg,var(--brand),var(--brand-d)); color:#fff; padding:1rem 1.15rem; position:relative; }
.popup-head h4 { font-size:1.02rem; font-weight:800; margin:0; }
.popup-head p { font-size:.76rem; opacity:.85; margin:.15rem 0 0; }
.popup-close { position:absolute; top:.65rem; right:.75rem; width:26px; height:26px; border-radius:9999px; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:.8rem; cursor:pointer; transition:background .25s; }
.popup-close:hover { background:rgba(255,255,255,.38); }
.popup-body { padding:1.1rem 1.15rem 1.25rem; }
.popup-phone { display:flex; align-items:center; justify-content:center; gap:.6rem; background:var(--orange); color:#fff;
  padding:.8rem; border-radius:12px; font-size:1.25rem; font-weight:800; transition:background .25s; }
.popup-phone:hover { background:var(--orange-d); color:#fff; }
.popup-wechat-row { display:flex; align-items:center; gap:.8rem; margin-top:.9rem; padding:.65rem .8rem; background:var(--bg); border-radius:12px; }
.popup-wechat-row img { width:58px; height:58px; border-radius:8px; flex:none; }
.popup-wechat-row .t { font-size:.84rem; font-weight:700; color:var(--navy-d); }
.popup-wechat-row .s { font-size:.74rem; color:var(--muted); margin-top:.15rem; }
.popup-link { display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:.8rem; padding:.72rem; border:1px solid var(--brand);
  color:var(--brand); border-radius:12px; font-weight:700; font-size:.92rem; transition:all .25s; }
.popup-link:hover { background:var(--brand); color:#fff; }

@media (min-width: 768px) {
  .popup-card { display: block; }
  .popup-bubble { display: flex; }
}

/* ---------- 移动端底部悬浮按钮 ---------- */
.mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:75; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -6px 20px -8px rgba(15,61,94,.18);
  display:grid; grid-template-columns:repeat(4,1fr); padding-bottom:env(safe-area-inset-bottom); }
.mobile-bottom-nav a { display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.55rem 0 .5rem; font-size:.7rem; color:#7A8794; position:relative; }
.mobile-bottom-nav a i { font-size:1.25rem; }
.mobile-bottom-nav a.active { color:var(--brand); }
.mobile-bottom-nav a.active::before { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:34px; height:3px; border-radius:3px; background:var(--brand); }
.mobile-bottom-nav a.call { background:var(--orange); color:#fff; font-weight:700; }
.mobile-bottom-nav a.call i { color:#fff; }
.mobile-bottom-nav a.call.active::before { background:#fff; }

/* 页面底部给移动端悬浮栏留白 */
@media (max-width: 767px) { body { padding-bottom: 58px; } }

/* ---------- 列表页 ---------- */
.crumb { font-size:.85rem; color:var(--muted); }
.crumb a:hover { color:var(--brand); }

/* ---------- 文章详情 ---------- */
.article-body { font-size:1rem; line-height:2; color:#33424F; }
.article-body h2 { font-size:1.35rem; font-weight:800; color:var(--navy-d); margin:1.8rem 0 .8rem; }
.article-body h3 { font-size:1.12rem; font-weight:800; color:var(--navy-d); margin:1.5rem 0 .6rem; }
.article-body p { margin: .9rem 0; }
.article-body ul { margin:.9rem 0; padding-left:1.3rem; list-style:disc; }
.article-body li { margin:.35rem 0; }
.article-body .tip-box { background:#EEF4F0; border-left:4px solid var(--brand); border-radius:8px; padding:.9rem 1.1rem; margin:1.2rem 0; color:#2E5B3F; font-size:.94rem; }

/* ---------- 表单 ---------- */
.form-field input, .form-field textarea, .form-field select { width:100%; border:1px solid var(--line); border-radius:10px; padding:.72rem .95rem;
  font-size:.94rem; background:#fff; transition:border-color .25s, box-shadow .25s; outline:none; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(31,157,85,.14); }
.form-field label { font-size:.88rem; font-weight:600; color:var(--navy-d); margin-bottom:.4rem; display:block; }
.form-msg { display:none; }

/* ---------- 404 ---------- */
.big-404 { font-size: clamp(7rem, 22vw, 15rem); line-height:1; font-weight:900; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:#EEF1F5; }
::-webkit-scrollbar-thumb { background:#B9C6D2; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand); }

/* 选中色 */
::selection { background: rgba(31,157,85,.2); }

/* ---------- 案例详情页：多案例区块按 id 切换 ---------- */
.case-detail-block { display:none; }
.case-detail-block.active { display:block; }

/* ---------- 案例分页按钮 ---------- */
.pager-btn {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; color: #2A3846;
  font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: all .25s;
}
.pager-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.pager-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(31,157,85,.25); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
/* 评价详情页多块显隐 */
.review-detail-block { display:none; }
.review-detail-block.active { display:block; }