@charset "utf-8";
/* =====================================================================
   铁利达传播 TLD —— 官网样式
   设计语言：深海军蓝 + 天蓝 + 晨曦金，全幅影像 + 白色描边，稳重大气
   ===================================================================== */

/* ---------------------------------------------------------------------
   字体：思源黑体（Noto Sans SC）可变字体 · 本地子集
   · 覆盖 wght 100–900 —— 标题用 800、正文用 400，一个文件全搞定
   · 子集字符 = 站点全部用字 + GB2312 一级常用字（3755 字），共 3897 字符
     （覆盖日常写作 99% 以上用字，客户后续改文案基本不会缺字）
   · 体积 1.0MB，本地托管、零外部 CDN 依赖，可离线部署
   · font-display:swap —— 字体未就绪时先用系统字体渲染，不阻塞首屏
   · 如需重新生成子集：见 README「字体」章节
   --------------------------------------------------------------------- */
@font-face{
  font-family:"TLD Sans";
  src:url("../fonts/tld-sans-sc.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0b2c4d;          /* 主深色（取自品牌 logo） */
  --navy-deep:#06192e;
  --blue:#0a6bb8;          /* 品牌主蓝 */
  --blue-mid:#1086d4;
  --blue-bright:#1b9ce4;
  --sky:#e9f4fc;
  --sky-2:#f4f9fd;
  --gold:#d3a04a;          /* 晨曦金 */
  --gold-light:#e8c078;
  --ink:#12263a;
  --text:#3d5366;
  --text-2:#65798a;
  --line:#e2eaf2;
  --white:#fff;
  --radius:4px;
  --container:1240px;
  --shadow-sm:0 2px 10px rgba(11,44,77,.06);
  --shadow:0 6px 24px rgba(11,44,77,.09);
  --shadow-lg:0 16px 46px rgba(11,44,77,.16);
  --head-h:88px;
  --font:"TLD Sans","PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px)}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--font);
  font-size:16px;line-height:1.8;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--ink);font-weight:700;line-height:1.28;letter-spacing:-.005em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font-family:inherit;font-size:15px;color:inherit}
table{border-collapse:collapse;width:100%}
::selection{background:var(--blue);color:#fff}

/* ---------- 布局工具 ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 22px}
.container-wide{max-width:1560px}
.section{padding:90px 0}
.section-sm{padding:64px 0}
.bg-sky{background:var(--sky-2)}
.bg-dark{background:var(--navy-deep);color:rgba(255,255,255,.82)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{color:#fff}
/* 深色区块里的「白底卡片」例外：卡片内部标题必须回到深色。
   坑：上面那条 .bg-dark h3{color:#fff} 会一并命中白底 .biz-card / .flow-item 里的 h3，
   标题变成白字压在白底上 = 隐形。历史上 geo 服务板块、digital 基础设施板块都中过。 */
.bg-dark .biz-card h3,.bg-dark .flow-item h3,.bg-dark .case-card h3{color:var(--ink)}
.center{text-align:center}

/* 区块标题 */
.sec-head{max-width:800px;margin:0 auto 52px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.eyebrow{
  display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--blue);font-weight:600;margin-bottom:14px;
}
.bg-dark .eyebrow{color:var(--gold-light)}
.sec-title{font-size:clamp(28px,3.5vw,46px);letter-spacing:-.005em;font-weight:800;line-height:1.22}
.sec-title i{font-style:normal;color:var(--blue)}
.bg-dark .sec-title i{color:var(--gold-light)}
.sec-sub{margin-top:18px;font-size:16px;line-height:1.85;color:var(--text-2);text-wrap:pretty}
.bg-dark .sec-sub{color:rgba(255,255,255,.66)}
.sec-line{width:52px;height:3px;background:var(--gold);margin:20px auto 0;border-radius:2px}
.sec-head.left .sec-line{margin-left:0}
.bg-dark .sec-line{background:var(--gold-light)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 28px;border-radius:var(--radius);
  font-size:15px;font-weight:600;letter-spacing:.04em;
  transition:all .28s ease;white-space:nowrap;
}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(10,107,184,.28)}
.btn-primary:hover{background:var(--navy);box-shadow:0 10px 26px rgba(11,44,77,.32);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-outline{border:1.5px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:#fff}
.btn-gold{background:var(--gold);color:#3a2708}
.btn-gold:hover{background:var(--gold-light)}
.btn svg{width:17px;height:17px;flex:none}

/* =====================================================================
   顶部信息条
   ===================================================================== */
.topbar{
  background:var(--navy-deep);color:rgba(255,255,255,.72);
  font-size:12.5px;line-height:38px;letter-spacing:.02em;
}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:18px}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-left svg{width:14px;height:14px;color:var(--gold-light)}
.topbar-tip{display:flex;align-items:center;gap:16px}
.topbar-tip a:hover{color:#fff}
.topbar-tip span{opacity:.5}

/* =====================================================================
   头部导航
   ===================================================================== */
.site-header{
  position:sticky;top:0;z-index:80;background:#fff;
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s ease;
}
.site-header.is-stuck{box-shadow:0 6px 22px rgba(11,44,77,.10)}
.header-in{display:flex;align-items:center;gap:22px;min-height:var(--head-h)}
.logo{flex:none;display:flex;align-items:center;gap:12px}
.logo img{height:70px;width:auto;max-width:350px;object-fit:contain;display:block}
.logo-txt{display:flex;flex-direction:column;line-height:1.25}
.logo-txt b{font-size:19px;letter-spacing:.14em;color:var(--navy)}
.logo-txt span{font-size:11px;letter-spacing:.16em;color:var(--text-2)}

.main-nav{margin-left:auto}
.nav-list{display:flex;align-items:center}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  padding:0 13px;height:var(--head-h);font-size:15px;font-weight:500;color:var(--ink);
  transition:color .25s;
}
.nav-link::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .28s ease;
}
.nav-item:hover>.nav-link,.nav-item.active>.nav-link{color:var(--blue)}
.nav-item:hover>.nav-link::after,.nav-item.active>.nav-link::after{transform:scaleX(1)}
.nav-caret{width:9px;height:9px;flex:none;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.55}
/* 下拉 */
.sub-nav{
  position:absolute;left:0;top:100%;min-width:220px;background:#fff;
  border-top:3px solid var(--blue);box-shadow:var(--shadow-lg);
  padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .26s ease;
}
.nav-item:hover .sub-nav{opacity:1;visibility:visible;transform:translateY(0)}
.sub-nav a{display:block;padding:10px 22px;font-size:14.5px;color:var(--text);transition:all .2s}
.sub-nav a:hover{background:var(--sky);color:var(--blue);padding-left:27px}
/* 抽屉里的电话/留言入口，仅移动端显示 */
.nav-mobile-foot{display:none}

.header-tel{display:flex;align-items:center;gap:10px;flex:none;padding-left:18px;border-left:1px solid var(--line)}
.header-tel svg{width:28px;height:28px;color:var(--blue);flex:none}
.header-tel em{display:block;font-style:normal;font-size:11px;color:var(--text-2);letter-spacing:.06em;white-space:nowrap}
.header-tel b{font-size:18px;color:var(--navy);letter-spacing:.01em;white-space:nowrap}
.header-tel b a{color:inherit;text-decoration:none;transition:color .22s}
.header-tel b a:hover{color:var(--blue)}

.nav-toggle{
  display:none;width:46px;height:46px;margin-left:auto;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.nav-toggle i{display:block;width:20px;height:2px;background:var(--ink);transition:all .3s ease}
.nav-toggle.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open i:nth-child(2){opacity:0}
.nav-toggle.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mask{
  position:fixed;inset:0;background:rgba(6,25,46,.55);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:all .3s ease;z-index:88;
}
.nav-mask.show{opacity:1;visibility:visible}

/* =====================================================================
   首屏 Banner
   ===================================================================== */
.hero{
  position:relative;display:flex;align-items:center;overflow:hidden;
  padding:52px 0 72px;background:var(--navy-deep);
  /* 高度 = 视口可用高与 600/900 的夹逼值；内容更高时自动撑开，绝不裁切内容 */
  min-height:600px;
  min-height:min(900px,max(600px,calc(100vh - var(--head-h) - 38px)));
}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:heroZoom 22s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,25,46,.92) 0%,rgba(8,44,80,.78) 42%,rgba(10,107,184,.42) 72%,rgba(27,156,228,.28) 100%),
    linear-gradient(0deg,rgba(6,25,46,.62) 0%,transparent 45%);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-brand{
  font-size:clamp(34px,5.2vw,70px);color:#fff;letter-spacing:.1em;font-weight:800;
  line-height:1.12;margin-bottom:6px;text-shadow:0 4px 30px rgba(0,0,0,.3);
}
.hero-brand small{display:block;font-size:clamp(12px,1.35vw,17px);letter-spacing:.42em;font-weight:500;color:var(--gold-light);margin-top:13px}
.hero-slogan{
  font-size:clamp(15.5px,1.85vw,22px);color:rgba(255,255,255,.94);font-weight:500;
  letter-spacing:.08em;margin:24px 0 0;padding-left:20px;border-left:3px solid var(--gold);line-height:1.6;
}
.hero-desc{max-width:600px;margin-top:20px;font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.78);text-wrap:pretty}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-tags span{
  padding:8px 17px;border:1px solid rgba(255,255,255,.42);border-radius:100px;
  font-size:13px;color:rgba(255,255,255,.92);backdrop-filter:blur(4px);background:rgba(255,255,255,.06);
}
.hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-year{
  position:absolute;right:0;bottom:88px;z-index:2;text-align:right;
  font-size:clamp(30px,4.2vw,54px);font-weight:800;color:rgba(255,255,255,.16);
  letter-spacing:.06em;line-height:1;
}
.hero-year small{display:block;font-size:13px;letter-spacing:.3em;color:rgba(217,160,74,.7);margin-top:10px;font-weight:500}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.55);
}
.hero-scroll i{display:block;width:1px;height:36px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:scrollHint 1.8s ease-in-out infinite}
@keyframes scrollHint{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* 内页 banner */
.page-hero{
  position:relative;min-height:340px;display:flex;align-items:flex-end;
  padding:70px 0 52px;overflow:hidden;background:var(--navy-deep);
}
.page-hero-bg{position:absolute;inset:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,25,46,.9) 0%,rgba(8,44,80,.7) 55%,rgba(10,107,184,.42) 100%);
}
.page-hero-in{position:relative;z-index:2}
.page-hero h1{font-size:clamp(30px,4vw,52px);color:#fff;letter-spacing:.02em;font-weight:800}
.page-hero .en{display:block;font-size:12.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:16px}
.page-hero p{max-width:760px;margin:16px 0 0;color:rgba(255,255,255,.76);font-size:15px;line-height:1.95}

/* 面包屑 */
.crumb{background:var(--sky-2);border-bottom:1px solid var(--line);font-size:13.5px}
.crumb-in{display:flex;align-items:center;gap:8px;line-height:50px;color:var(--text-2);flex-wrap:wrap}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--blue)}
.crumb span.sep{opacity:.45}
.crumb em{font-style:normal;color:var(--ink)}
/* 单页首屏：面包屑后的第一个区块收紧上边距，避免大面积留白
   （正文自带 section 时，90px 的通用间距会让首屏显得很空） */
.crumb + section.section{padding-top:60px}

/* =====================================================================
   数据条
   ===================================================================== */
.stat-bar{
  position:relative;z-index:5;background:var(--navy);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
}
.stat-item{
  padding:44px 20px;text-align:center;background:var(--navy);
  border-right:1px solid rgba(255,255,255,.09);position:relative;
}
.stat-item:last-child{border-right:0}
.stat-item b{
  display:block;font-size:clamp(34px,4.2vw,58px);font-weight:800;color:#fff;line-height:1;
  letter-spacing:.02em;
}
.stat-item b i{font-style:normal;color:var(--gold-light);font-size:.56em;margin-left:3px;letter-spacing:0}
/* 必须用子选择器：数字本身也是 <b> 里的 <span>，用 .stat-item span 会连数字一起命中，
   把数字压成标签字号、并因 display:block 把后缀顶到下一行 */
.stat-item>span{display:block;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.7);letter-spacing:.1em}

/* =====================================================================
   通用栅格卡片
   ===================================================================== */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 四大业务体系 ---------- */
.biz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
/* 三卡版（关于页 DPE、新媒体基础设施）：只有 3 个卡片时用，避免 4 列右侧空一格。
   走与 .biz-grid 完全相同的响应式降级，不要写成内联 style ——
   内联 grid-template-columns 优先级高于媒体查询，手机上不会降列，
   会把卡片压成竖条、文字被 overflow:hidden 裁掉。 */
.biz-grid-3{grid-template-columns:repeat(3,1fr)}
/* 五卡版（首页五大业务体系）：一行排满，避免 4 列出现「4+1」的孤立卡。
   平板 1025~1199 降到 3 列；767 以下由 .biz-grid 统一降到 1 列。 */
.biz-grid-5{grid-template-columns:repeat(5,1fr);gap:20px}
.biz-grid-5 .biz-card{padding:34px 24px 30px}
.biz-grid-5 .biz-ico{width:56px;height:56px;margin-bottom:18px}
.biz-grid-5 .biz-ico svg{width:26px;height:26px}
.biz-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 28px 32px;transition:all .35s ease;overflow:hidden;
}
.biz-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .38s ease;
}
.biz-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:transparent}
.biz-card:hover::before{transform:scaleX(1)}
.biz-ico{
  width:62px;height:62px;border-radius:50%;background:var(--sky);
  display:flex;align-items:center;justify-content:center;margin-bottom:22px;
  transition:all .35s ease;
}
.biz-ico svg{width:29px;height:29px;color:var(--blue);transition:all .35s ease}
.biz-card:hover .biz-ico{background:var(--blue)}
.biz-card:hover .biz-ico svg{color:#fff}
.biz-card h3{font-size:22px;margin-bottom:14px;letter-spacing:0}
.biz-card ul li{
  position:relative;padding-left:15px;font-size:14.5px;line-height:2.1;color:var(--text-2);
}
.biz-card ul li::before{
  content:"";position:absolute;left:0;top:13px;width:5px;height:5px;
  background:var(--gold);border-radius:50%;
}
.biz-card .biz-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:13.5px;color:var(--blue);font-weight:600;
}
.biz-card .biz-more svg{width:14px;height:14px;transition:transform .3s}
.biz-card:hover .biz-more svg{transform:translateX(4px)}

/* ---------- GEO 覆盖平台条（用于深色区块） ---------- */
.geo-plat-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px}
.geo-plat-strip span{
  min-width:152px;padding:14px 26px;text-align:center;
  border:1px solid rgba(255,255,255,.22);border-radius:14px;
  background:rgba(255,255,255,.06);color:#fff;font-size:15.5px;font-weight:700;
  letter-spacing:.02em;transition:all .3s ease;
}
.geo-plat-strip span i{
  display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:rgba(255,255,255,.5);letter-spacing:.08em;margin-top:5px;
}
.geo-plat-strip span:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}

/* ---------- 媒体资源卡 ---------- */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.res-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  min-height:340px;background:var(--navy);
}
.res-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.res-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,25,46,.94) 0%,rgba(6,25,46,.55) 42%,rgba(6,25,46,.08) 100%);
}
.res-card:hover img{transform:scale(1.07)}
.res-body{position:relative;z-index:2;padding:32px 32px 30px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px}
.res-no{
  position:absolute;right:26px;top:22px;font-size:52px;font-weight:800;
  color:rgba(255,255,255,.16);line-height:1;letter-spacing:-.02em;
}
.res-body h3{font-size:26px;color:#fff;letter-spacing:0;margin-bottom:10px}
.res-body .en{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);font-weight:600;margin-bottom:16px}
.res-body p{color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.9;margin-bottom:18px}
.res-tags{display:flex;flex-wrap:wrap;gap:8px}
.res-tags span{
  padding:5px 13px;font-size:12.5px;color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.32);border-radius:100px;
}
.res-more{
  margin-top:20px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:600;color:var(--gold-light);
}
.res-more svg{width:15px;height:15px;transition:transform .3s}
.res-card:hover .res-more svg{transform:translateX(5px)}

/* ---------- 核心优势 ---------- */
.adv-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center}
.adv-pic{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.adv-pic img{width:100%;display:block}
/* 左图与右栏等高对齐（用于首页「关于」区块，配图需为高清横图，撑满后 object-fit:cover 裁切） */
.adv-wrap-eq{align-items:stretch}
.adv-wrap-eq .adv-pic img{height:100%;object-fit:cover}
.adv-pic .badge{
  position:absolute;right:0;bottom:0;background:var(--blue);color:#fff;
  padding:22px 28px;text-align:center;
}
.adv-pic .badge b{display:block;font-size:38px;line-height:1;font-weight:800}
.adv-pic .badge>span{font-size:12.5px;letter-spacing:.14em;opacity:.86;display:block}
.adv-list{display:grid;gap:20px}
.adv-item{
  display:flex;gap:20px;padding:24px 26px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);transition:all .32s ease;
}
.adv-item:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateX(5px)}
.adv-no{
  flex:none;width:46px;height:46px;border-radius:50%;background:var(--sky);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:var(--blue);letter-spacing:.02em;
}
.adv-item:hover .adv-no{background:var(--blue);color:#fff}
.adv-item h3{font-size:19px;margin-bottom:8px}
.adv-item p{margin:0;font-size:15px;line-height:1.8;color:var(--text-2)}

/* ---------- 数据/成绩卡 ---------- */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.metric{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 24px;border-top:3px solid var(--blue);transition:all .3s ease;
}
.metric:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.metric b{display:block;font-size:32px;font-weight:800;color:var(--blue);line-height:1.1}
.metric b i{font-style:normal;font-size:.6em}
.metric span{display:block;margin-top:10px;font-size:13.5px;color:var(--text-2);line-height:1.7}
.bg-dark .metric{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-top-color:var(--gold-light)}
.bg-dark .metric b{color:var(--gold-light)}
.bg-dark .metric span{color:rgba(255,255,255,.62)}

/* ---------- 客户 LOGO 墙 ---------- */
.logo-wall{
  display:grid;grid-template-columns:repeat(8,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.logo-wall-item{
  background:#fff;display:flex;align-items:center;justify-content:center;
  padding:22px 12px;min-height:96px;transition:all .3s ease;
}
.logo-wall-item:hover{background:var(--sky);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.logo-wall-item img{max-height:40px;width:auto;filter:grayscale(1);opacity:.62;transition:all .3s}
.logo-wall-item:hover img{filter:none;opacity:1}
.wall-pic{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.wall-pic img{width:100%;display:block}

/* ---------- 案例 ---------- */
.filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.filter button{
  padding:9px 22px;border:1px solid var(--line);border-radius:100px;
  font-size:14px;color:var(--text);background:#fff;transition:all .26s ease;
}
.filter button:hover{border-color:var(--blue);color:var(--blue)}
.filter button.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(10,107,184,.26)}

.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.case-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:all .36s ease;
}
.case-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:transparent}
.case-pic{display:block;position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--sky)}
.case-pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.case-card:hover .case-pic img{transform:scale(1.07)}
.case-cat{
  position:absolute;left:14px;top:14px;padding:5px 14px;border-radius:100px;
  background:rgba(6,25,46,.72);color:#fff;font-size:12px;backdrop-filter:blur(4px);
  letter-spacing:.06em;
}
/* 副标题没填时不留空胶囊（否则缩略图左上角会多出一块小黑块） */
.case-cat:empty{display:none}
.case-body{padding:24px 24px 26px}
.case-body h3{font-size:19px;line-height:1.45;margin-bottom:12px;min-height:55px}
.case-body p{margin:0;font-size:15px;line-height:1.75;color:var(--text-2)}
.case-data{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.case-data span{
  font-size:12.5px;color:var(--blue);background:var(--sky);padding:4px 11px;border-radius:3px;
}

/* ---------- 案例卡·内容兜底 ----------
   卡片里的「内容」字段只允许露出数据亮点（.case-data），
   其余正文一律隐藏，避免哪天写成长文把卡片撑爆。 */
.case-extra{overflow:hidden}
.case-extra>.case-data:first-child{margin-top:16px}
.case-card .case-extra>*:not(.case-data){display:none}
.case-card .case-extra:empty{display:none}

/* ---------- 分类筛选空状态 ---------- */
.filter-empty{
  margin:36px 0 0;padding:44px 20px;text-align:center;
  font-size:15px;color:var(--text-2);background:var(--sky-2);
  border:1px dashed var(--line);border-radius:var(--radius);
}
.filter-empty a{color:var(--blue);border-bottom:1px solid rgba(10,107,184,.3)}

/* ---------- 分页条（PbootCMS {page:bar} 输出结构） ---------- */
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;margin-top:52px;font-size:14.5px;color:var(--text-2);
}
.pager .page-status{margin-right:6px;font-size:13.5px;color:var(--text-2);letter-spacing:.02em}
.pager .page-index,.pager .page-last{display:none}
.pager .page-pre,.pager .page-next{display:inline-flex}
.pager .page-pre a,.pager .page-next a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:92px;height:40px;padding:0 18px;border:1px solid var(--line);
  border-radius:100px;color:var(--text);background:#fff;transition:all .25s;
}
.pager .page-pre a:hover,.pager .page-next a:hover{
  border-color:var(--blue);color:var(--blue);background:var(--sky);
}
.pager .page-numbar{display:inline-flex;gap:8px;margin:0 6px}
.pager .page-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);
  border-radius:100px;color:var(--text);background:#fff;
  font-variant-numeric:tabular-nums;transition:all .25s;
}
.pager a.page-num:hover{border-color:var(--blue);color:var(--blue);background:var(--sky)}
.pager .page-num-current,.pager a.page-num-current{
  background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600;
}
.pager .page-none{color:var(--text-2)}
.pager .page-prev-dis,.pager .page-next-dis{opacity:.4;pointer-events:none}

/* ---------- 正文图片兜底（后台传多大图都不会撑破版式） ---------- */
.rich img{max-width:100%;height:auto;display:block;margin:10px 0 26px;border-radius:var(--radius)}
.rich ol{margin:0 0 1.3em;padding-left:22px}
.rich ol li{margin-bottom:10px;list-style:decimal}
.case-detail .content img{margin-left:auto;margin-right:auto}

/* ---------- 荣誉 ---------- */
.award-wrap{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.award-pic{border-radius:var(--radius);overflow:hidden;background:#0d2238;display:flex;align-items:center;justify-content:center;padding:26px}
.award-pic img{max-height:420px;width:auto;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.award-list{display:grid;gap:18px;align-content:center}
.award-item{
  display:flex;gap:18px;align-items:flex-start;padding:22px 24px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius);
}
.award-item svg{width:26px;height:26px;color:var(--gold);flex:none;margin-top:3px}
.award-item h3{font-size:16.5px;margin-bottom:6px}
.award-item p{margin:0;font-size:14px;color:var(--text-2);line-height:1.8}

/* ---------- 时间轴 ---------- */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--blue),var(--gold))}
.tl-item{position:relative;padding-bottom:34px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:6px;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
}
.tl-item b{display:block;font-size:20px;color:var(--blue);font-weight:800;letter-spacing:.02em;margin-bottom:6px}
.tl-item h3{font-size:16.5px;margin-bottom:6px}
.tl-item p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.85}

/* ---------- 正文排版 ---------- */
.article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:60px 64px}
.article-in{max-width:900px;margin:0 auto}
.rich{font-size:16px;line-height:2.05;color:var(--text)}
.rich h2{font-size:24px;margin:44px 0 18px;padding-left:16px;border-left:4px solid var(--blue);letter-spacing:.02em}
.rich h2:first-child{margin-top:0}
.rich h3{font-size:19px;margin:32px 0 14px;color:var(--blue)}
.rich p{margin:0 0 1.2em}
.rich strong{color:var(--ink);font-weight:700}
.rich a{color:var(--blue);border-bottom:1px solid rgba(10,107,184,.3)}
.rich a:hover{border-bottom-color:var(--blue)}
.rich ul{margin:0 0 1.3em;padding-left:0}
.rich ul li{position:relative;padding-left:22px;margin-bottom:10px}
.rich ul li::before{content:"";position:absolute;left:4px;top:13px;width:6px;height:6px;background:var(--gold);border-radius:50%}
.rich blockquote{
  margin:26px 0;padding:22px 26px;background:var(--sky-2);border-left:4px solid var(--gold);
  color:var(--text);font-size:15.5px;
}
.rich blockquote p:last-child{margin-bottom:0}

/* ---------- 正文抗粘贴污染 ----------
   后台富文本里从 Word / 微信 / 其他网站粘过来的内容，带 font-size:14px、
   font-family:宋体 这类内联样式，内联优先级高于样式表，会让正文一段大一段小、
   字体和网站不统一。以下规则把正文内部统一拉回本站排版。
   （后台编辑区同步改了 core/extend/ueditor/themes/iframe.css，所见即所得） */
.rich, .rich *{font-family:var(--font)!important}
.rich p,.rich span,.rich font,.rich li,.rich td,.rich th,.rich div,
.rich strong,.rich b,.rich em,.rich i,.rich u,.rich small,.rich big,
.rich section,.rich article{font-size:inherit!important;line-height:inherit!important}
.rich h1{font-size:26px!important;line-height:1.45!important;margin:40px 0 16px!important}
.rich h2{font-size:24px!important;line-height:1.45!important;margin:44px 0 18px!important}
.rich h2:first-child{margin-top:0!important}
.rich h3{font-size:19px!important;line-height:1.5!important;margin:32px 0 14px!important}
.rich h4{font-size:17px!important;line-height:1.55!important;margin:26px 0 12px!important}
.rich h5,.rich h6{font-size:16px!important}
.rich p{margin:0 0 1.2em!important}
.rich sup,.rich sub{font-size:75%!important}
.rich img{max-width:100%!important;height:auto!important}
/* 数据亮点蓝标签有自己的设计，不参与上面的字号统一 */
.rich .case-data span{font-size:12.5px!important;line-height:1.5!important}

/* ---------- 刊例表格 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;-webkit-overflow-scrolling:touch}
table.data{min-width:760px;font-size:14px}
table.data thead th{
  background:var(--navy);color:#fff;font-weight:600;font-size:14px;
  padding:15px 16px;text-align:left;white-space:nowrap;letter-spacing:.04em;
}
table.data tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--text);line-height:1.7}
table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:nth-child(even){background:#fafcfe}
table.data tbody tr:hover{background:var(--sky)}
table.data td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
table.data td.price{color:#c0392b;font-weight:700;white-space:nowrap}
table.data td.lv{font-weight:700;color:var(--blue)}
.table-note{margin-top:14px;font-size:13px;color:var(--text-2);line-height:1.9}
/* 手机端提示表格可横向滑动（桌面端表格放得下，不显示） */
.table-swipe{
  display:none;margin:0 0 9px;font-size:12.5px;color:var(--blue);
  background:var(--sky);border:1px solid rgba(10,107,184,.16);
  border-radius:999px;padding:5px 14px;text-align:center;letter-spacing:.04em;
}

/* ---------- 标签组（浅色底） ---------- */
.tag-list{display:flex;flex-wrap:wrap;gap:9px}
.tag-list span{
  padding:6px 15px;font-size:13px;color:var(--blue);background:var(--sky);
  border:1px solid #d3e6f5;border-radius:100px;transition:all .24s ease;
}
.tag-list span:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.dig-list li{
  position:relative;padding-left:16px;font-size:14.5px;color:var(--text-2);line-height:2;
}
.dig-list li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:5px;background:var(--gold);border-radius:50%}

/* ---------- 媒体优势三栏 ---------- */
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plus{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:30px 26px;transition:all .32s ease;
}
.plus:hover{background:rgba(255,255,255,.11);transform:translateY(-4px)}
.plus h3{font-size:19px;margin-bottom:12px;letter-spacing:.03em}
.plus p{margin:0;font-size:14.5px;line-height:1.9;color:rgba(255,255,255,.72)}
.light .plus{background:#fff;border-color:var(--line)}
.light .plus:hover{box-shadow:var(--shadow);background:#fff}
.light .plus p{color:var(--text-2)}

/* ---------- 参数表（键值） ---------- */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.kv-item{background:#fff;padding:20px 24px;display:flex;gap:14px;align-items:baseline}
.kv-item dt{flex:none;width:88px;font-size:13.5px;color:var(--text-2);letter-spacing:.04em}
.kv-item dd{margin:0;font-size:15px;color:var(--ink);font-weight:600;line-height:1.7}

/* ---------- 流程 ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:flow}
.flow-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 22px 26px;text-align:center;transition:all .3s ease}
.flow-item:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-5px)}
.flow-item b{
  display:block;width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
  background:var(--blue);color:#fff;font-size:16px;line-height:44px;font-weight:800;
}
.flow-item h3{font-size:16px;margin-bottom:9px}
.flow-item p{margin:0;font-size:13.5px;color:var(--text-2);line-height:1.8}
/* 四步流程（GEO 服务流程）：宽屏一行 4 格；
   平板及以下不必单独写规则 —— .flow-4 元素同时带 .flow 类，
   会跟着 .flow 的断点规则一起降列（3 列 → 2 列 → 1 列）。 */
.flow-4{grid-template-columns:repeat(4,1fr)}

/* ---------- FAQ ---------- */
.faq{max-width:920px;margin:0 auto}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.faq-item summary{
  position:relative;padding:20px 62px 20px 26px;font-size:16.5px;font-weight:600;color:var(--ink);
  cursor:pointer;list-style:none;line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:28px;top:28px;width:9px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg);transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);top:32px}
.faq-item[open] summary{color:var(--blue);background:var(--sky-2)}
.faq-item summary:hover{color:var(--blue)}
.faq-ans-in{padding:4px 26px 24px;font-size:15px;line-height:1.95;color:var(--text-2)}
.faq-ans-in p:last-child{margin-bottom:0}

/* ---------- CTA ---------- */
.cta{position:relative;padding:76px 0;overflow:hidden;background:var(--navy)}
.cta-bg{position:absolute;inset:0}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,25,46,.94),rgba(10,107,184,.66))}
.cta-in{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:30px}
.cta-in h2{font-size:clamp(23px,2.8vw,34px);color:#fff;letter-spacing:.04em}
.cta-in p{margin:12px 0 0;color:rgba(255,255,255,.72);font-size:15px}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.cta-tel{display:flex;align-items:center;gap:12px;color:#fff}
.cta-tel svg{width:32px;height:32px;color:var(--gold-light)}
.cta-tel em{display:block;font-style:normal;font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.08em}
.cta-tel b a{transition:color .22s}
.cta-tel b a:hover{color:var(--gold-light)}
.cta-tel b{font-size:26px;letter-spacing:.02em}

/* =====================================================================
   页脚
   ===================================================================== */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.6);font-size:14px}
.footer-main{
  display:grid;grid-template-columns:1.35fr 1fr 1fr 1.15fr;gap:44px;
  padding:64px 0 50px;
}
.footer-main h4{font-size:16px;color:#fff;margin-bottom:22px;letter-spacing:.08em;position:relative;padding-bottom:14px}
.footer-main h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--gold)}
.footer-brand img{height:52px;width:auto;margin-bottom:22px}
.footer-brand p{line-height:2;margin-bottom:10px}
.footer-brand .fb-tag{color:var(--gold-light);font-size:13.5px;letter-spacing:.04em}
.footer-links li{margin-bottom:12px}
.footer-links a{transition:all .24s}
.footer-links a:hover{color:#fff;padding-left:6px}
.footer-contact li{display:flex;gap:12px;margin-bottom:16px;line-height:1.8}
.footer-contact li>div{min-width:0;text-wrap:pretty}
.footer-contact svg{width:17px;height:17px;color:var(--gold-light);flex:none;margin-top:6px}
.footer-contact b{display:block;color:#fff;font-size:20px;letter-spacing:.02em;font-weight:700}
/* 页脚电话/邮箱可点（tap 直接拨号、发信） */
.footer-contact a{transition:color .22s}
.footer-contact a:hover{color:var(--gold-light)}
.footer-contact em{display:block;font-style:normal;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.1em;margin-bottom:2px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13px}
.footer-bottom-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer-bottom a:hover{color:#fff}

/* =====================================================================
   浮动工具条 / 移动端底栏
   ===================================================================== */
.side-tools{position:fixed;right:18px;bottom:96px;z-index:60;display:flex;flex-direction:column;gap:10px}
.side-btn{
  width:52px;height:52px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(11,44,77,.18);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;
  transition:all .28s ease;border:1px solid var(--line);
}
.side-btn svg{width:21px;height:21px;color:var(--blue);transition:color .28s}
.side-btn em{font-style:normal;font-size:9.5px;color:var(--text-2);letter-spacing:.02em}
.side-btn:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-3px)}
.side-btn:hover svg,.side-btn:hover em{color:#fff}
.side-btn.top{opacity:0;visibility:hidden;transform:translateY(10px)}
.side-btn.top.show{opacity:1;visibility:visible;transform:none}

.mobile-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 16px rgba(11,44,77,.1);
  padding-bottom:env(safe-area-inset-bottom,0);
}
.mobile-bar-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 0 10px;font-size:11.5px;color:var(--text-2);
}
.mobile-bar-item svg{width:20px;height:20px;color:var(--blue)}
.mobile-bar-item.on{color:var(--blue)}

/* 装修条（滚动进度） */
.scroll-bar{position:fixed;left:0;top:0;height:3px;width:0;z-index:99;background:linear-gradient(90deg,var(--blue),var(--gold-light))}

/* 返回表单提示 */
.form-tip{
  display:none;align-items:center;gap:9px;margin-bottom:18px;padding:13px 18px;
  background:#edf7ee;border:1px solid #c9e6cd;border-radius:var(--radius);
  color:#2c6b35;font-size:14.5px;
}
.form-tip.show{display:flex}
.form-tip svg{width:18px;height:18px;flex:none}

/* =====================================================================
   留言表单
   ===================================================================== */
.msg-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.msg-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 36px;box-shadow:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-row.single{grid-template-columns:1fr}
.msg-form input,.msg-form textarea,.msg-form select{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fbfdff;transition:all .25s ease;font-size:15px;
}
.msg-form textarea{resize:vertical;min-height:118px;line-height:1.8}
.msg-form input:focus,.msg-form textarea:focus,.msg-form select:focus{
  outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(10,107,184,.1);
}
.msg-form input.err,.msg-form textarea.err{border-color:#d64545;background:#fdf4f4}
.field-err{display:none;margin-top:6px;font-size:12.5px;color:#d64545}
.field-err.show{display:block}
.msg-form .btn{width:100%;margin-top:6px}
.form-note{margin-top:16px;font-size:12.5px;color:var(--text-2);line-height:1.8}
.captcha-row{display:flex;gap:12px;align-items:center}
.captcha-row input{flex:1;min-width:0}
.captcha-row img{height:48px;width:auto;border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#fff;flex:none}
/* 留言区只剩联系方式一栏时，自动拉通整行 */
.msg-wrap>:only-child{grid-column:1/-1}

.contact-list{display:grid;gap:22px}
.contact-item{display:flex;gap:18px;align-items:flex-start}
.contact-item .ci{
  flex:none;width:50px;height:50px;border-radius:50%;background:var(--sky);
  display:flex;align-items:center;justify-content:center;
}
.contact-item .ci svg{width:22px;height:22px;color:var(--blue)}
.contact-item h3{font-size:15px;margin-bottom:6px;letter-spacing:.04em}
.contact-item p{margin:0;font-size:15px;color:var(--ink);line-height:1.8}
.contact-item p small{display:block;color:var(--text-2);font-size:13px;margin-top:4px}
/* 联系页电话/邮箱可点 */
.contact-item p a{transition:color .22s}
.contact-item p a:hover{color:var(--blue)}

/* 侧栏 */
.page-body{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
/* grid 子项默认 min-width:auto，会被内部宽表格的 min-content 撑破容器，
   导致整页横向滚动。解除后交给 .table-wrap 自己做横向滚动。 */
.page-body>*{min-width:0}
.page-body .table-wrap{max-width:100%}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:24px;overflow:hidden}
.side-box h3{
  font-size:16.5px;padding:18px 22px;border-bottom:1px solid var(--line);
  background:var(--sky-2);letter-spacing:.04em;
}
.side-nav li a{
  display:block;padding:14px 22px;border-bottom:1px solid var(--line);
  font-size:14.5px;transition:all .24s ease;position:relative;
}
.side-nav li:last-child a{border-bottom:0}
.side-nav li a:hover,.side-nav li.on a{background:var(--sky);color:var(--blue);padding-left:28px}
.side-nav li.on a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.side-cta{padding:26px 22px;text-align:center;background:var(--navy);color:#fff}
.side-cta h3{background:none;border:0;color:#fff;padding:0 0 12px;font-size:17px}
.side-cta p{font-size:13.5px;color:rgba(255,255,255,.66);margin-bottom:18px}
.side-cta b{display:block;font-size:21px;color:var(--gold-light);margin-bottom:18px;letter-spacing:.02em}
.side-cta .btn{width:100%}

/* =====================================================================
   滚动入场动效
   ===================================================================== */
html.js-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
html.js-ready .reveal.in{opacity:1;transform:none}
html.js-ready .reveal.d1{transition-delay:.07s}
html.js-ready .reveal.d2{transition-delay:.14s}
html.js-ready .reveal.d3{transition-delay:.21s}
html.js-ready .reveal.d4{transition-delay:.28s}

/* =====================================================================
   响应式 —— 平板 1025~1199
   ===================================================================== */
@media (max-width:1199px){
  .header-in{gap:14px}
  .nav-link{padding:0 10px;font-size:14.5px}
  .nav-link::after{left:10px;right:10px}
  .header-tel{padding-left:14px}
  .header-tel b{font-size:16.5px}
  .header-tel em{display:none}
  .logo img{height:56px}
  .biz-grid,.biz-grid-3{grid-template-columns:repeat(2,1fr)}
  .biz-grid-5{grid-template-columns:repeat(3,1fr)}
  .logo-wall{grid-template-columns:repeat(6,1fr)}
  .flow{grid-template-columns:repeat(3,1fr)}
}

/* =====================================================================
   响应式 —— 平板竖屏 / 手机横屏 768~1024：导航收抽屉
   ===================================================================== */
@media (max-width:1024px){
  :root{--head-h:72px}
  .nav-toggle{display:flex}
  .header-tel{display:none}
  .main-nav{
    position:fixed;top:0;right:0;bottom:0;width:82%;max-width:340px;
    background:#fff;padding:22px 0 40px;overflow-y:auto;z-index:90;
    box-shadow:-8px 0 34px rgba(11,44,77,.18);
    transform:translateX(102%);transition:transform .34s cubic-bezier(.4,0,.2,1);
    margin-left:0;
  }
  .main-nav.is-open{transform:none}
  .nav-list{flex-direction:column;align-items:stretch}
  .nav-item{border-bottom:1px solid var(--line)}
  .nav-link{height:auto;padding:16px 24px;font-size:16px;justify-content:space-between}
  .nav-link::after{display:none}
  .nav-caret{transform:rotate(-45deg);transition:transform .3s}
  .nav-item.open .nav-caret{transform:rotate(45deg)}
  .sub-nav{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border-top:0;border-left:0;background:var(--sky-2);padding:0;
    max-height:0;overflow:hidden;transition:max-height .34s ease;
  }
  .nav-item.open .sub-nav{max-height:340px}
  .sub-nav a{padding:12px 38px}
  .nav-mobile-foot{display:block;padding:24px 24px 0;border-top:1px solid var(--line);margin-top:18px}
  .nav-mobile-foot a{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--navy);font-weight:600;margin-bottom:14px}
  .nav-mobile-foot svg{width:19px;height:19px;color:var(--blue)}

  .hero{height:auto;min-height:0;padding:88px 0 96px}
  .hero-year{position:static;text-align:left;margin-top:34px;font-size:34px}
  .hero-scroll{display:none}
  .adv-wrap{grid-template-columns:1fr;gap:38px}
  .res-grid{grid-template-columns:1fr}
  .case-grid{grid-template-columns:repeat(2,1fr)}
  .metric-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .page-body{grid-template-columns:1fr;gap:34px}
  .msg-wrap{grid-template-columns:1fr;gap:38px}
  .award-wrap{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 1fr;gap:34px}
  .article{padding:40px 32px}
  .stat-bar{grid-template-columns:repeat(2,1fr)}
  .stat-item:nth-child(2){border-right:0}
  .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid rgba(255,255,255,.09)}
  .plus-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .logo-wall{grid-template-columns:repeat(4,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   响应式 —— 手机 ≤767
   ===================================================================== */
@media (max-width:767px){
  body{font-size:15px}
  .topbar{line-height:34px;font-size:11.5px}
  .topbar-tip{display:none}
  .topbar-in{justify-content:center}
  .logo img{height:46px}
  .logo-txt b{font-size:16px}
  .logo-txt span{display:none}
  .section{padding:60px 0}
  .section-sm{padding:44px 0}
  .sec-head{margin-bottom:36px}
  .sec-sub{font-size:14.5px}
  .container{padding:0 18px}

  .hero{padding:70px 0 76px}
  .hero-brand{letter-spacing:.06em}
  .hero-slogan{padding-left:16px;margin-top:20px}
  .hero-btns .btn{flex:1 1 auto}
  .hero-tags span{padding:7px 14px;font-size:12.5px}

  .page-hero{min-height:auto;padding:52px 0 38px}
  .page-hero p{font-size:14.5px}
  .crumb-in{line-height:44px;font-size:13px}

  .stat-item{padding:30px 14px}
  .grid-2,.grid-3,.grid-4,.biz-grid,.biz-grid-3,.case-grid,.metric-grid,.flow{grid-template-columns:1fr;gap:18px}
  .biz-card{padding:30px 22px 26px}
  .geo-plat-strip{gap:10px;margin-top:28px}
  .geo-plat-strip span{min-width:0;flex:1 1 44%;padding:11px 12px;font-size:14px}
  .geo-plat-strip span i{font-size:10.5px;margin-top:3px}
  .res-card{min-height:290px}
  .res-body{padding:26px 22px;min-height:290px}
  .res-no{font-size:40px;right:18px;top:16px}
  .adv-item{padding:20px;gap:15px}
  .case-body{padding:20px 20px 22px}
  .case-body h3{font-size:16.5px;min-height:0}
  .article{padding:28px 20px}
  .rich{font-size:15.5px;line-height:1.95}
  .rich h2{font-size:20px;margin:34px 0 14px}
  .rich h3{font-size:17.5px}
  .msg-form{padding:26px 20px}
  .form-row{grid-template-columns:1fr;gap:14px}
  .cta{padding:56px 0}
  .cta-tel b{font-size:22px}
  .footer-main{grid-template-columns:1fr;padding:44px 0 34px;gap:30px}
  .footer-bottom-in{justify-content:center;text-align:center}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .logo-wall-item{min-height:76px;padding:14px 8px}
  .logo-wall-item img{max-height:28px}
  .award-pic{padding:18px}
  .award-pic img{max-height:320px}
  .side-tools{display:none}
  .mobile-bar{display:flex}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .table-swipe{display:block}
  .hero-year{font-size:28px}
  table.data{font-size:13px}
  table.data thead th,table.data tbody td{padding:11px 12px}
}

@media (max-width:480px){
  .hero-brand{font-size:34px}
  .hero-tags{gap:8px}
  .banner-btns .btn{width:100%}
  .cta-in h2{font-size:22px}
  .stat-item b{font-size:32px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
}

/* 横屏手机：视口矮的时候首屏降高 */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:52px 0 60px}
  .page-hero{min-height:auto;padding:40px 0 30px}
}

/* =====================================================================
   触摸设备：去掉 hover 位移带来的"点两次才跳转"
   ===================================================================== */
@media (hover:none){
  .biz-card:hover,.res-card:hover,.case-card:hover,.metric:hover,.adv-item:hover,
  .plus:hover,.flow-item:hover,.logo-wall-item:hover,.btn-primary:hover,.side-btn:hover,
  .award-pic:hover{transform:none}
  .res-card:hover img,.case-card:hover .case-pic img{transform:none}
  .btn:active{opacity:.85}
  .biz-card:active,.case-card:active{box-shadow:var(--shadow);border-color:var(--blue)}
  .msg-form input,.msg-form textarea,.msg-form select{font-size:16px}
}

/* 触摸目标下限 */
.nav-link,.mobile-bar-item,.side-btn,.filter button,.crumb a{min-height:44px}
.filter button{display:inline-flex;align-items:center;justify-content:center}
.crumb a{min-height:auto}

/* =====================================================================
   矮视口适配 —— 让首屏 hero 内容完整落在第一屏
   覆盖笔记本常见的 768 / 720 / 600 高度，以及浏览器缩放后的等效矮视口
   （仅桌面宽度生效；≤1024 的平板/手机断点本就是内容自适应高度）
   ===================================================================== */
@media (min-width:1025px) and (max-height:860px){
  .hero{padding:40px 0 56px}
  .hero-slogan{margin-top:18px}
  .hero-desc{margin-top:14px;line-height:1.85}
  .hero-tags{margin-top:20px}
  .hero-btns{margin-top:32px}
  .hero-year{bottom:52px}
  .hero-scroll{bottom:20px}
}

/* 极矮视口：标题比大屏基准再提一档，靠间距与行宽腾空间 */
@media (min-width:1025px) and (max-height:680px){
  .hero{min-height:calc(100vh - var(--head-h) - 38px);padding:16px 0 20px}
  .hero-brand{font-size:clamp(36px,5.6vw,64px);letter-spacing:.05em;margin-bottom:0}
  .hero-brand small{margin-top:6px;letter-spacing:.34em}
  .hero-slogan{font-size:clamp(16px,1.95vw,23px);margin-top:11px;padding-left:15px;line-height:1.44}
  .hero-desc{margin-top:10px;line-height:1.6;max-width:760px}
  .hero-tags{margin-top:13px;gap:8px}
  .hero-tags span{padding:7px 14px}
  .hero-btns{margin-top:28px;gap:12px}
  .hero-year{bottom:26px}
  .hero-year small{font-size:11px;margin-top:6px}
  .hero-scroll{display:none}
}

/* 平板宽度 + 矮视口（含超小窗口、高缩放比） */
@media (min-width:768px) and (max-width:1024px) and (max-height:820px){
  .hero{padding:36px 0 44px}
  .hero-brand{font-size:clamp(35px,5.6vw,62px);letter-spacing:.05em}
  .hero-slogan{font-size:clamp(16px,1.95vw,22px);margin-top:13px;line-height:1.44}
  .hero-desc{margin-top:11px;line-height:1.68;max-width:700px}
  .hero-tags{margin-top:15px;gap:8px}
  .hero-tags span{padding:7px 14px}
  .hero-btns{margin-top:26px;gap:12px}
  .hero-year{margin-top:24px}
}

/* 手机矮屏（iPhone SE / 小屏安卓）：只收间距，字号保持基准 */
@media (max-width:767px) and (max-height:700px){
  .hero{padding:36px 0 42px}
  .hero-slogan{margin-top:14px;line-height:1.45}
  .hero-desc{margin-top:12px;line-height:1.72}
  .hero-tags{margin-top:14px;gap:6px}
  .hero-tags span{padding:6px 12px}
  .hero-btns{margin-top:24px;gap:10px}
  .hero-btns .btn{min-height:42px;padding:0 18px}
  .hero-year{margin-top:18px}
}

/* ---------- 案例详情页（PbootCMS 定制） ---------- */
.case-detail{max-width:880px;margin:0 auto}
.case-detail-head{margin-bottom:36px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.case-detail-head .case-cat{position:static;display:inline-block;margin-bottom:16px;background:var(--blue);color:#fff;padding:6px 16px;border-radius:100px;font-size:13px;letter-spacing:.06em}
.case-detail-head .case-cat:empty{display:none}
.case-detail-head h2{font-size:30px;line-height:1.4;margin:0 0 16px;color:var(--ink)}
.case-detail-desc{font-size:16px;line-height:1.85;color:var(--text-2);margin:0}
.case-detail .content{font-size:16px;line-height:1.9;color:var(--text)}
.case-detail .content .case-data{margin-top:24px;padding-top:20px}
.case-detail-nav{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-2)}
.case-detail-nav a{color:var(--blue)}
.case-body h3 a{color:inherit;text-decoration:none}
.case-body h3 a:hover{color:var(--blue)}

@media (max-width:767px){
  .case-detail-head h2{font-size:23px}
  .case-detail-nav{flex-direction:column;gap:8px}
}

@media print{
  .topbar,.site-header,.side-tools,.mobile-bar,.site-footer,.scroll-bar,.cta{display:none}
  .article{border:0;padding:0}
  .page-hero{min-height:auto;background:#fff}
  .page-hero::after{display:none}
  .page-hero h1,.page-hero .en,.page-hero p{color:#000}
}


/* TLD-FIX-20261030-MEDIA-LAYOUT */
/* 媒体资源页「事实速览」区块排版修复
   原因：该区块复用了 .page-body 两列网格（1fr + 300px 侧栏），
         但区块内没有侧栏、也没有包裹层，内容块被当成独立网格项
         交替排进左右两列，导致三栏数据被压进 300px 窄列、中文竖排。
   处理：无侧栏的 page-body 改为单列；同时给区块内容兜底占满整行。
         该补丁与 HTML 结构无关，重复执行只会写一次。 */

/* ① 新版区块（若脚本改用 page-geo 类）直接单列 */
.page-geo{display:block}

/* ② 已在线的旧版区块：page-body 内没有侧栏，改单列并清掉行距 */
.page-body:not(:has(> .page-side)){grid-template-columns:1fr;gap:0}

/* ③ 兜底：不支持 :has 的浏览器，让区块内容各占整行 */
.page-body>.sec-head,
.page-body>.plus-grid,
.page-body>.grid,
.page-body>.faq,
.page-body>.form-tip,
.page-body>.table-wrap{grid-column:1/-1}


/* TLD-FIX2-20261030-MEDIA-LAYOUT */
/* 媒体资源页：内容归左列，侧栏固定在右列并跟随滚动
   背景：追加的 GEO 内容块掉出了包裹层，成了 .page-body 的直接子元素，
         被网格（1fr + 300px）交替分配，导致三栏被压窄、右侧留白。
   处理：所有非侧栏块统一进第 1 列，侧栏独占第 2 列并跨满全部行高，
         再用 sticky 让它跟随滚动，右侧不再出现空白条。 */

.page-body {
    grid-template-columns: 1fr 300px !important;
    row-gap: 0 !important;
    column-gap: 44px !important;
}

.page-body > *:not(.page-side) {
    grid-column: 1 !important;
    min-width: 0 !important;
}

.page-body > .page-side {
    grid-column: 2 !important;
    grid-row: 1 / span 60 !important;
    align-self: start !important;
    position: sticky !important;
    top: calc(var(--head-h, 88px) + 16px) !important;
}

/* 窄屏：侧栏回到内容下方，单列排布 */
@media (max-width: 980px) {
    .page-body {
        grid-template-columns: 1fr !important;
        row-gap: 0 !important;
    }
    .page-body > .page-side {
        grid-column: 1 !important;
        grid-row: auto !important;
        position: static !important;
        margin-top: 48px;
    }
}

/* TLD-FIX3-20261030 · 媒体资源页 GEO 区块：无侧栏的 page-body 被强制成两列，
   右侧留下 300px 空列，内容被挤进 852px；同时 .faq 的 margin:0 auto 在网格项上
   被 auto margin 收缩成 470px 窄条并居中。此处改为单列满宽，FAQ 跟随满宽。
   与模板、内容无关，纯样式覆盖，重复执行只写一次。 */
.page-body:not(:has(> .page-side)) {
  grid-template-columns: 1fr !important;
}
.page-body:not(:has(> .page-side)) > * {
  grid-column: 1 / -1 !important;
}
.page-body:not(:has(> .page-side)) > .faq {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}