/* =========================================================
   星娱智造 StarIP Robot — 官网样式
   移动优先，断点：640 / 900 / 1120
   ========================================================= */

/* ---------- 设计变量 ---------- */
:root{
  /* 品牌蓝取自 logo，向上下延展成完整色阶 */
  --blue-900:#123a63;
  --blue-800:#18507f;
  --blue-700:#1e5694;
  --blue-600:#2b76c4;
  --blue-500:#3d8bd8;
  --blue-300:#8fc0ec;
  --blue-100:#dceaf8;
  --blue-50:#eff6fd;

  /* 辅助紫，取自机器人眼睛 */
  --violet-600:#7c5ce6;
  --violet-100:#e9e2fb;

  --ink-900:#0b1220;
  --ink-800:#131c2e;
  --ink-700:#1e293b;
  --ink-600:#334155;
  --ink-500:#64748b;
  --ink-400:#94a3b8;
  --ink-200:#e2e8f0;
  --ink-100:#f1f5f9;

  --paper:#ffffff;
  --paper-2:#f5f9fd;

  /* 阴影收紧：低扩散 + 一道细边，比大面积糊阴影更"实"，少塑料感 */
  --shadow-sm:0 1px 1px rgba(15,23,42,.04);
  --shadow-md:0 1px 2px rgba(15,23,42,.05),0 4px 10px rgba(20,45,80,.05);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06),0 10px 24px rgba(20,45,80,.09);

  /* 圆角收小，靠近工业/编辑气质而非气泡感 */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px;

  --shell:1200px;
  --gutter:clamp(18px,5vw,32px);
  --header-h:64px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

@media (min-width:900px){ :root{ --header-h:78px; } }

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html:focus-within{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-700);
  font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans CJK SC",
              "Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; line-height:1.22; color:var(--ink-900); font-weight:800; letter-spacing:-.01em; }
p{ margin:0; }

:focus-visible{ outline:3px solid var(--blue-500); outline-offset:3px; border-radius:4px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--blue-600); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; }

/* ---------- 图标系统 ---------- */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sprite g{
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.i{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.i use{ transform-origin:center; }

/* ---------- 极细颗粒：压掉大面积渐变的合成塑料味 ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:400; pointer-events:none; opacity:.028;
  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='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

/* 锚点跳转不被吸顶导航遮住 */
[id]{ scroll-margin-top:calc(var(--header-h) + 16px); }

/* ---------- 按钮 ---------- */
/* 不用 999px 胶囊：短标签会被撑成矮胖药丸，
   且整站圆角已收到 6–18px，胶囊在这里是唯一的异类 */
.btn{
  --btn-bg:var(--blue-600); --btn-fg:#fff; --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; border:1.5px solid var(--btn-bd); border-radius:var(--r-sm);
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:600; font-size:.95rem; letter-spacing:.02em; cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
  white-space:nowrap;
}
.btn-lg{ padding:14px 30px; font-size:1rem; }
/* 悬停只做颜色变化，不做位移 */
.btn-primary{ box-shadow:0 1px 2px rgba(20,45,80,.14); }
.btn-primary:hover{ background:var(--blue-700); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--blue-700); --btn-bd:var(--blue-300); }
.btn-ghost:hover{ --btn-bg:var(--blue-50); --btn-bd:var(--blue-600); }

/* =========================================================
   导航
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s;
}
.site-header.stuck{ border-bottom-color:var(--ink-200); box-shadow:0 4px 20px rgba(15,23,42,.05); }

.nav{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }
.brand img{ height:clamp(28px,4.4vw,38px); width:auto; }

.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav-links a{
  font-size:.95rem; font-weight:600; color:var(--ink-600); position:relative; padding:6px 0;
  transition:color .2s;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--blue-600); border-radius:2px; transition:right .28s var(--ease);
}
.nav-links a:not(.btn):hover{ color:var(--blue-700); }
.nav-links a:not(.btn):hover::after{ right:0; }
/* 导航里的转化按钮：比正文按钮小半号，收紧内距，不抢主视觉。
   选择器要压过 .nav-links a（0,1,1），否则字号不生效 */
.nav-links a.nav-cta{
  color:#fff; padding:9px 20px; font-size:.9rem; font-weight:600;
  background:var(--blue-700); box-shadow:none;
}
.nav-links a.nav-cta:hover{ background:var(--blue-800); color:#fff; }

.nav-toggle{
  display:none; width:42px; height:42px; border:0; border-radius:12px;
  background:var(--ink-100); cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  display:block; width:19px; height:2px; border-radius:2px; background:var(--ink-700);
  transition:transform .3s var(--ease),opacity .2s;
}
.nav-scrim{ position:fixed; inset:0; background:rgba(11,18,32,.42); z-index:900; }

@media (max-width:899px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:8px var(--gutter) 26px;
    box-shadow:0 20px 40px rgba(15,23,42,.14);
    transform:translateY(-118%); transition:transform .38s var(--ease);
    z-index:950; max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a:not(.btn){
    padding:15px 4px; font-size:1.05rem; border-bottom:1px solid var(--ink-100);
  }
  .nav-links a:not(.btn)::after{ display:none; }
  .nav-cta{ margin-top:20px; width:100%; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* =========================================================
   首屏
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(40px,7vw,78px) 0 clamp(30px,5vw,54px);
  background:linear-gradient(180deg,#fbfdff 0%,var(--blue-50) 62%,#fff 100%);
}
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.grid-fade{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(43,118,196,.075) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(43,118,196,.075) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 32%,#000 20%,transparent 78%);
}

.hero-grid{ display:grid; gap:clamp(14px,4vw,48px); align-items:center; }

/* 标签改成一条左侧竖线，比胶囊+呼吸圆点克制 */
.eyebrow{
  display:inline-block; padding-left:14px; margin-bottom:22px;
  border-left:3px solid var(--blue-600);
  color:var(--blue-700); font-size:.86rem; font-weight:700; letter-spacing:.02em;
}

.hero-copy h1{
  font-size:clamp(2.1rem,7.4vw,4.05rem);
  letter-spacing:-.025em; margin-bottom:20px;
}
/* 渐变文字是最像"AI 出图"的一处，改成实色 + 一道手绘下划线 */
.hero-copy h1 em{ font-style:normal; color:var(--blue-600); }
.mark{ position:relative; display:inline-block; }
.mark-line{
  position:absolute; left:-1%; bottom:-.06em; width:102%; height:.26em;
  fill:none; stroke:var(--blue-600); stroke-width:6; stroke-linecap:round;
  opacity:.24;
}

.lede{ font-size:clamp(1rem,2.4vw,1.22rem); color:var(--ink-500); margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; }

.hero-art{ position:relative; display:grid; place-items:center; min-height:min(52vh,420px); }
.hero-bot{
  position:relative; z-index:2;
  width:auto; height:clamp(260px,44vw,520px);
  filter:drop-shadow(0 18px 22px rgba(20,45,80,.14));
}
/* 静态线稿舞台，取代旋转虚线圈 */
.stage-art{
  position:absolute; z-index:0; width:min(112%,540px); aspect-ratio:1;
  fill:none; stroke:var(--blue-600); stroke-width:1; opacity:.2;
}
.stage-art .faint{ opacity:.45; }
/* 落地投影：让机器人"站"住，而不是飘着 */
.ground{
  position:absolute; z-index:1; bottom:6%; width:min(46%,220px); height:18px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(30,60,100,.22),transparent 70%);
}

@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
  .hero-art{ min-height:auto; }
}

/* =========================================================
   通用区块
   ========================================================= */
.section{ padding:clamp(58px,8.5vw,110px) 0; }
.section-tint{ background:var(--paper-2); }

/* 标题吃满容器宽度，避免长标题被挤成两行；
   说明文字另外收窄，保持易读的行长 */
.section-head{ margin:0 auto clamp(34px,5vw,58px); text-align:center; }
.section-head h2{
  font-size:clamp(1.5rem,3.6vw,2.35rem); letter-spacing:-.02em;
  max-width:100%; margin-inline:auto; text-wrap:balance;
}
.section-head .sub{
  margin:16px auto 0; max-width:820px;
  color:var(--ink-500); font-size:clamp(.95rem,2.2vw,1.08rem);
}

/* =========================================================
   产品矩阵
   ========================================================= */
.bot-grid{ display:grid; gap:clamp(14px,2.4vw,24px); grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .bot-grid{ grid-template-columns:repeat(4,1fr); } }

.bot-card{
  background:#fff; border:1px solid var(--ink-200); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
/* 不做整卡上浮：只收紧描边、图片轻推。悬停该是"聚焦"，不是"弹起来" */
.bot-card:hover{ box-shadow:var(--shadow-md); border-color:var(--blue-300); }

.bot-stage{
  position:relative; aspect-ratio:1/1.02; overflow:hidden;
  background:var(--blue-50);
  border-bottom:1px solid var(--ink-200);
}
/* 四只机器人长宽比差异很大，用绝对定位 + contain 统一舞台，
   卡片高度才会整齐；object-position 贴底让它们都"站"在同一条地平线上 */
.bot-stage img{
  position:absolute; left:9%; bottom:8%; width:82%; height:84%;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 10px 12px rgba(20,45,80,.13));
  transition:transform .5s var(--ease);
}
.bot-card:hover .bot-stage img{ transform:scale(1.045); }

.bot-meta{ padding:clamp(14px,2.4vw,22px); }
.bot-meta h3{ font-size:clamp(1rem,2.4vw,1.16rem); margin-bottom:8px; }
.bot-meta p{ font-size:.82rem; color:var(--ink-500); line-height:1.7; }

/* =========================================================
   ToB 场景
   ========================================================= */
.scene-grid{ display:grid; gap:clamp(14px,2.4vw,24px); grid-template-columns:repeat(2,1fr); }
@media (max-width:479px){ .scene-grid{ grid-template-columns:1fr; } }
@media (min-width:900px){ .scene-grid{ grid-template-columns:repeat(4,1fr); } }

.scene{
  position:relative; background:#fff; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--ink-200); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.scene:hover{ box-shadow:var(--shadow-md); border-color:var(--blue-300); }
.scene img{ aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .6s var(--ease); }
.scene:hover img{ transform:scale(1.04); }
.scene-body{ padding:clamp(14px,2.2vw,20px); flex:1; }
.scene-body h3{
  font-size:clamp(1rem,2.4vw,1.14rem); margin-bottom:9px;
  display:flex; align-items:center; gap:9px;
}
/* 线性图标取代渐变小色条 */
.scene-body h3 .i{
  font-size:1.32em; color:var(--blue-600);
  transition:color .3s var(--ease);
}
.scene:hover .scene-body h3 .i{ color:var(--violet-600); }
.scene-body p{ font-size:.87rem; color:var(--ink-500); line-height:1.72; }

/* =========================================================
   ToC 分栏
   ========================================================= */
.split{
  display:grid; gap:clamp(22px,4vw,54px); align-items:center;
  padding:clamp(24px,4vw,48px) 0;
}
.split + .split{ border-top:1px solid var(--ink-200); }
@media (min-width:900px){
  .split{ grid-template-columns:1fr 1.12fr; }
  .split-reverse .split-copy{ order:2; }
  .split-reverse .split-media{ order:1; }
}

.badge{
  display:inline-block; padding:6px 15px; border-radius:999px; margin-bottom:16px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--blue-700); background:var(--blue-50); border:1px solid var(--blue-100);
}
.badge-alt{ color:#5b3fc4; background:var(--violet-100); border-color:#d9cdf7; }

.split-copy h3{ font-size:clamp(1.3rem,3.4vw,1.85rem); margin-bottom:16px; letter-spacing:-.015em; }
.split-copy > p{ color:var(--ink-500); font-size:clamp(.94rem,2.1vw,1.02rem); }

.ticks{ margin-top:24px; display:grid; gap:10px; }
.ticks li{
  position:relative; padding-left:26px; font-size:.92rem; color:var(--ink-600);
}
/* 只画一个勾，不套圆底 —— 圆底加勾是很俗的组合 */
.ticks li::after{
  content:""; position:absolute; left:4px; top:.52em;
  width:5px; height:9px; border:solid var(--blue-600); border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg);
}

.split-media{ margin:0; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--ink-200); background:#fff; }
.split-media img{ width:100%; }

/* =========================================================
   研发中心 — 版式对齐原站那张架构图：
   浅色底、左侧面板明显大于右侧、部门框由浅入深、层级间有箭头连线
   ========================================================= */
.rnd-layout{ display:grid; gap:clamp(20px,3vw,32px); }
/* 左大右小，约 2:1，和原图比例一致。
   stretch 让两栏等高——否则左栏按内容、右栏按文字换行，各算各的，高度必然对不齐 */
@media (min-width:980px){ .rnd-layout{ grid-template-columns:2fr 1fr; align-items:stretch; } }

/* ---- 左：组织架构 ---- */
.org{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--ink-200);
  border-radius:var(--r-lg); padding:clamp(22px,3.2vw,40px) clamp(16px,2.6vw,34px);
  box-shadow:var(--shadow-sm);
}
.org-root{ display:flex; justify-content:center; }
.org-root span{
  display:inline-block; min-width:170px; text-align:center;
  padding:14px 36px; border-radius:var(--r-md);
  background:var(--blue-600); color:#fff; font-weight:700; font-size:1.02rem;
}
/* 连接线可拉伸：左栏被撑高时由竖线吸收多余高度，
   方框之间不会被拉开、连线也不会断 */
.org-stem{ width:2px; flex:1 0 24px; min-height:24px; margin:0 auto; background:var(--blue-300); }

/* 从主干分叉到四个部门，每支带箭头 —— 对应原图的分支箭头 */
.org-branch{
  position:relative; height:30px;
  display:grid; grid-template-columns:repeat(4,1fr);
}
.org-branch::before{
  content:""; position:absolute; top:0; left:12.5%; right:12.5%;
  height:2px; background:var(--blue-300);
}
.org-branch span{ position:relative; }
.org-branch span::before{
  content:""; position:absolute; top:0; bottom:7px; left:50%;
  width:2px; margin-left:-1px; background:var(--blue-300);
}
.org-branch span::after{
  content:""; position:absolute; bottom:0; left:50%; margin-left:-4.5px;
  border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:7px solid var(--blue-300);
}
/* 窄屏部门变两列，四路分叉会错位，退化成一条主干 */
@media (max-width:559px){
  .org-branch{ grid-template-columns:1fr; height:22px; }
  .org-branch::before{ display:none; }
  .org-branch span:not(:first-child){ display:none; }
}

/* 两层之间的连接箭头，同样可拉伸 */
.org-link{ position:relative; flex:1 0 26px; min-height:26px; }
.org-link::before{
  content:""; position:absolute; top:0; bottom:7px; left:50%;
  width:2px; margin-left:-1px; background:var(--blue-300);
}
.org-link::after{
  content:""; position:absolute; bottom:0; left:50%; margin-left:-4.5px;
  border-left:4.5px solid transparent; border-right:4.5px solid transparent;
  border-top:7px solid var(--blue-300);
}

.org-tier{
  border:1px dashed var(--blue-300); border-radius:var(--r-md);
  padding:18px 16px; background:rgba(43,118,196,.05);
}
/* 两层统一用同一套蓝，不再用米色区分 */
.org-tier-2{ margin-top:0; }

.org-tier ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (min-width:560px){ .org-tier ul{ grid-template-columns:repeat(4,1fr); } }
.org-tier li{
  display:grid; place-items:center;
  border-radius:var(--r-sm); padding:20px 8px; text-align:center;
  font-size:clamp(.8rem,1.9vw,.92rem); font-weight:600; line-height:1.5;
}
/* 由浅入深的蓝色梯度，取自原图；深色两格转白字保证对比度 */
.org-tier li:nth-child(1){ background:#dcebf9; color:#1a4f85; }
.org-tier li:nth-child(2){ background:#bcd9f2; color:#1a4f85; }
.org-tier li:nth-child(3){ background:var(--blue-600); color:#fff; }
.org-tier li:nth-child(4){ background:var(--blue-700); color:#fff; }

/* ---- 右：两张能力卡，比左侧窄，整体收紧 ---- */
.rnd-cards{ display:grid; gap:clamp(14px,2vw,20px); align-content:stretch; }
.rnd-card{
  background:#eef4fa; border:1px solid #e3ecf5; border-radius:var(--r-xl);
  padding:clamp(18px,2.1vw,24px); box-shadow:var(--shadow-sm);
  transition:border-color .3s,box-shadow .3s;
}
.rnd-card:hover{ border-color:var(--blue-300); box-shadow:var(--shadow-md); }
/* 图标在原图里是裸的，没有方框底色 */
.rnd-card h3{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(1.02rem,1.9vw,1.14rem); color:#12365c;
}
.rnd-card h3 .i{ font-size:1.3em; color:var(--blue-600); }
/* 标题下贯穿整宽的粗横杠 —— 原图的标志性分隔 */
.rnd-card .rule{
  display:block; height:5px; border-radius:3px;
  background:#dbeaf6; margin:12px 0 14px;
}
.rnd-card p{
  position:relative; padding-left:15px;
  font-size:.85rem; line-height:1.82; color:var(--ink-600);
}
/* 方块项目符号，不是圆点 */
.rnd-card p::before{
  content:""; position:absolute; left:0; top:.8em;
  width:5px; height:5px; background:var(--blue-300);
}
.rnd-card b{ color:#12365c; font-weight:700; }

/* =========================================================
   关于我们
   ========================================================= */
/* 三格等宽，图片填满格子 —— 否则窄格里的图按自身宽度算高度，
   撑不满被拉伸的行高，底部就会留出白条 */
.gallery{ display:grid; gap:clamp(14px,2.4vw,22px); grid-template-columns:1fr; }
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .gallery{ grid-template-columns:repeat(3,1fr); } }
.gallery figure{
  margin:0; position:relative; aspect-ratio:16/10; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-md); background:#fff;
}
.gallery img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s var(--ease);
}
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 15px;
  background:linear-gradient(180deg,transparent,rgba(8,16,30,.82));
  color:#fff; font-size:.88rem; font-weight:600;
}

/* 原来是"白卡 + 左侧蓝竖条"，那是很套路的提示框样式。
   改成收尾陈述：去掉容器，居中排版，上方一道短分隔线 */
.about-note{
  margin:clamp(30px,5vw,52px) auto 0;
  max-width:62ch; text-align:center; position:relative;
  padding-top:clamp(26px,4vw,38px);
}
.about-note::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:56px; height:2px; background:var(--blue-300);
}
.about-note p{
  color:var(--ink-600); font-size:clamp(1rem,2.2vw,1.1rem); line-height:2;
}

/* =========================================================
   页脚
   ========================================================= */
footer{ background:var(--ink-900); color:var(--ink-400); padding:clamp(44px,6vw,72px) 0 24px; }
.foot-grid{ display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:1fr; }
@media (min-width:560px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .foot-grid{ grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(150px,1fr)); } }
@media (min-width:560px) and (max-width:899px){ .foot-brand{ grid-column:span 2; } }

.foot-brand img{ height:38px; width:auto; margin-bottom:20px; }
.foot-name{ color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:16px; }
.foot-contact{ display:grid; gap:12px; }
.foot-contact li{ display:flex; gap:12px; align-items:flex-start; font-size:.93rem; line-height:1.7; }
.foot-contact .i{ font-size:1.18rem; color:var(--blue-300); margin-top:.16em; }
.foot-contact strong{ color:#cbd5e1; font-weight:600; }
/* 拨号/邮件是页脚最关键的动作，撑到舒适的触摸高度 */
.foot-contact a{ transition:color .2s; padding-block:9px; margin-block:-9px; display:inline-block; }
.foot-contact a:hover{ color:var(--blue-300); }

/* 去掉外层卡片：深色框里再套一张海报是"卡中卡"，那圈描边正是显土的来源。
   两张图长宽比差 5%，用固定高度 + contain 对齐，既不裁切二维码，说明文字也能齐 */
.qr{ margin:0; width:min(100%,220px); justify-self:center; text-align:center; }
.qr img{
  display:block; width:100%; height:240px;
  object-fit:contain; margin:0 auto 16px;
  border-radius:var(--r-md);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.qr figcaption{ font-size:.82rem; color:#cbd5e1; line-height:1.65; white-space:nowrap; }
.qr small{ color:var(--ink-400); font-size:.74rem; }
.hiring{ color:#26b1a5; }

.foot-bottom{
  margin-top:clamp(30px,4vw,48px); padding-top:22px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.83rem;
}
.to-top{ transition:color .2s; padding:10px 2px; }
.to-top:hover{ color:var(--blue-300); }

/* =========================================================
   滚动出场动画
   ========================================================= */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html:focus-within{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .js .reveal{ opacity:1; transform:none; }
}