/* ============================================================
   EESON 官网 · Apple 设计语言 v2
   原则:灰阶克制 / 唯一蓝链接 / 编辑式排版 / 大圆角实心卡
        液态玻璃只用于顶栏等悬浮控件,不做满屏玻璃卡
   ============================================================ */
:root{
  --bg:#fff;
  --bg-gray:#f5f5f7;
  --chip:#e8e8ed;
  --hairline:#d2d2d7;
  --text:#1d1d1f;
  --sub:#6e6e73;
  --small:#86868b;
  --link:#0066cc;
  --link-dark:#2997ff;
  --accent:#2997ff;      /* 黑场撞色:只用于 Hero 装饰层,不进正文 */
  --btn:#0071e3;
  --btn-hover:#0077ed;
  --dark:#000;
  --dark-text:#f5f5f7;
  --dark-sub:#86868b;
  --radius-lg:30px;
  --radius-md:22px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --max:1024px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg-gray);}
/* 画布底色设成页脚同色:页面比窗口短时,页脚灰底下面不会露出一截白 */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:var(--link);}
.sr-h1{position:absolute;left:-9999px;top:0;}

/* ---------- 旧 .glass 类全部退化为干净实心卡(保持 HTML 兼容) ---------- */
.glass{background:#fff;border:0;box-shadow:none;border-radius:var(--radius-md);
  -webkit-backdrop-filter:none;backdrop-filter:none;position:relative;overflow:hidden;}
.glass::before{display:none;}
.dark .glass,.glass.dark{background:transparent;border:0;box-shadow:none;}

/* ---------- 顶栏:唯一的液态玻璃 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:48px;
  background:rgba(251,251,253,.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  transition:background .4s var(--ease);
}
.nav.scrolled{background:rgba(251,251,253,.86);}
.nav-inner{max-width:var(--max);height:100%;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:26px;}
.nav-logo{display:flex;align-items:center;gap:8px;color:var(--text);}
.nav-logo img{height:22px;width:22px;}
.nav-logo b{font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;}
.nav-links{margin-left:auto;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  color:rgba(29,29,31,.72);font-size:12.5px;white-space:nowrap;padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links a:hover{color:#000;}
.nav-links a.active{color:#000;font-weight:600;}
.nav-links a.ext{color:rgba(29,29,31,.72);}
.nav-links a.ext:hover{color:var(--link);}
@media(max-width:640px){.nav-logo b{display:none;}.nav-inner{gap:16px;}.nav-links{gap:20px;}}

/* ---------- 通用章节节奏 ---------- */
.section{max-width:var(--max);margin:0 auto;padding:110px 22px;}
.section+.section{padding-top:26px;}   /* 相邻章节不叠加满额上边距 */
.section.wide{max-width:1200px;}      /* 产品网格比正文栏更宽(苹果的产品网格都宽于文字栏) */
/* 尾部收口:首页最后两节不用满额留白,否则整页越往下越空 */
.section.tail{padding-top:24px;padding-bottom:88px;}
.kicker{
  text-align:center;font-size:12px;font-weight:500;letter-spacing:.14em;
  color:var(--small);margin-bottom:12px;
}
.h2{
  text-align:center;font-size:clamp(30px,4.2vw,46px);font-weight:600;
  letter-spacing:-.018em;line-height:1.12;margin-bottom:48px;color:var(--text);
}
.kicker+.h2{margin-bottom:52px;}
.lede{text-align:center;font-size:16px;color:var(--sub);max-width:600px;margin:0 auto 48px;line-height:1.7;}
.chevron{font-size:17px;}
.chevron::after{content:" ›";}
.chevron:hover{text-decoration:underline;}

/* ---------- 滚动渐现 ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal-scale{opacity:0;transform:scale(.96) translateY(18px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.reveal-scale.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-scale{opacity:1;transform:none;transition:none;}
  .float-a,.float-b{animation:none !important;}
  .ripple{animation:none;opacity:0;}
}

/* ============================================================
   首页
   ============================================================ */

/* ---------- Hero:默认静态;JS 启用 .runway 后变为滚动驱动(旋转+放大) ----------
   黑场靠两层撑住,不靠"整体调亮"(调亮会在退场时糊成灰雾):
     ① 极淡的中心提亮 —— 让黑不是死平面
     ② 舞台光池(--stage)—— 吸合时亮起,像产品落在打光台上 */
.hero{
  --stage:0;
  position:relative;min-height:100svh;
  background:
    radial-gradient(ellipse 68% 42% at 50% 60%,#0e0e12 0%,rgba(14,14,18,0) 72%),
    #000;
  color:var(--dark-text);
}
.hero-sticky::before{
  content:"";position:absolute;left:0;right:0;top:58%;height:96vh;
  transform:translateY(-50%);pointer-events:none;z-index:0;
  /* 中性白核心保产品色准,外面两层蓝晕出撞色 —— 苹果在黑底上的标准做法 */
  background:
    radial-gradient(ellipse 22% 20% at 50% 50%,rgba(255,255,255,.15),rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 44% 40% at 50% 50%,rgba(41,151,255,.22),rgba(41,151,255,0) 72%),
    radial-gradient(ellipse 76% 68% at 50% 50%,rgba(41,151,255,.13),rgba(41,151,255,0) 76%);
  opacity:var(--stage);
}
/* ---------- Hero 背景装饰:纯 CSS,无素材 ----------
   黑场太素 → 点阵给质感、同心圆给"无线充场"的隐喻、蓝晕给撞色。
   全部 z-index:0,产品图在上层,不抢主体;强度跟着 --stage 走,退场时一起收掉。 */
.hero-decor{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:calc(.3 + .7 * var(--stage));
}
/* ① 极细点阵:中心密、边缘化开,避免网格感 */
.hero-decor::before{
  content:"";position:absolute;inset:0;opacity:.11;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) .9px,transparent 1.2px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 58% 48% at 50% 58%,#000 8%,rgba(0,0,0,.32) 46%,transparent 74%);
          mask-image:radial-gradient(ellipse 58% 48% at 50% 58%,#000 8%,rgba(0,0,0,.32) 46%,transparent 74%);
}
/* ② 同心波纹:一圈圈荡开的"充电场" */
.ripple{
  position:absolute;left:50%;top:58%;width:34vmin;height:34vmin;
  border:1px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%) scale(.55);opacity:0;
  animation:ripple 7.5s cubic-bezier(.22,1,.36,1) infinite;
}
.ripple:nth-of-type(2){animation-delay:2.5s;}
.ripple:nth-of-type(3){animation-delay:5s;}
@keyframes ripple{
  0%  {transform:translate(-50%,-50%) scale(.50);opacity:0;}
  8%  {opacity:.50;}   /* 贴近产品时最亮 */
  34% {opacity:.20;}   /* 扩散开就只剩一丝,别糊到标题上 */
  100%{transform:translate(-50%,-50%) scale(2.9);opacity:0;}
}
/* 黑→白的交接交给这条独立的过渡带:它是真实滚动进场的,不是盖在动画上的一层白雾,
   所以产品退场时背景始终是纯黑(淡出干净),底下再自然翻成白色章节 */
.hero-fade{
  /* 往上压 20vh,和跑道尾部重叠:产品在 99% 处就淡没了,若过渡带排在 hero 之后,
     两者之间会留下一大截"纯黑空滚"。重叠后产品还在往两边散时,白色已从底部升起。
     重叠量 20vh 是安全的:过渡带顶边升到视口 80% 时 S=150svh,此刻产品刚好淡到 0。 */
  position:relative;margin-top:-20vh;height:29vh;
  /* 色标按 smoothstep 排(L = 255·t²(3−2t)),两端斜率为 0。
     等间距线性色标会出问题:渐变以 1.25 级/像素冲到纯白后斜率突然变 0,
     人眼对斜率突变(马赫带)极敏感,会看成一道突兀的白线,后面那片白也跟着显灰。 */
  background:linear-gradient(to bottom,
    #000000 0%,#070709 10%,#1b1b1d 20%,#37373a 30%,#5a5a5e 40%,#808085 50%,
    #a5a5aa 60%,#c8c8cd 70%,#e5e5e8 80%,#f8f8fa 90%,#ffffff 100%);
}
/* ---------- 过渡带上的公司 logo ----------
   它随过渡带一起滚动,所以身后永远是渐变带的同一段(而不是"在黑底上飘")。
   标记是绿色图形(不是字),深浅背景上都读得清,所以可以做得大、横跨整段渐变。
   尺寸被过渡带高度(~29vh)卡住:再大就会顶出带子跑到纯黑/纯白区去了。 */
.brand-moment{
  position:absolute;left:50%;top:58%;
  width:min(400px,80vw);height:min(400px,80vw);
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
}
.brand-logo{
  position:absolute;inset:0;margin:auto;       /* 固定在中心,尺寸不随场放大 */
  width:min(232px,46vw);height:auto;
  opacity:var(--lo,0);
  transform:translate(0,var(--ly,16px)) scale(var(--ls,.87));
  filter:blur(var(--lb,8px));            /* 材质化:模糊 → 清晰 */
  will-change:opacity,transform,filter;
}
/* ---------- MagSafe 无线充电"感应场" ----------
   先做过一版"磨砂卡片 + 一个环 + 闪电",读起来像"电池图标"而不是 MagSafe。
   真正的 MagSafe 招牌是【一圈圈往外荡的同心环】—— 感应场本身,不要卡片:
   卡片会把波纹框住(要么裁掉要么溢出),而且卡片在任何渐变位置都读不准。
   5 层波纹各错开 0.3s、1.5s 一轮,环亮着的时候始终有 2~3 层在空中。 */
.magsafe{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:var(--mo,0);
  transform:scale(var(--ms,.78));
  will-change:opacity,transform;
}
.ms-glow{
  position:absolute;inset:0;margin:auto;
  width:64%;height:64%;border-radius:50%;
  background:radial-gradient(circle,rgba(124,179,66,.55) 0%,rgba(124,179,66,.16) 46%,rgba(124,179,66,0) 72%);
}
.ms-core{
  position:absolute;inset:0;margin:auto;
  width:44%;height:44%;border-radius:50%;
  display:grid;place-items:center;
  /* 不放常亮的环:否则和"描出来的弧"抢戏,看不出是哪一圈在画。
     中心只留一颗闪电 + 一点内辉光,让描环当唯一主角。 */
  box-shadow:inset 0 0 26px rgba(134,196,64,.30);
}
.ms-core svg{width:46%;height:46%;fill:#d6f2ab;
  filter:drop-shadow(0 0 12px rgba(201,236,148,1));}
.ms-wave{
  position:absolute;inset:0;margin:auto;
  width:62%;height:62%;
  animation:msExpand 1.05s cubic-bezier(.16,1,.3,1) infinite;
  animation-delay:var(--d,0s);
}
.ms-wave svg{width:100%;height:100%;overflow:visible;display:block;
  transform:rotate(-90deg);}   /* 描边默认从 3 点钟起,转 -90° 挪到 12 点钟 */
/* 描环:stroke-dashoffset 从"整条藏在间隔里"走到 0 = 从一点画出弧、再闭合成圆。
   起手留 3 个单位,配合 stroke-linecap:round 就是一个圆点。 */
.ms-arc{
  fill:none;stroke:#7cb342;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;
  /* 描环必须【匀速】:用 fast-out 缓动的话弧几乎瞬间就画满了,"点→弧→圆"根本看不见 */
  animation:msDraw 1.05s cubic-bezier(.32,0,.24,1) infinite;
  animation-delay:var(--d,0s);
}
.ms-wave:nth-child(3){--d:.35s;}
.ms-wave:nth-child(4){--d:.70s;}
@keyframes msDraw{
  0%  {stroke-dashoffset:264;opacity:0;}
  4%  {stroke-dashoffset:263.5;opacity:1;}
  11% {stroke-dashoffset:263.4;opacity:1;}  /* 先亮成一颗点,停一下再走 */
  58% {stroke-dashoffset:0;opacity:1;}      /* 匀速扫成整圆 */
  72% {stroke-dashoffset:0;opacity:1;}      /* 成圆后停住 */
  100%{stroke-dashoffset:0;opacity:0;}      /* 淡出 */
}
@keyframes msExpand{
  0%  {transform:scale(.78);}
  72% {transform:scale(.78);}               /* 描环期间不放大 */
  100%{transform:scale(1.95);}              /* 画完才荡出去 */
}
@media(prefers-reduced-motion:reduce){.ms-wave,.ms-arc{animation:none;opacity:0;}}
/* 注:早先用 wordmark 版时垫过一层柔白晕保证可读,结果在黑场里像探照灯污渍,已去掉;
   现在换成纯图形标记,更不需要垫底。 */
@media(prefers-reduced-motion:reduce){.brand-logo{opacity:1;transform:none;filter:none;}}
/* 这么长的黑→白渐变在 8bit 上会有色带,压一层极淡颗粒打散 */
.hero-fade::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-sticky{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:100px 22px 60px;overflow:hidden;
}
.hero-copy{position:relative;z-index:2;}
.hero h2{
  font-size:clamp(36px,5.8vw,68px);font-weight:600;letter-spacing:-.02em;line-height:1.08;
  color:var(--dark-text);
}
.hero-sub{margin-top:18px;font-size:clamp(15px,1.9vw,19px);color:var(--dark-sub);line-height:1.7;}
.hero-cta{margin-top:28px;display:flex;gap:32px;justify-content:center;}
.hero-cta a{font-size:17px;color:var(--link-dark);}
.hero-cta a::after{content:" ›";}
.hero-cta a:hover{text-decoration:underline;}
.hero-stage{
  position:relative;z-index:1;   /* 必须在装饰层之上 */
  margin-top:56px;display:flex;align-items:flex-end;justify-content:center;
  will-change:transform;
}
/* 两张图先合成一组再整体淡出(见 index.html 注释) */
.hero-group{display:flex;align-items:flex-end;justify-content:center;}
.hero-stage img{height:clamp(220px,34vh,360px);width:auto;filter:drop-shadow(0 24px 44px rgba(0,0,0,.65));}
.hero-stage img+img{margin-left:-52px;}

/* 滚动跑道模式(JS 检测到非减弱动效偏好时启用);全程有动作,不劫持 */
.hero.runway{min-height:0;height:300svh;}
.hero.runway .hero-sticky{position:sticky;top:0;height:100svh;min-height:0;display:block;padding:0;}
.hero.runway .hero-copy{position:absolute;top:12vh;left:22px;right:22px;z-index:3;}
.hero.runway .hero-stage{
  position:absolute;left:50%;top:58%;margin:0;transform:translate(-50%,-50%);z-index:1;
}
.hero.runway .hero-stage img{transform-origin:50% 50%;will-change:transform;transition:filter .4s var(--ease);}
/* 吸合到位后手机阴影收紧(从"悬浮"变"贴住") */
.hero.runway .hero-stage.snapped .hero-phone{filter:drop-shadow(0 5px 9px rgba(0,0,0,.6));}
@media(max-width:640px){
  .hero.runway{height:260svh;}
  .hero.runway .hero-copy{top:11vh;}
  .hero.runway .hero-stage{top:56%;}
  .hero h2{font-size:clamp(30px,8.4vw,68px);}
  .hero-stage img+img{margin-left:-36px;}
}

/* ---------- 主推方案:细分隔线规格列表(Apple Tech Specs 式) ---------- */
.spec-list{max-width:840px;margin:0 auto;border-top:1px solid var(--hairline);}
.spec-row{
  display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:baseline;
  padding:24px 4px;border-bottom:1px solid var(--hairline);
}
.spec-row b{font-size:17px;font-weight:600;letter-spacing:-.01em;}
.spec-row p{font-size:15px;color:var(--sub);line-height:1.7;}
@media(max-width:640px){.spec-row{grid-template-columns:1fr;gap:6px;padding:20px 4px;}}

/* ---------- 案例成品:五列浅灰实心卡,图为主、名为辅 ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
@media(max-width:960px){.prod-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.prod-grid{grid-template-columns:repeat(2,1fr);gap:10px;}}
/* 卡片的位移/透明度由滚动逐帧驱动(--po/--py/--ps 见 main.js),
   所以这里不能给 transform 加 transition,否则每帧都会被 0.5s 过渡拖住 */
.prod{
  background:transparent;border-radius:var(--radius-md);padding:14px 6px 12px;text-align:center;
  opacity:var(--po,1);transform:translateY(var(--py,0px)) scale(var(--ps,1));
  transition:background .4s var(--ease);
}
.prod:hover{background:var(--bg-gray);}
.prod .thumb{height:190px;display:flex;align-items:center;justify-content:center;}
/* 默认不带投影(白底上会读成一圈灰边);悬停时才浮起+投影 */
.prod .thumb img{max-height:100%;width:auto;max-width:100%;transition:transform .5s var(--ease),filter .5s var(--ease);}
.prod:hover .thumb img{transform:scale(1.06);filter:drop-shadow(0 10px 16px rgba(0,0,0,.12));}
.prod .pname{margin-top:14px;font-size:13px;color:var(--sub);line-height:1.5;}

/* ---------- 深色数据章节:内嵌圆角黑带 ---------- */
.band-wrap{max-width:calc(var(--max) + 44px);margin:0 auto;padding:0 22px;}
.band{
  background:var(--dark);color:var(--dark-text);border-radius:40px;
  padding:100px 40px;text-align:center;overflow:hidden;
}
.band .h2{color:var(--dark-text);}
.band .lede{color:var(--dark-sub);margin-bottom:70px;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:900px;margin:0 auto;}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat{padding:0;}
.stat .v{font-size:clamp(34px,4vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--dark-text);}
.stat .k{margin-top:12px;font-size:13.5px;color:var(--dark-sub);}
@media(max-width:640px){.band{padding:70px 26px;border-radius:32px;}}

/* ---------- 公司风采 ---------- */
.about-banner{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:40px;}
.about-banner img{width:100%;height:auto;}
.about-text{max-width:720px;margin:0 auto;text-align:center;font-size:16px;color:var(--sub);line-height:1.9;}
.about-text b{color:var(--text);font-weight:600;}
.video-link{display:inline-block;margin-top:24px;font-size:17px;}

/* ---------- 荣誉资质:灰色 chips ---------- */
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
/* 5+1 换行会留下一个孤零零的 chip。收紧尺寸 + 这一节改用 .section.wide(见 index.html),
   两者合起来 6 枚正好排满一行 */
.pill{
  padding:8px 16px;font-size:13.5px;color:var(--text);border-radius:999px;
  background:var(--chip);font-weight:400;
}

/* ---------- CTA:极简居中 ---------- */
.cta-card{
  padding:0 24px;text-align:center;background:transparent;border:0;box-shadow:none;border-radius:0;
}
.cta-card h3{font-size:clamp(26px,3.2vw,38px);font-weight:600;letter-spacing:-.018em;}
.cta-card p{margin:12px 0 30px;color:var(--sub);font-size:16px;}
.btn{
  display:inline-block;padding:12px 30px;border-radius:999px;font-size:16px;font-weight:500;
  background:var(--btn);color:#fff;transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{background:var(--btn-hover);transform:scale(1.02);}
.btn.ghost{background:transparent;color:var(--link);border:0;margin-left:14px;}
.btn.ghost:hover{background:transparent;text-decoration:underline;transform:none;}

/* ---------- 页脚:三列链接 + 底栏 ----------
   原来是"公司名 + 一行联系方式 + 备案号",占 200px 却几乎没信息量,整页越往下越空。
   改成苹果那种链接目录式页脚:密度上来,也不需要额外装饰。 */
.footer{background:var(--bg-gray);padding:56px 22px 30px;margin-top:0;}
.footer-inner{max-width:var(--max);margin:0 auto;}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.f-col h4{font-size:12px;font-weight:600;color:var(--text);margin-bottom:12px;}
.f-col a,.f-col span{display:block;font-size:12.5px;color:var(--sub);line-height:1.95;}
.f-col a:hover{color:var(--link);}
.f-addr{margin-top:6px;line-height:1.7;}
.footer-bar{
  display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;
  margin-top:38px;padding-top:18px;border-top:1px solid var(--hairline);
  font-size:12px;color:var(--small);
}
.footer-bar a{color:var(--small);}
.footer-bar a:hover{color:var(--text);}
@media(max-width:640px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:22px;}
  .f-col:last-child{grid-column:1/-1;}   /* 联系那列跨满,不然右半留一大片空 */
  .footer-bar{justify-content:flex-start;}
}

/* ============================================================
   子页面
   ============================================================ */
.page-hero{padding:140px 22px 70px;text-align:center;background:var(--bg);}
.page-hero .kicker{margin-bottom:12px;}
.page-hero h1{font-size:clamp(23px,6.4vw,54px);font-weight:600;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;}
.page-hero p{margin:14px auto 0;font-size:clamp(14px,1.7vw,17px);color:var(--sub);max-width:600px;line-height:1.7;}
.sub-section{max-width:920px;margin:0 auto;padding:26px 22px;}
.sub-card{padding:44px 48px;border-radius:var(--radius-lg);background:var(--bg-gray);}
@media(max-width:640px){.sub-card{padding:30px 24px;}}
.sub-card h2{font-size:22px;font-weight:600;letter-spacing:-.015em;margin-bottom:22px;}
.sub-card h2 .bar{display:none;}
.sub-card p{font-size:15px;color:var(--sub);margin-bottom:12px;line-height:1.9;}
.sub-card p b{color:var(--text);font-weight:600;}

/* 方案服务:浅灰小瓷砖 */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.svc{
  padding:18px 20px;font-size:14.5px;border-radius:16px;background:#fff;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);cursor:default;
}
.svc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.07);}

/* 关于我们 */
.tri{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.tri .item{padding:26px 22px;text-align:center;border-radius:18px;background:#fff;}
.tri .item b{display:block;font-size:16px;font-weight:600;margin-bottom:8px;}
.tri .item p{font-size:13.5px;color:var(--sub);}
.timeline{list-style:none;margin-left:4px;}
.timeline li{
  position:relative;padding:0 0 20px 26px;font-size:15px;color:var(--sub);
  border-left:1px solid var(--hairline);
}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{
  content:"";position:absolute;left:-5px;top:7px;width:9px;height:9px;border-radius:50%;
  background:var(--text);
}
.timeline b{color:var(--text);font-weight:600;}

/* 联系我们:三栏信息 + 居中留言表单 */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr 1.32fr;gap:12px;}
@media(max-width:780px){.contact-grid{grid-template-columns:1fr;}}
.contact-item{padding:30px 28px;border-radius:var(--radius-md);background:var(--bg-gray);}
.contact-item .ct-label{display:block;font-size:12.5px;color:var(--small);margin-bottom:10px;}
.contact-item .ct-val{display:block;font-size:17px;font-weight:500;line-height:1.55;color:var(--text);}
.contact-item a.ct-val{color:var(--link);}
.contact-item a.ct-val:hover{text-decoration:underline;}
.form-wrap{max-width:600px;margin:0 auto;}
.form-title{font-size:22px;font-weight:600;letter-spacing:-.015em;text-align:center;margin-bottom:28px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.f-row{grid-template-columns:1fr;gap:0;}}
.form-wrap button{display:block;margin-left:auto;margin-right:auto;margin-top:28px;}
.form-wrap .note{text-align:center;}
form label{display:block;font-size:13px;color:var(--sub);margin:14px 0 6px;}
form input,form textarea{
  width:100%;border:1px solid var(--hairline);border-radius:12px;padding:11px 14px;font-size:15px;
  font-family:inherit;background:#fff;transition:border-color .3s,box-shadow .3s;
}
form input:focus,form textarea:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 4px rgba(0,102,204,.12);}
form button{
  margin-top:20px;border:0;cursor:pointer;padding:12px 36px;border-radius:999px;font-size:15px;font-weight:500;
  background:var(--btn);color:#fff;font-family:inherit;transition:background .3s,transform .3s var(--ease);
}
form button:hover{background:var(--btn-hover);transform:scale(1.02);}
.note{font-size:12px;color:var(--small);margin-top:12px;}
.qr img{max-height:250px;margin:0 auto;border-radius:16px;width:auto;}
.qr p{font-size:13px;color:var(--sub);margin-top:10px;text-align:center;}

/* 资料下载 */
.dl-card{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:48px;border-radius:var(--radius-lg);background:var(--bg-gray);}
@media(max-width:720px){.dl-card{grid-template-columns:1fr;padding:30px 24px;}}
.dl-card h2{font-size:24px;font-weight:600;letter-spacing:-.015em;margin-bottom:14px;}
.dl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.dl-meta span{font-size:12.5px;color:var(--sub);background:#fff;border-radius:999px;padding:5px 14px;}
.dl-notes{background:#fff;border-radius:18px;padding:24px 28px;margin-top:18px;font-size:14px;color:var(--sub);}
.dl-notes h3{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:10px;}
.dl-notes li{margin:6px 0 6px 18px;line-height:1.75;}
.dl-notes b{color:var(--text);}