/* ============================================================
   RSH 日升辉供应链 · 官网重设计 2026.09
   品牌色取自 logo 实际取色：皇家蓝 #003399 系 / 橙 #F07000 系（2026.09 二次校正）
   ============================================================ */
:root {
  --navy: #0b2e83;
  --navy-2: #123a9e;
  --navy-3: #2e57c8;
  --orange: #f57d00;
  --orange-2: #ffa042;
  --orange-ink: #b35400;  /* 浅底橙字（对比度 ≥4.5:1，装饰橙 #f57d00 不用于正文） */
  --ink: #1c2b3a;
  --gray: #5b6b7b;
  --line: #e6ebf1;
  --bg: #f6f8fb;
  --white: #fff;
  --radius: 14px;
  --navy-deep: #071c4e;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 10px 30px rgba(11, 46, 131, .10);
  --shadow-lg: 0 24px 60px rgba(11, 46, 131, .16);
  --max: 1200px;
  --font: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- 可访问性基础（阶段四） ---------- */
/* 只给读屏软件的文本：例如每页唯一的 h1、可视标题之外的补充说明 */
.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; }
/* 键盘用户的「跳到主要内容」：平时藏在屏幕上方，聚焦才滑下来 */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 999; background: var(--navy); color: #fff; font-weight: 700; font-size: 14.5px; padding: 10px 20px; border-radius: 10px; box-shadow: var(--shadow-lg); transition: top .2s var(--ease); }
.skip-link:focus { top: 16px; }
/* 导航是粘性的，锚点跳转必须留出它的高度，否则标题会被压在导航条下面 */
h1, h2, h3, h4, section[id], div[id] { scroll-margin-top: 96px; }
/* 触摸反馈：去掉双击缩放延迟，同时给一个明确的点击高亮色（而不是系统默认灰块） */
a, button, summary, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(11, 46, 131, .12); }
body { font-family: var(--font); color: var(--ink); background: var(--white); line-height: 1.75; font-size: 16px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- 导航 ---------- */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.nav.scrolled { box-shadow: 0 6px 24px rgba(11,46,131,.10); }
.nav .container { display: flex; align-items: center; height: 74px; gap: 32px; }
.brand { display: flex; align-items: center; gap: 12px; }
.foot-main .brand { margin-bottom: 16px; }
.brand-logo { width: auto; height: auto; border-radius: 0; background: none; display: grid; place-items: center; }
.brand-logo img { height: 60px; width: auto; display: block; object-fit: contain; }
.brand-name { font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.2; }
.brand-name small { display: block; font-size: 11px; font-weight: 500; color: var(--gray); letter-spacing: .6px; }
.brand-name.only-en { font-size: 15px; }
.nav-links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.nav-links > li { position: relative; }
.nav-links a.nav-item { display: block; padding: 10px 16px; font-size: 15.5px; font-weight: 600; color: var(--ink); border-radius: 8px; transition: color .2s; white-space: nowrap; }
.nav-links a.nav-item:hover, .nav-links > li.active > a.nav-item { color: var(--navy-3); }
.nav-links a.nav-item::after { content: ""; display: block; height: 2px; background: var(--orange); border-radius: 2px; transform: scaleX(0); transition: transform .25s; margin-top: 2px; }
.nav-links a.nav-item:hover::after, .nav-links > li.active > a.nav-item::after { transform: scaleX(1); }
.dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px; min-width: 160px; opacity: 0; visibility: hidden; transition: .25s; }
.nav-links li:hover .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: 10px 16px; border-radius: 8px; font-size: 14.5px; white-space: nowrap; }
.dropdown a:hover { background: var(--bg); color: var(--navy-3); }
.nav-cta { display: flex; gap: 10px; margin-left: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; border: none; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--navy); color: #fff; box-shadow: 0 8px 22px rgba(11,46,131,.30); }
.btn-primary:hover { background: var(--navy-3); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11,46,131,.36); }
.btn-ghost { border: 1.5px solid var(--navy); color: var(--navy); background: transparent; }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.btn-light { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-light:hover { background: #fff; color: var(--navy); }
.burger { display: none; flex-direction: column; gap: 5px; margin-left: auto; background: none; border: none; cursor: pointer; padding: 8px; }
.burger span { width: 24px; height: 2.5px; background: var(--navy); border-radius: 2px; transition: .3s; }

/* ---------- Hero 轮播 ---------- */
.hero { position: relative; height: min(88vh, 720px); min-height: 560px; overflow: hidden; background: var(--navy); }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }
.hero-slide.bg1 { background-image: url("../assets/ppt/biz-air.jpg"); }
.hero-slide.bg2 { background-image: url("../assets/ppt/warehouse-us.jpg"); }
.hero-slide.bg3 { background-image: url("../assets/ppt/system-screen.jpg"); }
.hero-slide.on { opacity: 1; transition-delay: .45s; }
.hero-slide::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(165deg, rgba(6,22,60,.93) 0%, rgba(16,52,128,.85) 55%, rgba(6,22,60,.95) 100%); }
.hero-slide.grid-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.hero-inner { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 24px; width: 100%; max-width: 1100px; }
.hero .hero-title { font-size: clamp(26px, 4.6vw, 54px); font-weight: 800; letter-spacing: 1px; line-height: 1.28; margin-bottom: 20px; overflow-wrap: anywhere; text-wrap: balance; }
.hero .hero-title em { font-style: normal; color: var(--em-c, var(--orange-2)); transition: color .3s; }
/* 后台「首页视觉」可按屏开启强调字加粗加深（slide 上加 .em-bold / 行内 --em-c 颜色） */
.hero-slide.em-bold .hero-title em { font-weight: 900; letter-spacing: .5px; }
.hero p { font-size: clamp(15px, 1.8vw, 19px); color: #dde8f3; max-width: 700px; margin: 0 auto 38px; text-shadow: 0 1px 12px rgba(0,20,45,.55); }
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-dots { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; }
.hero-dots button { width: 30px; height: 4px; border: none; border-radius: 4px; background: rgba(255,255,255,.28); cursor: pointer; transition: .3s; }
.hero-dots button.on { background: var(--orange); width: 46px; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; transition: .25s; }
.hero-arrow:hover { background: #fff; border-color: #fff; color: var(--navy); }
.hero-arrow.prev { left: 26px; } .hero-arrow.next { right: 26px; }

/* ---------- 数据条 ---------- */
.stats { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); padding: 54px 0 48px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 30px 20px; text-align: center; color: #fff; backdrop-filter: blur(6px); }
.stat b { display: block; font-size: 40px; font-weight: 800; color: var(--orange-2); line-height: 1.15; }
.stat b span { font-size: 20px; margin-left: 2px; }
.stat p { margin-top: 6px; color: #d9e6f2; font-size: 14.5px; }

/* ---------- 通用区块 ---------- */
section.block { padding: 144px 0; }
section.block.alt { background: var(--bg); }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; color: var(--navy); margin: 10px 0 14px; letter-spacing: .5px; line-height: 1.25; text-wrap: balance; }
.sec-head p { color: var(--gray); font-size: 16px; }
.sec-head::after { content: ""; display: block; width: 56px; height: 3px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius: 3px; margin: 22px auto 0; }

/* ---------- 主营业务卡片 ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 32px; position: relative; overflow: hidden; transition: .35s; }
.svc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--navy-3), var(--orange)); transform: scaleX(0); transform-origin: left; transition: .4s; }
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; margin-bottom: 22px; background: linear-gradient(135deg, #eef4fa, #fdeadd); }
.svc-card h3 { font-size: 21px; color: var(--navy); margin-bottom: 12px; }
/* 后台「主营业务」条目的一句话简介：夹在标题和要点之间 */
.svc-card p { color: var(--gray); font-size: 14.8px; margin-bottom: 12px; }
.svc-card ul li { color: var(--gray); font-size: 14.8px; padding: 5px 0 5px 20px; position: relative; }
.svc-card ul li::before { content: ""; position: absolute; left: 0; top: 14px; width: 7px; height: 7px; background: var(--orange); opacity: .9; }

/* ---------- 特色服务（深色区） ---------- */
.feature-dark { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.feature-dark .sec-head h2 { color: #fff; }
.feature-dark .sec-head p { color: #a9bdd2; }
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feat-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 30px 24px; transition: .3s; }
.feat-card:hover { background: rgba(245,125,0,.14); border-color: rgba(245,125,0,.5); transform: translateY(-6px); }
.feat-card .ico { font-size: 34px; margin-bottom: 16px; }
.feat-card h3 { font-size: 18px; margin-bottom: 10px; color: #fff; }
.feat-card p { font-size: 14px; color: #bccfdf; }
.feat-card .en { display: inline-block; margin-top: 12px; font-size: 12px; color: var(--orange-2); letter-spacing: 1px; font-weight: 700; }

/* ---------- 双栏图文 ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.duo.reverse .duo-media { order: 2; }
/* 图片由标签 inline background-image 传入（svc_wh 条目由 JS 输出；bg-us 等类是静态页兜底）；没传就退回渐变色块 */
.duo-media { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 16/11; background: linear-gradient(135deg, var(--navy-2), var(--navy-3)) center / cover no-repeat; position: relative; }
.duo-media.bg-us { background-image: url("../assets/ppt/warehouse-us.jpg"); }
.duo-media.bg-mx { background-image: url("../assets/ppt/warehouse-mx.jpg"); }
.duo-media.bg-about { background-image: url("../assets/old/about-img.jpg"); }
.duo-media.bg-system { background-image: url("../assets/ppt/system-screen.jpg"); }
.duo-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7,24,66,.35), rgba(7,24,66,.55)); }

/* ---------- 合作伙伴 / 二维码 / 图廊 ---------- */
.partner-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: center; }
.partner-row img { height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .55; transition: .3s; }
.partner-row img:hover { filter: none; opacity: 1; }
.qr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.qr-item { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px 16px; transition: .3s; }
.qr-item:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.qr-item img { width: 128px; height: 128px; object-fit: contain; margin: 0 auto 12px; }
.qr-item h3 { font-size: 15px; color: var(--navy); }
.qr-item p { font-size: 12.5px; color: var(--gray); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery img { width: 100%; height: 210px; object-fit: cover; border-radius: 12px; transition: .35s; }
.gallery img:hover { transform: scale(1.04); box-shadow: var(--shadow); }
/* 10.21 公司环境与团建：后台可管理后条目渲染成 <figure class="gal-fig">，
   没有说明文字时结构与原来裸 <img> 完全一致，视觉零变化 */
.gallery .gal-fig { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.gallery .gal-fig figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 12px 9px; color: #fff; font-size: 12.5px; line-height: 1.4; background: linear-gradient(transparent, rgba(8,26,80,.8)); pointer-events: none; }

/* ---------- 媒体库图集（10.21）：轮播 + 图墙 ---------- */
/* 轮播：一次一张大图，可左右切换、自动播放、带缩略图条 */
.m-carousel { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--bg); }
.m-car-track { position: relative; aspect-ratio: 16/9; }
.m-car-track > figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .55s var(--ease); }
.m-car-track > figure.on { opacity: 1; }
.m-car-track img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-car-track figcaption { position: absolute; inset: auto 0 0 0; padding: 54px 26px 22px; color: #fff;
  background: linear-gradient(transparent, rgba(8,26,80,.88)); font-size: 15px; line-height: 1.6; }
.m-car-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.9); color: var(--navy); font-size: 20px; cursor: pointer; z-index: 3;
  display: grid; place-items: center; box-shadow: 0 3px 14px rgba(8,26,80,.25); transition: .22s; }
.m-car-btn:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.m-car-btn.prev { left: 16px; }
.m-car-btn.next { right: 16px; }
.m-car-dots { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; }
.m-car-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5); transition: .25s; }
.m-car-dots button.on { background: var(--orange); width: 24px; border-radius: 999px; }
.m-car-count { position: absolute; right: 18px; top: 16px; z-index: 3; color: rgba(255,255,255,.92);
  background: rgba(8,26,80,.5); border-radius: 999px; padding: 4px 13px; font-size: 12.5px; font-weight: 600;
  backdrop-filter: blur(4px); }
/* 图墙：媒体库直出的多图网格 */
.m-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.m-wall figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; }
.m-wall img { width: 100%; height: 210px; object-fit: cover; display: block; transition: .35s; }
.m-wall figure:hover img { transform: scale(1.05); }
.m-wall figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 12px 9px; color: #fff; font-size: 12.5px;
  line-height: 1.4; background: linear-gradient(transparent, rgba(8,26,80,.8)); }
.cert-pic img { height: 150px; width: 100%; object-fit: contain; margin-bottom: 12px; border-radius: 8px; }
.duo-media::after { content: attr(data-label); position: absolute; inset: auto 0 0 0; padding: 40px 28px 22px; color: rgba(255,255,255,.9); font-weight: 700; background: linear-gradient(transparent, rgba(8,26,80,.85)); font-size: 15px; }
.duo h2, .duo h3 { font-size: clamp(22px, 2.6vw, 30px); color: var(--navy); margin-bottom: 18px; }
.duo p { color: var(--gray); margin-bottom: 14px; }
.duo .checks li { padding: 7px 0 7px 32px; position: relative; color: var(--ink); font-size: 15.5px; }
.duo .checks li::before { content: "✓"; position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(179,84,0,.12); color: var(--orange-ink); font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.duo .duo-cta { margin-top: 24px; }

/* ---------- 优势（编号列表） ---------- */
.adv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.adv-item { display: flex; gap: 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px; transition: .3s; }
.adv-item:hover { border-color: var(--orange); box-shadow: var(--shadow); }
.adv-num { flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), var(--navy-3)); color: #fff; font-weight: 800; font-size: 20px; display: grid; place-items: center; }
.adv-item h3 { font-size: 17px; color: var(--navy); margin-bottom: 6px; }
.adv-item p { font-size: 14.5px; color: var(--gray); }

/* ---------- 资讯 ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: .3s; display: flex; flex-direction: column; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
/* 封面图由标签 inline background-image 传入（JS 同规则）；没传就退回渐变色块。
   注意：不要用 var(--bg, 渐变) 传图 —— var() 里的相对 URL 会按本样式表(/css/)为基准解析，
   曾经导致全站背景图 404；且 :root 的 --bg 是页面底色，兜底渐变永远不会生效 */
.news-cover { height: 170px; display: grid; place-items: center; font-size: 44px; color: #fff; background-size: cover; background-position: center; }
.news-cover.c1 { background-image: linear-gradient(135deg, #0f2f7e, #1d49b8); }
.news-cover.c2 { background-image: linear-gradient(135deg, #f57d00, #ffa042); }
.news-cover.c3 { background-image: linear-gradient(135deg, #0a2560, #3a63bd); }
.news-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.news-meta { font-size: 12.5px; color: #6b7d8f; display: flex; gap: 14px; margin-bottom: 10px; }
.news-meta .tag { color: var(--orange-ink); font-weight: 700; }
.news-body h3 { font-size: 17.5px; color: var(--navy); line-height: 1.5; margin-bottom: 10px; }
.news-body p { font-size: 14px; color: var(--gray); flex: 1; }
.news-more { margin-top: 16px; color: var(--orange-ink); font-weight: 700; font-size: 14px; }

/* 10.23：资讯卡片尺寸统一
   要求「尺寸都统一固定」——所有卡片高度必须完全一致，不随标题/标签行数变化。
   做法：给 .news-card 一个固定 min-height（封面 170 + 正文区固定高），
   标题固定 2 行、摘要固定 2 行、标签区固定 2 行高，
   「阅读全文」用 margin-top:auto 贴到卡片底部。 */
.news-grid { align-items: stretch; }
.news-card { height: 100%; min-height: 452px; }
.news-body h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
  min-height: calc(17.5px * 1.5 * 2);        /* 固定两行高 */
}
.news-body p.news-sum {
  flex: 0 0 auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(14px * 1.75 * 2);          /* 固定两行高 */
}
/* 标签统一容器：固定 2 行高度（没有标签也留白，保证所有卡片等高） */
.news-body .news-labels { flex: 0 0 auto; min-height: 56px;
  display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start;
  margin-top: 10px; overflow: hidden; }
.news-body .news-labels .news-dim, .news-body .news-labels .news-tag {
  display: inline-block; }
/* 「阅读全文」永远贴卡片底部 */
.news-body .news-more { margin-top: auto; padding-top: 16px; }

/* 资讯分页条 */
.news-pager { display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.news-pager .pg { min-width: 38px; height: 38px; padding: 0 14px;
  border: 1.5px solid var(--line); background: #fff; border-radius: 8px;
  font-size: 14px; color: var(--navy); cursor: pointer; transition: .2s; }
.news-pager .pg:hover:not([disabled]) { border-color: var(--navy); color: var(--navy); }
.news-pager .pg[disabled] { opacity: .4; cursor: not-allowed; }
.news-pager .pg.on { background: var(--navy); border-color: var(--navy); color: #fff;
  font-weight: 700; }
.news-pager .pg-info { font-size: 13.5px; color: #6b7d8f; margin-left: 8px; }

/* ---------- 重要资讯（10.22→10.23）----------
   10.22：10100「必读」转来的重要资讯曾单独成深色大板块。
   10.23：改为每篇独立成卡片（与其它文章一致），仅用「重要」徽标 + 标题加重区分。
   旧的深色大板块样式已废弃并移除。 */
/* 卡片上的「重要」徽标 */
.news-imp-badge { background: var(--orange); color: #fff; font-weight: 800;
  padding: 2px 9px; border-radius: 4px; }
.news-card .news-imp-badge { font-size: 12px; letter-spacing: .5px;
  align-self: center; margin-right: 2px; }
.news-card.is-important { position: relative; }
.news-card.is-important .news-body h3 { font-weight: 800; }
.news-imp-meta .tag { color: var(--orange-2); font-weight: 700; }

/* 维度标签：平台 / 船司 / 港口 / 物流 */
.news-dims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.news-dim { font-size: 12px; color: var(--navy-3); background: #eef2fb;
  border: 1px solid #d6e0f7; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.news-imp-item .news-dim { color: var(--orange-2); background: rgba(245,125,0,.14);
  border-color: rgba(245,125,0,.34); }
/* 关键词标签（10100 必读自带的「产品标识 / 欧盟合规 / 清关风险」） */
.news-tag { font-size: 12px; color: #0f766e; background: #ecfdf5;
  border: 1px solid #c3efe0; border-radius: 999px; padding: 2px 9px; font-weight: 500; }
.news-imp-item .news-tag { color: #0f766e; background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.32); }
.news-tags { margin-top: 6px; }
.news-card.is-important { border-color: var(--orange); box-shadow: 0 6px 22px rgba(245,125,0,.14); }
.news-card.is-important .news-body h3 { font-weight: 800; }
/* 置顶标记（10.31）：后台手动勾选，与「重要」徽标区分 —— 红色实底 + 白字 */
.news-card .news-top-badge { font-size: 12px; letter-spacing: .5px; font-weight: 700;
  align-self: center; color: #fff; background: #e11d48; padding: 1px 8px; border-radius: 999px; }

/* ---------- 今日客服（轮换值班） ---------- */
.duty { background: var(--bg); }
.duty-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 36px; align-items: center; box-shadow: var(--shadow); }
/* 默认隐藏：只有后台确实配了微信二维码，main.js 才会把它显示出来（inline style 优先级高于这条规则，无需改 JS） */
.wx-icon { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #07c160; margin-left: 10px; cursor: pointer; vertical-align: 3px; box-shadow: 0 2px 8px rgba(7,193,96,.35); transition: transform .2s ease, box-shadow .2s ease; }
.wx-icon:hover { transform: scale(1.12); box-shadow: 0 4px 14px rgba(7,193,96,.5); }
.duty-avatar { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--navy-2), var(--navy-3)); color: #fff; display: grid; place-items: center; font-size: 36px; font-weight: 800; position: relative; }
.duty-avatar::after { content: ""; position: absolute; right: 4px; bottom: 6px; width: 18px; height: 18px; border-radius: 50%; background: #2ecc71; border: 3px solid #fff; }
.duty-info h3 { font-size: 22px; color: var(--navy); }
.duty-info h3 span { color: var(--navy-3); }
.duty-info p { color: var(--gray); font-size: 14.5px; margin-top: 4px; }
.duty-roster { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.duty-roster span { font-size: 12px; color: var(--gray); background: var(--bg); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
.duty-roster span.on { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.duty-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 流程 ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: step; }
.flow-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 18px; text-align: center; position: relative; counter-increment: step; transition: .3s; }
.flow-step:hover { border-color: var(--orange); transform: translateY(-4px); }
.flow-step::before { content: counter(step, decimal-leading-zero); display: block; font-size: 13px; font-weight: 800; color: var(--orange-ink); letter-spacing: 2px; margin-bottom: 10px; }
.flow-step .ico { font-size: 30px; margin-bottom: 10px; }
.flow-step h3 { font-size: 15.5px; color: var(--navy); }
.flow-step p { font-size: 12.5px; color: var(--gray); margin-top: 6px; }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(120deg, var(--navy) 30%, var(--navy-3)); border-radius: 22px; color: #fff; padding: 56px 48px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--orange), rgba(245,130,32,.15)); }
.cta h2 { font-size: clamp(22px, 3vw, 32px); margin-bottom: 10px; }
.cta p { color: #d7e3ef; }

/* ---------- 页脚 ---------- */
footer { background: var(--navy-deep); color: #c4d2e0; margin-top: 0; }
.foot-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 64px 0 44px; }
.foot-main h2 { color: #fff; font-size: 16px; margin-bottom: 18px; }
.foot-main .brand-name { color: #fff; }
.foot-main p, .foot-main li { font-size: 14px; padding: 4px 0; }
.foot-main a:hover { color: var(--orange-2); }
.foot-contact li { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.foot-contact .ico { flex: none; min-width: 2.5em; } /* 空标签（地址/电话的第二行）也保持对齐 */
.foot-sub { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.foot-sub a { color: #aebdcc; } .foot-sub a:hover { color: var(--orange-2); }

/* ---------- 悬浮咨询（替代旧右侧客服框） ---------- */
.float-consult { position: fixed; right: 22px; bottom: 90px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.float-consult a { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: .25s; position: relative; }
.float-consult a:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; transform: translateY(-3px); }
.float-consult a .tip { position: absolute; right: 62px; top: 50%; transform: translateY(-50%); background: var(--navy); color: #fff; font-size: 12.5px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; opacity: 0; visibility: hidden; transition: .2s; }
.float-consult a:hover .tip { opacity: 1; visibility: visible; }
.back-top { position: fixed; right: 22px; bottom: 26px; z-index: 90; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 20px; cursor: pointer; border: none; opacity: 0; visibility: hidden; transition: .3s; }
.back-top.show { opacity: 1; visibility: visible; }
.back-top:hover { background: var(--navy-3); }

/* ---------- 子页页头 ---------- */
.page-hero { background: linear-gradient(140deg, var(--navy) 20%, var(--navy-3)); color: #fff; padding: 84px 0 70px; position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); }
.page-hero .container { position: relative; z-index: 1; }
.crumb { font-size: 13.5px; color: #dae5f0; margin-bottom: 14px; }
.crumb a:hover { color: var(--orange-2); }
.page-hero h1 { font-size: clamp(28px, 4vw, 44px); letter-spacing: 2px; }
.page-hero p { color: #dce7f1; margin-top: 10px; max-width: 680px; }

/* ---------- 联系页 ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: .3s; }
.contact-card:hover { box-shadow: var(--shadow); border-color: var(--orange); }
.contact-card .ico { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #eef4fa, #fdeadd); display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; }
.contact-card h3 { font-size: 18px; color: var(--navy); margin-bottom: 8px; }
.contact-card p { font-size: 14.5px; color: var(--gray); }
.contact-card .tel { font-size: 20px; font-weight: 800; color: var(--navy); }

/* ---------- 资质徽章 ---------- */
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.badge { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 20px; text-align: center; transition: .3s; }
.badge:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.badge .ico { font-size: 38px; margin-bottom: 12px; }
.badge h3 { font-size: 15.5px; color: var(--navy); }
.badge p { font-size: 12.5px; color: var(--gray); margin-top: 4px; }

/* ---------- 动效 ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .stats-grid, .feat-grid, .badge-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 36px; }
  .duo.reverse .duo-media { order: 0; }
  .duty-card { grid-template-columns: 1fr; text-align: left; }
  .duty-actions { flex-direction: row; }
  .foot-main { grid-template-columns: 1fr 1fr; }
  .m-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .m-wall { grid-template-columns: repeat(2, 1fr); }
  .m-car-btn { width: 38px; height: 38px; font-size: 17px; }
  .m-car-btn.prev { left: 10px; }
  .m-car-btn.next { right: 10px; }
  .m-car-track { aspect-ratio: 4/3; }
}
@media (max-width: 768px) {
  .burger { display: flex; }
  .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px 20px 20px; box-shadow: var(--shadow-lg); gap: 4px; }
  .nav-links.open { display: flex; }
  .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; padding: 0 0 0 16px; display: none; }
  .nav-links li:hover .dropdown { display: block; }
  .nav-cta { margin: 10px 0 0; }
  .hero { min-height: 520px; }
  .hero-arrow { display: none; }
  .svc-grid, .news-grid, .stats-grid, .feat-grid, .badge-grid, .contact-grid, .adv-list, .qr-grid, .cert-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .partner-row { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 20px; }
  .partner-row img { width: 100%; height: auto; max-height: 56px; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .foot-main { grid-template-columns: 1fr; gap: 28px; }
  section.block { padding: 96px 0; }
  .float-consult { right: 14px; }
}


/* ---------- 首页板块入口（gapless） ---------- */
/* 卡片背景图由 HTML/JS 写在 .bg 的 inline background-image（见 news-cover 处的说明，勿改回 var(--bg) 传图） */
.sections-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 18px; }
.sect-card { position: relative; display: block; min-height: 260px; border-radius: 16px; overflow: hidden; background-size: cover; background-position: center; isolation: isolate; }
.sect-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,22,60,.15) 0%, rgba(6,22,60,.72) 55%, rgba(6,22,60,.90) 100%); transition: .4s; }
.sect-card:hover::before { background: linear-gradient(180deg, rgba(6,22,60,.05) 0%, rgba(6,22,60,.62) 55%, rgba(6,22,60,.88) 100%); }
.sect-card .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform .8s ease; z-index: -1; }
.sect-card:hover .bg { transform: scale(1.08); }
.sect-body { position: relative; padding: 26px 24px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 260px; color: #fff; }
.sect-body h3 { font-size: 21px; font-weight: 800; letter-spacing: .5px; }
.sect-body p { font-size: 14px; color: #e5edf4; margin-top: 6px; }
.sect-body .go { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--orange-2); letter-spacing: 1px; }
.note-mark { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--orange-ink); color: var(--orange-ink); border-radius: 6px; font-size: 12.5px; font-weight: 700; }

@media (max-width: 1024px) { .sections-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .sections-grid { grid-template-columns: 1fr; }
  .sect-card, .sect-body { min-height: 200px; }
  .brand-logo img { height: 56px; }
  .nav .container { gap: 10px; }
  .nav-cta { display: none; }
  .burger { display: flex !important; margin-left: auto; }
  .hero-inner { padding: 0 18px; }
  .stat b { font-size: 32px; }
}
@media (max-width: 480px) {
  .brand-name { display: none; }
}

/* ---------- 首页背景视频 ---------- */
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--navy); }
.hero-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%;
  width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(6,22,60,.52) 0%, rgba(16,52,128,.34) 55%, rgba(6,22,60,.60) 100%); }
/* 播放列表（后台「首页视觉」配置）：多素材按序淡入淡出 */
.hero-media video, .hero-img { opacity: 0; transition: opacity .6s ease; }
.hero-media video.on, .hero-img.on { opacity: 1; }
.hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* 视频就绪后隐藏轮播自带的图片背景，避免盖住视频；失败则自动回退到图片背景 */
.hero.has-video .hero-slide { background-image: none !important; }

/* ---------- 更新二：本周报价 / 系统入口 / 值班头像 ---------- */
.duty-avatar { background: #fff; border: 1px solid var(--line); }
.duty-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 13px; border-radius: 50%; }

.sys-entry { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; }

.quote-card { display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.quote-media { min-height: 400px; background: #e8edf3; }
.quote-media img { width: 100%; height: 100%; object-fit: cover; }
.quote-body { padding: 56px 52px; display: flex; flex-direction: column; justify-content: center; }
.quote-body h2 { font-size: clamp(24px, 3vw, 34px); color: var(--navy); margin-bottom: 14px; }
.quote-body > p { color: var(--gray); font-size: 15.5px; }
.quote-meta { margin: 26px 0 30px; display: grid; gap: 14px; }
.quote-meta li { display: flex; align-items: baseline; gap: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.quote-meta b { color: var(--navy); font-size: 15px; min-width: 104px; }
.quote-meta span { color: var(--gray); font-size: 14px; }

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-item { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; transition: .3s; }
.quote-item:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c9d9ea; }
.quote-item h3 { color: var(--navy); font-size: 19px; }
.quote-item .price { color: var(--orange-ink); font-weight: 700; font-size: 14.5px; }
.quote-item p { color: var(--gray); font-size: 14.5px; }
.quote-item .btn { margin-top: auto; align-self: flex-start; }
.quote-note { margin-top: 24px; color: #7b8899; font-size: 13.5px; }

.news-empty { text-align: center; color: var(--gray); padding: 40px 0; grid-column: 1 / -1; }
.news-card .news-cat { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--orange-ink); margin-bottom: 8px; }
.news-card h3 { color: var(--navy); font-size: 18px; margin-bottom: 8px; }
.news-card p { color: var(--gray); font-size: 14.5px; }
.article-body { max-width: 780px; margin: 0 auto; font-size: 16.5px; line-height: 2; color: #3a4a5a; }
.article-body p { margin-bottom: 18px; white-space: pre-wrap; }
/* ---------- 文章富文本（后台公众号格式发布；入库前已由服务端清洗） ---------- */
.article-body .rich { overflow-wrap: anywhere; }
.article-body .rich p { white-space: normal; }  /* 覆盖旧纯文本的 pre-wrap：富文本里换行由标签决定，避免出现双倍空行 */
.article-body .rich img { max-width: 100%; height: auto; border-radius: 12px; margin: 10px auto; display: block; }
.article-body .rich h2 { font-size: 24px; color: var(--navy); margin: 26px 0 12px; line-height: 1.5; }
.article-body .rich h3 { font-size: 20px; color: var(--navy); margin: 22px 0 10px; line-height: 1.5; }
/* 爬虫正文里的小节标题（「事实核要」「影响剖析」「洞察延伸」） */
.article-body .rich h3.art-sec { font-size: 17px; color: var(--navy-2, #334);
  margin: 24px 0 8px; padding-left: 12px; border-left: 4px solid var(--orange);
  line-height: 1.4; }
.article-body .rich blockquote { border-left: 4px solid var(--orange); background: rgba(240,128,0,.06); padding: 12px 18px; margin: 16px 0; color: var(--gray); border-radius: 0 10px 10px 0; }
.article-body .rich ul, .article-body .rich ol { padding-left: 26px; margin: 0 0 18px; }
.article-body .rich li { margin-bottom: 6px; }
.article-body .rich a { color: var(--orange-ink); text-decoration: underline; overflow-wrap: anywhere; }
.article-body .rich table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.article-body .rich td, .article-body .rich th { border: 1px solid var(--line); padding: 8px 12px; }
/* ---------- 内容条目：优势 / 岗位卡片配图（后台传了图才显示） ---------- */
.adv-item .adv-txt { flex: 1; min-width: 0; }
.adv-img { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: 14px; align-self: center; }
.job-img { flex: none; width: 150px; height: 100px; object-fit: cover; border-radius: 12px; }
@media (max-width: 768px) { .adv-img { width: 72px; height: 72px; } .job-img { width: 110px; height: 76px; } }
.form-msg { margin-top: 14px; font-size: 14px; font-weight: 700; }
.form-msg.ok { color: #1d7a4c; }
.form-msg.err { color: #b3261e; }

@media (max-width: 1024px) { .quote-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .quote-card { grid-template-columns: 1fr; }
  .quote-media { min-height: 220px; }
  .quote-body { padding: 34px 24px 38px; }
  .quote-grid { grid-template-columns: 1fr; }
  .sys-entry .btn { width: 100%; text-align: center; }
}

/* 悬浮栏：只留一个显眼的「本周报价」 */
.float-consult { position: fixed; right: 22px; bottom: 96px; z-index: 90; }
.float-consult a.fc-quote { width: auto; height: auto; display: flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 999px; background: var(--orange); border: 1.5px solid var(--orange);
  color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .5px; box-shadow: 0 12px 30px rgba(245,125,0,.34); }
.float-consult a.fc-quote:hover { background: #d96f00; border-color: #d96f00; color: #fff; transform: translateY(-3px); }
.float-consult a.fc-quote .fc-ico { width: 21px; height: 21px; fill: #fff; flex: none; }
.float-consult a.fc-quote .tip { right: 100%; margin-right: 12px; }
.btn-consult { background: var(--orange); border-color: var(--orange); box-shadow: 0 8px 22px rgba(245,125,0,.30); }
.btn-consult:hover { background: #d96f00; border-color: #d96f00; }

/* 证书点击放大 */
.cert-pic { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,18,36,.88); display: grid; place-items: center;
  padding: 32px; opacity: 0; visibility: hidden; transition: opacity .32s ease, visibility .32s; backdrop-filter: blur(4px); }
.lightbox.on { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(900px, 92vw); max-height: 86vh; border-radius: 14px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transform: scale(.92); transition: transform .38s cubic-bezier(.2,.8,.25,1); }
.lightbox.on img { transform: scale(1); }
.lightbox .lb-cap { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; color: #dce7f1; font-size: 14px; }
.lightbox .lb-close { position: absolute; top: 26px; right: 30px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: #fff; font-size: 22px; cursor: pointer; }
.lightbox .lb-close:hover { background: #fff; color: var(--navy); }

/* 今日负责人企业微信二维码 */


/* ---------- 动效升级：交错进场 / 焦点 / 选区 / 数字 ---------- */
::selection { background: rgba(245, 125, 0, .22); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.stat b, .quote-meta b, .contact-card .tel, .adv-num, .hero .hero-title em,
.stat p, .hero p { font-variant-numeric: tabular-nums; }

/* ---------- 排版与长内容兜底（阶段四） ---------- */
.page-hero h1, .quote-body h2, .cta h2, .duo h2, .duo h3 { text-wrap: balance; }
.sec-head p, .policy li, .policy td { text-wrap: pretty; }
/* 标题与卡片文本来自后台，极端长度下不许撑破布局 */
.svc-card h3, .feat-card h3, .news-card h3, .news-body h3, .contact-card h3,
.qr-item h3, .flow-step h3, .faq-item h3, .adv-item h3, .badge h3, .quote-item h3,
.cert-pic h3 { overflow-wrap: anywhere; }
.news-card, .qr-item, .badge, .cert-pic { min-width: 0; }
.reveal.in .svc-card, .reveal.in .news-card, .reveal.in .feat-card, .reveal.in .quote-item,
.reveal.in .badge, .reveal.in .contact-card, .reveal.in .adv-item, .reveal.in .flow-step, .reveal.in .qr-item {
  animation: rsh-rise .6s var(--ease) backwards;
}
.reveal.in > *:nth-child(2) { animation-delay: .07s; }
.reveal.in > *:nth-child(3) { animation-delay: .14s; }
.reveal.in > *:nth-child(4) { animation-delay: .21s; }
.reveal.in > *:nth-child(5) { animation-delay: .28s; }
.reveal.in > *:nth-child(6) { animation-delay: .35s; }
.sections-grid > * { animation: rsh-rise .65s var(--ease) backwards; }
.sections-grid > *:nth-child(2) { animation-delay: .07s; }
.sections-grid > *:nth-child(3) { animation-delay: .14s; }
.sections-grid > *:nth-child(4) { animation-delay: .21s; }
.sections-grid > *:nth-child(5) { animation-delay: .28s; }
.sections-grid > *:nth-child(6) { animation-delay: .35s; }
@keyframes rsh-rise { from { opacity: 0; transform: translateY(24px); } }

/* ============================================================
   海运 · 空运 主题动效素材（纯 CSS + data-URI SVG，零 JS）
   数据条航线流光 / 货机掠过 · CTA 海浪货轮 · 页脚波浪 · 首页视频海浪 · 子页头航线
   ============================================================ */

/* —— 数据条：航线流光 + 货机掠过 —— */
.stats { position: relative; overflow: hidden; }
.stats::before { content: ""; position: absolute; left: -48px; right: -48px; top: 26%; height: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.30) 0 22px, transparent 22px 48px);
  transform: rotate(-7deg); animation: rsh-line-flow 1.4s linear infinite; pointer-events: none;
  will-change: transform; }
.stats::after { content: ""; position: absolute; top: 10%; left: -100px; width: 74px; height: 29px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2078%2030'%3E%3Cg%20fill='%2523ffffff'%3E%3Cpath%20d='M6%2015.5C6%2013.4%2012%2012.4%2020%2012.4h32c7%200%2013%20.8%2018%202.4l6%201.2-6%201.4c-5%201.6-11%202.4-18%202.4H20c-8%200-14-1.2-14-4.3z'/%3E%3Cpath%20d='M14%2012.6L6%203h5l11%209.6z'/%3E%3Cpath%20d='M34%2019l-8%2010h-8l10-10z'/%3E%3Cpath%20d='M38%2012.4L46%203h7l-6%209.4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  opacity: .45; animation: rsh-plane-fly 12s linear infinite; pointer-events: none; }
@keyframes rsh-line-flow { from { transform: rotate(-7deg) translateX(0); } to { transform: rotate(-7deg) translateX(-48px); } }
@keyframes rsh-line-flow2 { from { transform: rotate(-6deg) translateX(0); } to { transform: rotate(-6deg) translateX(-48px); } }
@keyframes rsh-plane-fly { to { transform: translateX(calc(100vw + 220px)); } }

/* —— 子页头：航线 + 飞机（更淡） —— */
.page-hero::before { content: ""; position: absolute; left: -48px; right: -48px; top: 30%; height: 1.5px; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 22px, transparent 22px 48px);
  transform: rotate(-6deg); animation: rsh-line-flow2 1.6s linear infinite; pointer-events: none;
  will-change: transform; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .route-plane { position: absolute; top: 16%; left: -90px; width: 64px; height: 25px; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2078%2030'%3E%3Cg%20fill='%2523ffffff'%3E%3Cpath%20d='M6%2015.5C6%2013.4%2012%2012.4%2020%2012.4h32c7%200%2013%20.8%2018%202.4l6%201.2-6%201.4c-5%201.6-11%202.4-18%202.4H20c-8%200-14-1.2-14-4.3z'/%3E%3Cpath%20d='M14%2012.6L6%203h5l11%209.6z'/%3E%3Cpath%20d='M34%2019l-8%2010h-8l10-10z'/%3E%3Cpath%20d='M38%2012.4L46%203h7l-6%209.4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; opacity: .35;
  animation: rsh-plane-fly 14s linear infinite; pointer-events: none; }

/* —— CTA：海浪两层 + 集装箱货轮起伏 —— */
.cta::after { content: ""; position: absolute; right: 26px; bottom: 3px; width: 320px; height: 86px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%2062'%3E%3Cg%20fill='%2523ffffff'%20fill-opacity='.15'%3E%3Cpath%20d='M6%2040h104c13%200%2025%204%2033%2010l-2%206H6z'/%3E%3Crect%20x='20'%20y='28'%20width='17'%20height='10'%20rx='1'/%3E%3Crect%20x='41'%20y='21'%20width='17'%20height='17'%20rx='1'/%3E%3Crect%20x='62'%20y='28'%20width='17'%20height='10'%20rx='1'/%3E%3Crect%20x='83'%20y='25'%20width='13'%20height='13'%20rx='1'/%3E%3Cpath%20d='M109%2032h11v6h-11z'/%3E%3Cpath%20d='M52%2012h5v9h-5z'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 34px bottom 26px / 150px auto,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2022'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2012q30-11%2060%200t60%200t60%200t60%200V22H0z'%20fill='%2523ffffff'%20fill-opacity='.10'/%3E%3C/svg%3E") repeat-x left bottom / 240px 22px,
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2022'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014q30-13%2060%200t60%200t60%200t60%200V22H0z'%20fill='%2523ffffff'%20fill-opacity='.20'/%3E%3C/svg%3E") repeat-x left bottom / 320px 16px;
  animation: rsh-sea 8s ease-in-out infinite alternate; }
@keyframes rsh-sea {
  0%   { background-position: right 34px bottom 27px, 0 100%, 0 100%; }
  50%  { background-position: right 34px bottom 23px, -130px 100%, 140px 100%; }
  100% { background-position: right 34px bottom 27px, -260px 100%, 280px 100%; }
}

/* —— 页脚顶部波浪 —— */
footer { position: relative; }
footer::before { content: ""; position: absolute; top: 0; left: -240px; right: -240px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2014q30-13%2060%200t60%200t60%200t60%200V26H0z'%20fill='%2523ffffff'%20fill-opacity='.07'/%3E%3C/svg%3E") repeat-x left top / 240px 26px;
  animation: rsh-wave-drift 8s linear infinite; pointer-events: none; will-change: transform; }
/* 位移一个背景周期（240px）即无缝循环；改 transform 后走合成层，不再逐帧重绘 */
@keyframes rsh-wave-drift { to { transform: translateX(240px); } }

/* —— 首页视频底部海浪暗纹（回退图片背景时同样生效） —— */
.hero-media::after { content: ""; position: absolute; left: -420px; right: -420px; bottom: -2px; height: 58px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%2022'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%2012q30-11%2060%200t60%200t60%200t60%200V22H0z'%20fill='%2523ffffff'%20fill-opacity='.10'/%3E%3C/svg%3E") repeat-x left bottom / 420px 58px;
  opacity: .8; animation: rsh-wave-drift2 17.5s linear infinite; pointer-events: none; will-change: transform; }
@keyframes rsh-wave-drift2 { to { transform: translateX(420px); } }

/* ---------- 阶段四：版式工具类 ----------
   目的：把散落在标签里的 style="margin-top:8px" 这类微调收回 CSS。
   HTML 只留类名，样式可缓存、可复用、可被后台模板统一输出；
   内容型的值（如背景图 URL）通过行内 background-image 传入，不进这里。 */
.u-row { display: flex; flex-wrap: wrap; gap: 14px; }
.u-row-sm { display: flex; flex-wrap: wrap; gap: 12px; }
.u-pt0 { padding-top: 0; }
.u-mt8 { margin-top: 8px; }
.u-mt26 { margin-top: 26px; }
.u-mt44 { margin-top: 44px; }
.u-mb16 { margin-bottom: 16px; }
.u-mb28 { margin-bottom: 28px; }
.u-mb44 { margin-bottom: 44px; }
.u-mb72 { margin-bottom: 72px; }
.u-right { text-align: right; }
.u-center { text-align: center; }
.u-muted { color: var(--gray); }
.u-fs13 { font-size: 13.5px; }
.u-fs14 { font-size: 14px; }
.btn-block { display: block; width: 100%; padding: 14px; }
@media (max-width: 768px) {
  /* 工具类在窄屏同样收敛，避免元素被逐个 overridden 后错位 */
  .u-mb72 { margin-bottom: 44px; }
  .u-mt44 { margin-top: 28px; }
}

/* —— 全局：尊重系统「减弱动态效果」 —— */
@media (prefers-reduced-motion: reduce) {
  /* 必须同时限制循环次数：只压时长不压次数，infinite 动画会变成 0.01ms 一次的
     高速频闪（元素疯狂跳动）——这正是"减少动效"电脑上剧烈抖动的真凶 */
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .hero-media { display: none; }
  .reveal { opacity: 1; transform: none; }
  .reveal.in .svc-card, .reveal.in .news-card, .reveal.in .feat-card, .reveal.in .quote-item,
  .reveal.in .badge, .reveal.in .contact-card, .reveal.in .adv-item, .reveal.in .flow-step, .reveal.in .qr-item,
  .sections-grid > * { animation: none; }
}