/* 官网运行时补充样式（设计稿 portal.css 之外，仅用于交互状态与骨架辅助，不改动设计稿本身）
   1) 留资表单提交后的提示条
   2) 空列表提示
   3) 页签面板显隐（配合 portal.js）
   4) 错误页
   5) 首屏动效（设计稿首页 <style> 里的关键帧，页面级样式统一收到这里）
   6) 合规视觉优化（2026-09-30 助贷新规后）：沉稳金色、克制层次、平滑色差过渡 */

/* —— 视觉基调覆盖（不改设计稿 portal.css，仅覆盖变量以统一调性）——
   方向：以 Logo 金 #FAC100 为唯一强调色，叠加深商务蓝基调，构成「深蓝 + 金」的专业企业配色；
   金色仅用于按钮/图标/序号/下划线等点缀，大面积由深蓝与留白承载严肃感，克制、简洁。 */
:root{
  /* 明亮黄橙基调（参考美团/闲鱼）：白底 + 浅黄底 + Logo 金 #FAC100 主色 + 深灰文字，干净明快。
     注：历史变量名 navy-* 为兼容既有 var() 引用而保留，现承载「文字/标题深色梯度」。 */
  --navy-950:#1F1F1F;
  --navy-900:#262626;
  --navy-800:#333333;
  --navy-700:#404040;
  --navy-600:#555555;
  --navy-500:#8A6D00;
  /* 主色：Logo 金 #FAC100；400=亮黄(浅底强调)，600=深金(白底小字，保证对比) */
  --gold-50:#FFF9E6;
  --gold-100:#FFF3CC;
  --gold-400:#FFC93B;
  --gold-500:#FAC100;
  --gold-600:#967000;
  /* 卡片渐变停靠色：Logo 金 #FAC100 → 香槟金 → 高级暖灰（与 portal.css 保持一致，避免覆盖层缺失变量）
     用于「核心业务」激活页签卡与「精选成功案例」卡片头图 */
  --card-champagne:#E6C97C;
  --card-gray:#BDB59F;
  --case-bronze:#C09A3F;
  --case-gray:#7B7462;
  --case-deep:#4C473F;
  --ink-700:#333333;
  --ink-500:#666666;
  --line:#ECECEC;
  --line-soft:#F5F5F5;
  --bg-soft:#FFFBF0;
  --bg-navy-soft:#FFF6DC;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --shadow-l:0 22px 54px rgba(0,0,0,.10);
}

/* 统一的站内链接过渡，优化色差过渡 */
a{transition:color .22s var(--ease)}

@keyframes dash { to { stroke-dashoffset: -160; } }
.flow { stroke-dasharray: 6 8; animation: dash 6s linear infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero__chip--a { animation: float 6s ease-in-out infinite; }
.hero__chip--b { animation: float 7.5s ease-in-out infinite .6s; }
.hero__chip--c { animation: float 6.8s ease-in-out infinite 1.2s; }

/* 表单提示条 */
.form-msg { margin-top: 12px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.7; }
.form-msg.is-loading { color: var(--ink-500); background: rgba(0,0,0,.03); }
.form-msg.is-ok { color: #0f6b3f; background: rgba(15, 107, 63, .08); }
.form-msg.is-dup { color: #967000; background: rgba(250, 193, 0, .16); }
.form-msg.is-err { color: #b3261e; background: rgba(179, 38, 30, .08); }

/* 空列表提示 */
.empty-tip { padding: 30px 0; color: var(--ink-500); font-size: 14.5px; }

/* 页签面板 */
[data-biz-panel][hidden] { display: none; }

/* 错误页 */
.err-code { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: 2px; color: var(--navy-700, #573918); }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* 导航下拉（核心业务二级分类，数据驱动；核心业务无子项时兜底硬编码四大服务） */
.nav__item{position:relative}
.nav__caret{display:inline-block;width:0;height:0;margin-left:6px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;vertical-align:middle;opacity:.55;transition:transform .2s var(--ease)}
.nav__item.has-sub:hover .nav__caret{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(8px);min-width:184px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:60}
.nav__item.has-sub:hover .nav__sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__sub li a{display:block;padding:9px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-700);white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease)}
.nav__sub li a:hover{background:var(--bg-navy-soft);color:var(--navy-800)}

/* 首屏主标题渐变文字：品牌金渐变（与 Logo #FAC100 呼应） */
.hero h1 em{background:linear-gradient(100deg,var(--gold-400),var(--gold-500));-webkit-background-clip:text;background-clip:text;color:transparent}
/* 主 CTA 按钮：品牌金渐变 + 深色文字，呼应 Logo */
.btn--gold{background:linear-gradient(140deg,var(--gold-500),var(--case-bronze) 32%,var(--case-gray) 68%,var(--case-deep));color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.28);box-shadow:0 10px 22px rgba(176,123,44,.30)}
.btn--gold:hover{background:linear-gradient(140deg,var(--gold-500),var(--case-bronze) 32%,var(--case-gray) 68%,var(--case-deep));color:#fff;box-shadow:0 14px 28px rgba(176,123,44,.40)}
/* Hero 背景：商务深蓝渐变 + 极淡金色光斑（左下），呼应 Logo 又不喧宾夺主 */
.hero{background:radial-gradient(900px 520px at 78% -6%,rgba(176,123,44,.28),transparent 62%),radial-gradient(760px 440px at 10% 108%,rgba(250,193,0,.16),transparent 60%),linear-gradient(150deg,#3E3018,#5A4526 52%,#6E5530);color:#fff}
/* 导航固定增强：滚动后由半透明改为实底 + 阴影，强化「已固定」观感（.is-scrolled 由 portal.js 切换） */
.nav.is-scrolled{background:#fff;backdrop-filter:none;box-shadow:0 6px 22px rgba(0,0,0,.08)}
.nav.is-scrolled .nav__menu>li>a{color:var(--ink-700)}

/* 首页轮播图（后台可配；无数据时整段不输出，维持 SVG 插画兜底） */
.hero__slides{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__slide{position:absolute;inset:0;display:block;background-size:cover;background-position:center;opacity:0;transition:opacity .9s var(--ease)}
.hero__slide.is-active{opacity:1}
.hero__slides-mask{position:absolute;inset:0;background:linear-gradient(150deg,rgba(46,33,20,.82),rgba(74,53,32,.62) 55%,rgba(46,33,20,.88))}
.hero .container.hero__in{position:relative;z-index:2}
/* 有轮播图时隐藏右侧 SVG 插画，避免与背景图叠乱；无轮播时 SVG 照常显示 */
.hero__slides ~ .container .hero__art{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* 导航品牌区：后台上传的完整 logo 图片展位（深蓝导航上用透明白底 logo；滚动白底后自动适配） */
.brand__logo-img{max-height:42px;width:auto;height:auto;display:block}

/* —— 右侧浮窗「电话」联系方式气泡：鼠标桥（问题27）——
   现象：鼠标从「电话」按钮移向左侧的联系方式气泡时，刚离开按钮气泡就消失，鼠标还没进去。
   原因：气泡 .fab__pop 在 footer.html 内联样式里用 right:calc(100% + 14px) 定位，
        与按钮之间固定空出 14px；而 .fab__item:hover 只覆盖按钮和气泡自身的盒子，
        鼠标横穿这 14px 时不在任何一方，:hover 立刻断开，气泡随 .18s 过渡淡出
        并 pointer-events:none，于是「够不着」。
   做法：给气泡加一个透明的伪元素当鼠标桥，从气泡右缘铺过那 14px 直到贴住按钮左缘。
        它是 .fab__pop（也就是 .fab__item）的子盒子，所以鼠标停在桥上时 .fab__item:hover
        依然成立，气泡不会消失；离开按钮+桥+气泡这片整体区域后才会收起。
   细节：1) left:100% 让桥从气泡内边距盒的右缘起、只铺到按钮那一侧，绝不压住气泡里的两个链接
            （实测 left:0 把桥铺满整个气泡时，「400-000-0000」「service@…」会点不动）；
        2) 上下各外扩 8px，让斜向移动也落在桥上；
        3) 桥的 pointer-events 继承 .fab__pop：气泡隐藏时它是 none，收起后不会在页面上
           留下一块点不动的死区；气泡显示时它只在按钮左缘压住 1px，不影响「电话」按钮的点击；
        4) 只加透明命中区，气泡的尺寸、颜色、阴影、动效全部保持原样。 */
.fab__pop::before{
  content:"";
  position:absolute;
  top:-8px;
  bottom:-8px;
  left:100%;
  right:-16px; /* 1px 边框 + 14px 空隙 + 1px 余量，正好搭到按钮左缘 */
  pointer-events:inherit;
}

/* 触屏设备没有真正的 hover：点一下会把 :hover 粘住，气泡可能挡在按钮旁边。
   这里直接不展示气泡（与 footer.html 里 ≤768px 的处理一致，文案在页脚/联系页仍可见）；
   「电话」仍是普通 <a href="tel:…">，点击照常拨号，其余按钮跳转不受影响。 */
@media (hover:none){
  .fab__pop{display:none}
}

/* —— 资讯中心分类筛条选中态（问题13）——
   旧版只给「全部」硬编码了 is-active，而且 portal.css / 本文件里都没有 .is-active 的样式，
   于是既看不出选中、切了分类「全部」也一直高亮。现在选中态统一由服务端按 $.Cat 渲染，
   样式在这里集中用「主色实心底 + 加粗」表达，全站只有一处 .is-active，天然只选中一个。
   配色沿用 .aside-nav a.is-active 的金底深棕字：Logo 金 #FAC100 上用白字对比度不足，故不用白字。 */
.tabs a.badge{cursor:pointer}
.tabs .badge.is-active{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:#3A2A00;
  font-weight:700;
  box-shadow:0 2px 10px rgba(250,193,0,.35);
}
.tabs .badge.is-active:hover{background:var(--gold-400);border-color:var(--gold-400);color:#3A2A00}
/* 未选中项也给一点 hover 反馈，否则整条看起来都是「死」的按钮 */
.tabs .badge:hover{background:var(--gold-50);border-color:var(--gold-400);color:var(--gold-600)}

/* —— 成功案例筛条沿用同一套选中态（bug261020（3）问题14③）——
   案例分类改成按「官网管理-案例分类」动态渲染后，写死的「全部」金底不再代表当前分类，
   选中态必须跟着 ?cat= 走；容器是 .filter-bar 而不是 .tabs，所以这里补一组同样的样式。 */
.filter-bar a.badge{cursor:pointer}
.filter-bar .badge.is-active{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:#3A2A00;
  font-weight:700;
  box-shadow:0 2px 10px rgba(250,193,0,.35);
}
.filter-bar .badge.is-active:hover{background:var(--gold-400);border-color:var(--gold-400);color:#3A2A00}