/* ============================================================
   瑞福莱新站 shared.css — TSD 半导体科技风（复用 v2 视觉）
   多页站公共：tokens / reset / nav / footer / 按钮 / 卡片
   ============================================================ */

/* ── Netto Reflex 品牌字体(Cindy 0901 邮件硬性要求:全站英文必用) ──
   授权仅限 Reflex 项目(含 websites/英文版 en);禁转格式/禁分享他司;勿复制到其他项目。
   官方 WEB 包源自 kb/input/0901-字体/(OSS 归档)。中文回落系统字体,英文页天然 100% Netto。 */
@font-face{font-family:'NettoReflex';src:url('assets/fonts/NettoReflex-Regular.woff2') format('woff2'),url('assets/fonts/NettoReflex-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'NettoReflex';src:url('assets/fonts/NettoReflex-Bold.woff2') format('woff2'),url('assets/fonts/NettoReflex-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
:root{
  /* Reflex 德国总部 VI（颜色使用.pptx · 28.07.2026）：主色 Teal 墨绿 / 次色 Grass 草绿 / 高亮 Gold 金黄 */
  --ink:#1d3a37;--brand:#2A514D;--green:#84BD3F;--gold:#D1C237;
  --line:#E9EDED;--muted:#c2c1c8;--bg-soft:#E9EDED;--bg:#ffffff;
  --body:#5C5A54;--dim:#8E8C84;
  --ease:.4s ease;--done:#84BD3F;
  --mono:'SF Mono','JetBrains Mono',Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:none;scroll-behavior:smooth}
body{font-family:'NettoReflex',PingFang SC,'Microsoft YaHei',Arial,sans-serif;color:#666;background:#fff;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration:none;transition:all var(--ease);font-size:1.4rem}
a:hover{color:var(--brand)}
img{display:block;max-width:100%;height:auto;border:0}
ul,li{list-style:none;margin:0;padding:0}
.wrap{width:90%;max-width:1400px;margin:0 auto}

/* ============== HEADER / NAV（多页跳转） ============== */
.header{position:fixed;left:0;top:0;width:100%;z-index:500;background:#fff;transition:all var(--ease)}
.header::after{content:'';width:100%;height:1px;position:absolute;left:0;bottom:0;background:#e4e7ec}
.header-content{width:100%;height:7.5rem;margin:auto;position:relative}
.header-left{position:absolute;left:5%;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.header-right{position:absolute;right:5%;top:50%;transform:translateY(-50%);display:flex;align-items:center}
.logo{display:flex;align-items:center;gap:1rem}
.logo b{font-size:2rem;font-weight:800;color:var(--ink);letter-spacing:.08em;font-family:'NettoReflex',Arial,sans-serif}
.logo-img{height:52px;width:auto;display:block}
.logo small{font-size:1.2rem;color:var(--muted);letter-spacing:.2em;display:block;margin-top:.2rem;font-weight:400}
.nav{display:flex;margin-left:5rem}
.nav li{margin-left:3.5rem;position:relative}
.nav a{color:#000;font-size:1.4rem;position:relative;display:block;padding:.4rem 0}
.nav a::after{content:'';width:0;height:2px;position:absolute;left:0;bottom:-.2rem;background:var(--brand);transition:width var(--ease)}
.nav a:hover::after,.nav a.cur::after{width:100%}
.nav a.cur{color:var(--brand)}
.lang{margin-left:3.5rem;font-size:1.4rem;color:var(--ink)}
.lang b{color:var(--brand)}
.burger{display:none;width:3rem;height:3rem;flex-direction:column;justify-content:center;gap:.5rem;cursor:pointer;margin-left:3rem}
.burger i{display:block;width:100%;height:2px;background:var(--ink)}
/* P0-2 语言切换:site.js 把 a.lang 挂进 .nav 末尾成第 6 项;桌面隐藏,≤768 展开菜单时可见 */
.nav .nav-lang{display:none}

/* ============== 内页小 HERO ============== */
.page-hero{padding:12rem 0 5rem;background:linear-gradient(135deg,#2A514D 0%,#1d3a37 100%);border-bottom:0}
.page-hero .eng{font-size:1.3rem;letter-spacing:.4em;color:rgba(132,189,63,.85);text-transform:uppercase;margin-bottom:1.5rem;font-weight:600}
.page-hero h1{font-size:4rem;font-weight:700;color:#fff;line-height:1.15}
.page-hero .lead{font-size:1.8rem;color:rgba(255,255,255,.78);margin-top:2rem;max-width:60rem;line-height:1.7}

/* ============== 板块标题 ============== */
.sec-title{padding:7rem 0 4rem;text-align:center}
.sec-title .eng{font-size:1.3rem;letter-spacing:.4em;color:var(--brand);text-transform:uppercase;margin-bottom:1rem;font-weight:600}
.sec-title .cn{font-size:3.2rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.sec-title .lead{font-size:1.6rem;color:#888;margin:1.5rem auto 0;max-width:60rem;line-height:1.7}

/* ============== 按钮 ============== */
.tbtn{display:inline-block;font-size:0;padding:1.3rem 2.6rem;border:1px solid var(--ink);color:var(--ink);text-align:center;cursor:pointer;transition:all var(--ease)}
.tbtn:hover{background:var(--ink);color:#fff}
.tbtn.solid{background:var(--brand);border-color:var(--brand);color:#fff}
.tbtn.solid:hover{background:var(--ink);border-color:var(--ink)}
.tbtn span{font-size:1.4rem;letter-spacing:.05em}
.btn-row{margin-top:3rem;display:flex;gap:1.5rem;flex-wrap:wrap}

/* ============== 通用卡片网格 ============== */
.grid{display:grid;gap:2.4rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;transition:all var(--ease);display:flex;flex-direction:column}
.card:hover{box-shadow:0 12px 32px -12px rgba(29,58,55,.18);transform:translateY(-3px);border-color:var(--brand)}
.card .ph{aspect-ratio:4/3;background:var(--bg-soft);background-size:cover;background-position:center;position:relative;overflow:hidden}
.card .body{padding:2.4rem;flex:1;display:flex;flex-direction:column}
.card .cat{font-size:1.2rem;color:var(--brand);letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.card h3{font-size:2rem;color:var(--ink);margin:.8rem 0 1rem;font-weight:700}
.card p{font-size:1.4rem;color:#888;line-height:1.7;flex:1}
.card .pdf-link{display:inline-block;margin-top:1.2rem;font-size:1.3rem;color:var(--brand);font-weight:500;letter-spacing:.02em;transition:color var(--ease)}
.card .pdf-link:hover{color:var(--ink);text-decoration:underline}
/* 0916:小链接 chip 提命中高度(原 ~19px 裸行高,手机难点中) */
.card .case-link,.card .map-link,.card .cat-map-link{min-height:2.8rem}
.card .case-link{padding:.5rem .8rem}
.card .map-link,.card .cat-map-link{padding:.5rem .8rem}
.card .case-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;margin-right:1rem;font-size:1.2rem;color:#3d6b35;font-weight:600;background:rgba(132,189,63,.12);padding:.3rem .8rem;border-radius:.4rem;text-decoration:none;transition:all .2s}
.card .case-link:hover{background:rgba(132,189,63,.22);transform:translateY(-1px)}
.card .case-link-ico{width:1.4rem;height:1.4rem;object-fit:contain}
.card .card-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem;align-items:center}
.card .map-link{display:inline-flex;align-items:center;gap:.4rem;font-size:1.2rem;color:var(--brand);font-weight:600;background:rgba(42,81,77,.08);padding:.3rem .8rem;border-radius:.4rem;text-decoration:none;transition:all .2s}
.card .map-link:hover{background:rgba(42,81,77,.15);transform:translateY(-1px)}
/* 产品族卡数据条 + 体系图入口 */
.card .cat-stats{display:flex;gap:1rem;margin-top:1rem;font-size:1.2rem}
.card .cat-stat{color:var(--dim);font-weight:500}
.card .cat-map-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.8rem;font-size:1.2rem;color:var(--brand);font-weight:600;text-decoration:none;transition:color .2s}
.card .cat-map-link:hover{color:var(--ink)}
.card .cat-map-ico{width:1.4rem;height:1.4rem;object-fit:contain}

/* ============== FOOTER ============== */
.footer{background:#163028;color:rgba(255,255,255,.7);padding:6rem 0 2rem;margin-top:8rem}
.footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:4rem}
.footer h4{color:#fff;font-size:1.6rem;margin-bottom:1.8rem;font-weight:600;letter-spacing:.05em}
.footer li{margin-bottom:1rem;font-size:1.3rem;line-height:1.6}
.footer a{color:rgba(255,255,255,.7);font-size:1.3rem}
.footer a:hover{color:var(--green)}
.footer .brand{font-size:2.6rem;font-weight:800;color:#fff;letter-spacing:.06em;font-family:'NettoReflex',Arial,sans-serif}
.footer .brand small{display:block;font-size:1.2rem;color:var(--muted);letter-spacing:.2em;margin-top:.4rem;font-weight:400}
.footer .desc{margin-top:1.8rem;font-size:1.3rem;max-width:32rem;line-height:1.7}
.footer .group-link{display:inline-block;margin-top:1.4rem;font-size:1.3rem;color:var(--green);font-weight:500;letter-spacing:.02em}
.footer .group-link:hover{color:#fff;text-decoration:underline}
.footer .qrcode{margin-top:1.6rem;display:flex;align-items:center;gap:1rem}
.footer .qrcode img{width:40px;height:40px;border-radius:.4rem;border:1px solid rgba(255,255,255,.15);background:#fff;padding:2px;box-sizing:content-box;flex-shrink:0}
.footer .qrcode span{font-size:1.2rem;color:rgba(255,255,255,.65);line-height:1.5}
.footer-extras{display:flex;align-items:center;gap:1.5rem;margin-top:1.8rem;flex-wrap:wrap}
.footer-extras .group-link{margin-top:0}
.footer-extras .qrcode{margin-top:0}
.footer-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:4rem;padding-top:2rem;font-size:1.2rem;color:rgba(255,255,255,.4);text-align:center;letter-spacing:.05em}

/* ============== 合作伙伴 logo 墙(统一视觉高度, 保留品牌色) ==============
   核心思路: 所有 logo 固定高度 48px, 宽度按原比例
   - 接近方形的 logo(如中国人民银行印章式)用 .partner.square 放大到 72px 高
     否则固定 48px 高时它宽度只有 53px, 比其他 logo(150-225px)窄太多
   - 极宽 logo(>5:1)用 max-width 限制, 避免撑爆
   - 保留品牌原色, hover 轻微放大
*/
.partners{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 3.5rem;align-items:center;justify-items:center;padding:1.5rem 0 1rem}
.partners--six{grid-template-columns:repeat(6,1fr);gap:2.2rem 2.4rem}
.partner{width:100%;min-height:80px;display:flex;align-items:center;justify-content:center;padding:.5rem}
.partner img{
  height:48px;          /* 默认高度 */
  width:auto;
  max-width:180px;
  object-fit:contain;
  transition:transform .4s var(--ease);
}
/* ★ 接近方形的 logo(比例 < 1.5, 如中国人民银行)放大到 72px 高, 否则太窄显小 */
.partner.square img{height:72px}
.partner:hover img{transform:scale(1.06)}

/* ============== 响应式 ============== */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .partners{grid-template-columns:repeat(3,1fr)}
  .footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  /* 0915 手机适配:55%→57%(正文 ~12px 太小,提至 ~12.6px;新增断点规约见 kb/feature-mobile-adaptation.md) */
  html{font-size:57%}
  .nav,.lang{display:none}
  /* burger 触摸目标 3rem(≈26px)→4.4rem(≥44px 推荐值);线条固定 3rem 宽居中,视觉不变 */
  .burger{display:flex;width:4.4rem;height:4.4rem;align-items:center;margin-left:.8rem}
  .burger i{width:3rem}
  body.omenu .nav{display:flex;position:fixed;left:0;top:7.5rem;width:100%;flex-direction:column;background:#fff;padding:2rem 5%;margin:0;border-bottom:1px solid var(--line)}
  body.omenu .nav li{margin:0 0 1.8rem 0}
  /* 坑:.header-right 的 translateY(-50%) 是 fixed 后代的包含块,会把菜单压成 header-right
     大小的右侧窄条(生产既存 bug,0915 实机截图抓到)。omenu 时改整高定位去掉 transform,
     面板内 mbtn/burger 靠 flex align-items:center 仍垂直居中,无跳动 */
  body.omenu .header-right{top:0;height:7.5rem;transform:none}
  /* P0-2 语言切换:桌面已隐藏(见上方基础规则),这里只管展开菜单里的呈现 */
  body.omenu .nav .nav-lang{display:block;margin:0 0 .4rem 0;padding-top:1.8rem;border-top:1px solid var(--line)}
  body.omenu .nav .nav-lang .lang{display:inline-block;margin-left:0;font-size:1.6rem;font-weight:600;color:var(--brand)}
  body.omenu .nav .nav-lang .lang b{color:var(--ink)}
  .page-hero{padding:11rem 0 4rem}
  .page-hero h1{font-size:3rem}
  .footer .wrap{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .partners{grid-template-columns:repeat(2,1fr);gap:1.8rem 1.2rem}
  .partner{height:54px}
  .partner img{max-width:130px}
  .partner.square img{height:54px;max-width:none}
  .logo-img{height:40px}
  .logo small{font-size:1rem;letter-spacing:.12em}
}

/* ============== 手机底部导航栏(tab bar · 仿 App 底栏 · ≤768px 显示) ==============
   - 固定在底部, 随滚动常驻, 拇指可达
   - 5 个 tab: 首页/产品/案例/服务/关于
   - 当前页高亮(brand 色)
   - JS 动态注入(见 shared.js 或各页内联), 避免改 8 个 HTML
   - 桌面端隐藏(>768px 有顶部 nav)
*/
.mobile-tabbar{display:none}  /* 默认隐藏, 仅手机端 @media 里 display:flex */

@media(max-width:768px){
  body{padding-bottom:6rem}  /* 给 tab bar 留空间, 避免挡住 footer 内容 */
  .mobile-tabbar{
    display:flex;
    position:fixed;
    left:0;bottom:0;width:100%;
    height:5.4rem;
    background:#fff;
    border-top:1px solid var(--line);
    z-index:600;  /* 比 header(500)高, 盖住一切 */
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
    justify-content:space-around;
    align-items:center;
    padding:0 .3rem;
    /* 适配 iOS 安全区域(刘海屏底部) */
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .mobile-tabbar a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    height:100%;
    font-size:1rem;
    color:var(--muted);
    text-decoration:none;
    gap:.3rem;
    transition:color .2s;
  }
  .mobile-tabbar a .mt-icon{
    width:2.2rem;height:2.2rem;
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-tabbar a .mt-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6}
  .mobile-tabbar a.cur{color:var(--brand)}
  .mobile-tabbar a.cur .mt-icon svg{stroke-width:2}
}

/* === 全站检索（0827 赠送档）— 桌面 header 内联框 / 移动端放大镜展开面板 ===
   0827b Cindy 反馈:入口太隐蔽没找到 → 加大输入框+前置放大镜图标+白底描边强化识别 */
.hsearch{position:relative;margin-left:2.2rem}
.hs-ico{position:absolute;left:1.4rem;top:50%;transform:translateY(-50%);width:1.7rem;height:1.7rem;color:#8e8c84;pointer-events:none;transition:color .2s}
.hsearch input{width:20rem;height:4.2rem;border:1.5px solid #d8d6cf;border-radius:2.1rem;padding:0 1.6rem 0 4.2rem;font-size:1.4rem;outline:none;background:#fff;box-shadow:0 1px 4px rgba(29,58,55,.07);transition:width .25s var(--ease),border-color .2s,box-shadow .2s;color:var(--ink)}
.hsearch input::placeholder{color:#98968e}
.hsearch input:focus{width:24rem;border-color:var(--brand);box-shadow:0 2px 10px rgba(42,81,77,.14)}
.hsearch:focus-within .hs-ico{color:var(--brand)}
.hs-drop{position:absolute;right:0;top:4.2rem;width:34rem;max-width:82vw;background:#fff;border:1px solid var(--line);border-radius:.8rem;box-shadow:0 12px 32px rgba(0,0,0,.13);overflow-y:auto;max-height:70vh;z-index:560}
.hs-grp{padding:.9rem 1.4rem .3rem;font-size:1.05rem;letter-spacing:.14em;color:#8e8c84}
.hs-it{display:flex;align-items:center;gap:.8rem;padding:.85rem 1.4rem;cursor:pointer;border-left:2px solid transparent}
.hs-it.on,.hs-it:hover{background:#F4F7F5;border-left-color:var(--brand)}
.hs-t{min-width:0}
.hs-t b{font-size:1.35rem;font-weight:600;color:var(--ink)}
.hs-t b em,.hs-t .hs-s em{font-style:normal;color:var(--brand)}
.hs-s{display:block;font-size:1.15rem;color:#8e8c84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.hs-sel{margin-left:auto;flex:none;border:1px solid var(--brand);color:var(--brand);background:#fff;border-radius:.6rem;font-size:1.1rem;padding:.3rem .8rem;cursor:pointer}
.hs-sel.on{background:var(--brand);color:#fff}
.hs-ft{border-top:1px solid var(--line);padding:.8rem 1.4rem;font-size:1.15rem}
.hs-ft a{color:var(--brand);text-decoration:none}
.hs-empty{padding:1.4rem;font-size:1.25rem;color:#5C5A54;line-height:1.8}
.hs-mbtn{display:none;width:3.6rem;height:3.6rem;align-items:center;justify-content:center;cursor:pointer;margin-left:1.4rem;background:rgba(42,81,77,.09);border:0;border-radius:50%;color:var(--brand)}
.hs-mpanel{display:none}
@media(max-width:768px){
  .hsearch{display:none}
  .hs-mbtn{display:flex}
  .hs-mpanel{position:fixed;left:0;top:7.5rem;width:100%;background:#fff;padding:1.4rem 4% 1.6rem;border-bottom:1px solid var(--line);z-index:490;box-shadow:0 10px 24px rgba(0,0,0,.08)}
  body.hs-open .hs-mpanel{display:block}
  .hs-mpanel input{width:100%;box-sizing:border-box;height:3.8rem;border:1px solid var(--line);border-radius:.8rem;padding:0 1.4rem;font-size:1.4rem;outline:none}
  .hs-mpanel input:focus{border-color:var(--brand)}
  .hs-mpanel .hs-drop{position:static;width:100%;margin-top:.6rem;box-shadow:none;border-radius:.8rem}
}
@media(max-width:1024px){.hsearch{margin-left:1.6rem}.hsearch input{width:14.5rem;padding-left:3.8rem}.hsearch input:focus{width:16rem}}

/* B01:语言切换链接 */
a.lang{color:inherit;text-decoration:none;cursor:pointer;transition:color .2s}
a.lang:hover{color:var(--green,#84BD3F)}
