/* ============================================================
   Triple-Stone 官网原型共享样式
   抽取自 5 个原型页 <style> 中在 2 个及以上页面完全相同的规则。
   页面独有或存在细微差异的规则仍保留在各页 <style> 内
   （页面 <style> 在本文件之后加载，可正常覆盖）。
   ============================================================ */

/* ---------- 本地字体（2026-08-25 消除切页抖动） ----------
 * 抖动原因：字体走 Google CDN 异步加载，页面先用系统字体排版、
 * 字体下载完成后整体换字重排 → 切页抖动；网络慢时明显。
 * Open Sans（英文主体）改为本地可变字体（wght 300-800 一档全包），
 * file:// 秒读零网络依赖；Noto Sans SC 仍走 CDN 但 display=optional
 * （有缓存用缓存、没有整段用雅黑，绝不中途换字 → 不再因网络抖动）。 */
@font-face{
  font-family:"Open Sans";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("../assets/fonts/OpenSans-Variable-wght.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* 中文正文思源黑体（本地化，零 CDN 依赖；仅覆盖 CJK 区，与 Open Sans 西文区互补） */
@font-face{
  font-family:"Source Han Sans SC";font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/SourceHanSansSC-Regular.woff2") format("woff2");
  unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;
}
@font-face{
  font-family:"Source Han Sans SC";font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/SourceHanSansSC-Medium.woff2") format("woff2");
  unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;
}
@font-face{
  font-family:"Source Han Sans SC";font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/SourceHanSansSC-Bold.woff2") format("woff2");
  unicode-range:U+2E80-2EFF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF;
}

/* ---------- 设计变量 & 基础重置 ---------- */
:root{
  --red:#B2282E; --red-dark:#8C1F24; --red-light:#F7E8E9;
  --ink:#1F2124; --gray:#757B82; --light:#F5F6F7; --line:#E3E5E8; --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Open Sans","Source Han Sans SC","Noto Sans SC","Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);line-height:1.6;background:var(--white)}
html{scroll-behavior:smooth;scrollbar-gutter:stable} /* 统一预留滚动条槽位：长短页切换不再左右挪 */
[id]{scroll-margin-top:88px} /* 锚点跳转避开 sticky 导航（72px+16px 余量） */
@media(min-width:901px){body{zoom:.8}} /* 视觉密度基准：桌面端 80% 缩放（2026-08-15 A/B 对比后确认保留） */
body{touch-action:manipulation} /* 2026-09-04 手机端禁双击缩放（捏合缩放保留）：快速点按/滑动不再误触页面放大缩小 */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* 科技感小细节：工程角标 */
.corners{position:relative}
.corners::before,.corners::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;transition:.25s}
.corners::before{top:-1px;left:-1px;border-top:2px solid var(--red);border-left:2px solid var(--red)}
.corners::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--red);border-right:2px solid var(--red)}

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

/* ---------- Nav ---------- */
header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:44px;width:auto;display:block}
.logo small{display:block;font-size:10px;font-weight:400;color:var(--gray);letter-spacing:2px}
.nav ul{display:flex;gap:26px;list-style:none;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.nav a:hover{color:var(--red)}
.nav a.active{color:var(--red);font-weight:600}
.nav .cta{background:var(--red);color:#fff;padding:9px 20px;border-radius:6px;font-weight:600}
.nav .cta:hover{background:var(--red-dark);color:#fff}
/* ---------- Nav 下拉（B 方案：白底简洁列表，hover 展开） ---------- */
.nav li{position:relative}
.nav li.has-drop:hover>a{color:var(--red)}
.nav .dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-top:2px solid var(--red);border-radius:0 0 8px 8px;box-shadow:0 18px 44px rgba(31,33,36,.12);padding:14px 22px;min-width:230px;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin;opacity:0;visibility:hidden;transition:opacity 0s .12s,visibility 0s .12s;z-index:200;display:flex;flex-direction:column}
.nav .dd::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
/* 延迟硬切：0s 时长无渐变（无半透明中间态）。展开延迟 .3s 防划过误触；收起延迟 .12s 防间隙断开——鼠标从导航项滑向面板穿过间隙时 hover 瞬断，120ms 内重新进入即取消收起 */
.nav li.has-drop:hover .dd{opacity:1;visibility:visible;transition:opacity 0s .3s,visibility 0s .3s}
/* 防误触：鼠标划过不展开（需停留 .3s），且页面刚打开、用户还没动过鼠标前完全锁住（shared/nav.js 加 html.nav-lock） */
html.nav-lock .nav li.has-drop:hover .dd{opacity:0;visibility:hidden;transition:opacity 0s,visibility 0s}
.nav .dd a{display:block;position:relative;color:var(--ink);text-decoration:none;font-size:13.5px;padding:6px 0;white-space:nowrap;transition:color .12s,padding-left .15s}
.nav .dd a::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1.5px;background:var(--red);transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .15s}
.nav .dd a:hover{color:var(--red);padding-left:16px}
.nav .dd a:hover::before{transform:translateY(-50%) scaleX(1)}
/* Products 田字格 2×2 面板：中线对齐文字中心 + 十字分隔 + 红短线 kicker */
.nav .dd.cols{left:50%;transform:translateX(-50%);padding:14px 0;display:grid;grid-template-columns:repeat(2,max-content);max-width:calc(100vw - 32px)}
.nav .dd.cols .col{padding:12px 22px;border:none}
.nav .dd.cols .col:nth-child(odd){border-right:1px solid var(--line)}
.nav .dd.cols .col:nth-child(n+3){border-top:1px solid var(--line)}
.nav .dd.cols a{font-size:13px;padding-top:4px;padding-bottom:4px}
.nav .dd.cols .col b{display:block;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);padding-bottom:8px;margin-bottom:6px;position:relative}
.nav .dd.cols .col b::after{content:"";position:absolute;left:0;bottom:0;width:20px;height:3px;background:var(--red)}
.nav .dd.cols .col b a{color:inherit;text-decoration:none;transition:.12s}
.nav .dd.cols .col b a:hover{opacity:.75}
.nav .dd.cols .col .col-sub{display:block;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray);padding:7px 0 2px;margin-top:2px}
.nav .dd.cols .col .col-sub:first-of-type{padding-top:2px}
.nav .dd.cols .col .col-sub2{display:block;white-space:nowrap;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#AAB0B6;padding:6px 0 2px 10px;margin-top:1px}
.nav .dd.cols .col .col-sub-app{display:block;white-space:nowrap;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);padding:7px 0 2px;margin-top:2px;text-decoration:none;transition:opacity .15s}
.nav .dd.cols .col .col-sub-app:hover{opacity:.78}

/* ---------- 族页卡片视图（high-power 等） ---------- */
.pfilter{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;color:var(--gray)}
.pfilter select{padding:7px 12px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:#fff;font-size:13px}
.pgroup{margin-bottom:26px}
.pgroup-h{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--red-dark);padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.pgroup-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;text-align:left;cursor:pointer;padding:0;transition:.2s;font-family:inherit}
.pcard:hover{box-shadow:0 12px 28px rgba(31,33,36,.09);transform:translateY(-3px)}
.pcard.hl{border-color:var(--red);box-shadow:0 0 0 2px rgba(178,40,46,.2)}
.pcard-img{height:120px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.pcard-img img{max-width:78%;max-height:82%;object-fit:contain}
.pcard-t{padding:12px 14px;border-top:1px solid var(--bg)}
.pcard-t b{display:block;font-size:13.5px;color:var(--ink);line-height:1.35}
.pcard-t small{display:block;margin-top:4px;font-size:12px;color:var(--red);font-weight:600}
.pwtab{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pwtab a{display:inline-block;padding:7px 16px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;transition:.15s}
.pwtab a:hover{border-color:var(--red);color:var(--red)}
.pwtab a.on{background:var(--red);border-color:var(--red);color:#fff}
.pwtab.pwtab2{margin:-6px 0 16px}
.pwtab.pwtab2 a{font-size:11.5px;padding:5px 13px;color:var(--gray);border-color:var(--line)}
.pwtab.pwtab2 a.on{background:var(--red);border-color:var(--red);color:#fff}
/* Products 田字格保持中线对齐文字中心 */

/* ---------- 按钮（红色主按钮；About 页白底版本在页内覆盖） ---------- */
.btn{display:inline-block;background:var(--red);color:#fff;padding:14px 32px;border-radius:8px;text-decoration:none;font-weight:600;font-size:15px;transition:.15s}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink);margin-left:14px}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}
.btn-sm{padding:10px 20px;font-size:13px}

/* ---------- Sections（全站统一紧凑版；产品系页面在页内可再覆盖） ---------- */
section{padding:64px 0}
/* 应用页 Challenge→Solution 两板块皆白底相连，间隔 128px 显空；收 challenge 底距至 24（2026-09-05 用户反馈） */
#challenge{padding-bottom:24px}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:26px;letter-spacing:-.5px;position:relative;padding-bottom:12px}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;background:var(--red);border-radius:2px}
.sec-head.center{text-align:center}
.sec-head.center h2::after{left:50%;transform:translateX(-50%)}
.sec-head p{color:var(--gray);max-width:680px;margin-top:10px;font-size:15px;text-wrap:balance}
.sec-head.center p{margin-left:auto;margin-right:auto}
/* 浅色渐变区块（上下浅灰、中间白） */
.alt{background:linear-gradient(180deg,#ECEDEF 0%,#F5F6F7 22%,#fff 48%,#fff 52%,#F5F6F7 78%,#ECEDEF 100%)}
/* 首页 About 区块（中间白、四角品牌浅粉光晕） */
#about{background:
  radial-gradient(760px 460px at 0% 0%,rgba(178,40,46,.055),transparent 62%),
  radial-gradient(760px 460px at 100% 0%,rgba(178,40,46,.07),transparent 62%),
  radial-gradient(760px 460px at 0% 100%,rgba(224,78,57,.05),transparent 62%),
  radial-gradient(760px 460px at 100% 100%,rgba(178,40,46,.055),transparent 62%),
  #fff}

/* ---------- Stats 数据条（首页/About） ---------- */
.stats{background:linear-gradient(180deg,#F5F6F7 0%,#fff 22%,#fff 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;padding:34px 24px}
.stats div{border-left:1px solid var(--line)}
.stats div:first-child{border-left:none}
.stats b{display:block;font-size:28px;color:var(--red)}
.stats small{font-size:13px;color:var(--gray)}

/* ---------- Featured 主打卡片公共部分（首页/Products） ---------- */
.featured .f-top{display:grid;grid-template-columns:1fr 1.2fr}
.featured .f-img::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:2px solid rgba(178,40,46,.3);border-left:2px solid rgba(178,40,46,.3)}
.featured .f-img img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:70%;max-height:70%;object-fit:contain}

/* ---------- 卡片公共部分 ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:.25s;position:relative;display:flex;flex-direction:column}
.card .bd{display:flex;flex-direction:column;flex:1}
.card a.more{margin-top:auto;padding-top:12px}
.card:hover{box-shadow:0 14px 32px rgba(31,33,36,.08);transform:translateY(-4px)}
.card::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-dark));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.card:hover::after{transform:scaleX(1)}
.card .ph::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:2px solid rgba(178,40,46,.3);border-left:2px solid rgba(178,40,46,.3)}
/* 卡图体量档位（按框面积占比定）：默认=机箱盒式(高80%) / sm=长条器件(宽82%) / md=中等 / lg=窄面盒式(高92%) / wide=扁长机箱(宽72%) / xs=大黑面机箱(48/62) */
/* 2026-10 校准：卡图文件已统一内容占比（扁长88%/方型72%），档位固定映射 扁长→sm 方型→lg */
.card .ph img{position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);max-width:70%;max-height:80%;object-fit:contain}
.card .ph img.sm{max-width:82%;max-height:82%}
.card .ph img.md{max-width:56%;max-height:66%}
.card .ph img.lg{max-width:76%;max-height:92%}
.card .ph img.wide{max-width:72%;max-height:54%}
.card .ph img.xs{max-width:48%;max-height:62%}
.card a.more{color:var(--red);text-decoration:none;font-weight:600;font-size:13.5px}

/* ---------- Quality strip（首页/About） ---------- */
.quality{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.quality div{border:1px solid var(--line);border-radius:6px;padding:30px 16px;background:#fff;transition:.2s}
.quality div:hover{border-color:rgba(178,40,46,.25)}
.quality b{display:block;font-size:16px;margin-bottom:6px;color:var(--red)}
.quality span{font-size:13px;color:var(--gray)}

/* ---------- 产品详情页公共（OCS / 8-in-1 Circulator） ---------- */
.kicker{display:inline-block;background:var(--red);color:#fff;font-weight:600;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;padding:7px 14px;border-radius:4px;margin-bottom:14px}
.crumbs{font-size:13px;color:var(--gray);padding:20px 0 0}
.crumbs a{color:var(--gray);text-decoration:none}
.crumbs a:hover{color:var(--red)}

/* ---------- 内页 Page Hero（全站内页共用：Support / About / News / Products / Product 族页；对齐 support 版式） ---------- */
.page-hero{background:
      radial-gradient(880px 460px at 84% 6%,rgba(178,40,46,.09),transparent 62%),
      radial-gradient(600px 380px at 8% 96%,rgba(178,40,46,.05),transparent 60%),
      linear-gradient(180deg,#fff 0%,#F5F6F7 100%);
      padding:88px 0 72px;position:relative;overflow:hidden;text-align:center}
.page-hero::before{content:"";position:absolute;inset:0;
      background-image:radial-gradient(rgba(178,40,46,.08) 1px,transparent 1px);
      background-size:26px 26px;
      mask-image:radial-gradient(ellipse at 78% 30%,#000 20%,transparent 68%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{font-size:42px;line-height:1.16;margin-bottom:16px;font-weight:700;letter-spacing:-1px}
.page-hero h1 em{color:var(--red);font-style:normal}
.page-hero p{font-size:17px;color:var(--gray);max-width:680px;margin:0 auto;text-wrap:balance}

/* ---------- Application 切换条（9 个应用详情页互相跳转；各页 HTML 逐字相同，仅 active 不同） ---------- */
.appnav{position:relative;border-bottom:1px solid var(--line);background:#fff}
/* 吸顶变体：Application 详情页切换条（与 products 页 quicknav 同参数） */
.appnav.stick{position:sticky;top:72px;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}
.appnav .wrap{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.appnav .wrap::-webkit-scrollbar{display:none}
.appnav a{flex-shrink:0;font-size:13.5px;color:var(--gray);text-decoration:none;white-space:nowrap;padding:13px 2px 11px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .2s}
.appnav a:hover{color:var(--red)}
.appnav a.active{color:var(--red);font-weight:600;border-bottom-color:var(--red)}
@media(max-width:900px){
  .appnav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff)}
}

/* ---------- Application Hero（9 个应用详情页共用；各页只覆盖 --hero-1/--hero-2 两个底色变量） ---------- */
.ahero{position:relative;overflow:hidden;height:420px;display:flex;align-items:flex-start;padding:96px 0 80px;
  background:
    radial-gradient(900px 480px at 78% 30%, var(--hero-glow,rgba(178,40,46,.18)), transparent 65%),
    linear-gradient(180deg,var(--hero-1,#170608) 0%,var(--hero-2,#0B0203) 100%)}
.ahero-fx{position:absolute;inset:0;z-index:0} /* 未来动效/图片插槽：canvas 或 img 放这里，文字层已预留 z-index */
.ahero .wrap{position:relative;z-index:2;width:100%} /* flex item 补满宽：wrap 盒不随内容收缩，文字与 logo/主列左缘对齐（同主页 hero） */
.ahero .k2{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:18px}
.ahero .k2::before{content:"";width:36px;height:3px;background:rgba(255,255,255,.7);border-radius:2px}
.ahero h1{font-size:42px;line-height:1.16;color:#fff;letter-spacing:-1px;margin-bottom:18px;max-width:720px}
.ahero p{font-size:17px;color:rgba(255,255,255,.72);max-width:640px;min-height:55px;margin-bottom:26px;text-wrap:balance}
.ahero .btn.ghost{border-color:rgba(255,255,255,.35);color:#fff;margin-left:14px}
.ahero .btn.ghost:hover{border-color:#FF6A55;color:#FF6A55}

/* ---------- Application 页：左文右图分栏（How We Fit In） ---------- */
.sol{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.sol p{font-size:15px;color:var(--ink);line-height:1.8;margin-bottom:16px}
.sol p:last-child{margin-bottom:0}

/* ---------- Application 页：链路示意图（器件在链路中的位置，红色 = 三石园供货点） ---------- */
.chain{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 22px}
.chain .cn{flex:1;min-width:100px;border:1px solid var(--line);border-radius:6px;background:var(--light);padding:12px 8px;font-size:12.5px;color:var(--ink);text-align:center;line-height:1.35;display:flex;flex-direction:column;justify-content:center}
.chain .cn small{display:block;font-size:10.5px;color:var(--gray)}
.chain .cn.ours{border:1.5px solid var(--red);background:var(--red-light);color:var(--red);font-weight:600}
.chain .cn.ours small{color:var(--ink);font-weight:400}
.chain .cj{align-self:center;width:22px;height:2px;flex-shrink:0;background:linear-gradient(90deg,#D9DCDE,rgba(178,40,46,.45))}
.chain-cap{font-size:12.5px;color:var(--gray);text-align:center;margin-top:12px}

/* 通栏大图：容器全宽（导读卡与正文左右对齐），img 居中、最大宽度=篇幅的 2/3（1200 wrap → 768，2026-09-05 用户定规） */
.fig-wide{margin:28px auto 32px;max-width:none;text-align:center}
.fig-wide img{width:100%;max-width:768px;height:auto;display:block;background:transparent;border-radius:6px;margin:0 auto}
.fig-wide .chain-cap{margin-top:10px}

/* 应用页正文内联产品链接：品牌红（access 页样板，全站统一） */
.sol p a{color:var(--red);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(178,40,46,.35);transition:.15s}
.sol p a:hover{border-bottom-color:var(--red)}

/* 图导读提示卡（红左边线+浅底） */
.fig-read{font-size:13.5px;color:var(--gray);line-height:1.75;text-align:left;margin:10px auto 0;max-width:880px;background:var(--light);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:6px;padding:12px 16px}

/* How We Fit In 正文全宽铺开（图已通栏移出，文字不再拘于半栏） */
.sol.solo{grid-template-columns:1fr}

/* How We Fit In 对齐规则：文字（标题/引言/正文）与 The Challenge 同宽全铺；仅示意图保持 960 居中，导读卡满图宽 */
#solution .sec-head p{max-width:none}
#solution .fig-read{max-width:100%}

/* ---------- Application 页：Other Applications 小卡条 ---------- */
.apps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.app{border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--ink);padding:26px 22px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-start;transition:.2s;position:relative;overflow:hidden;text-decoration:none}
.app:hover{border-color:rgba(178,40,46,.25);transform:translateY(-4px);box-shadow:0 14px 32px rgba(31,33,36,.08)}
.app::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-dark));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.app:hover::after{transform:scaleX(1)}
.app h3{font-size:16px;margin-bottom:6px;color:var(--ink)}
.app:not(.first):not(.cta) h3{min-height:3.2em} /* 标题恒占 2 行高：灰色描述在各卡间同一水平线起排 */
.app p{font-size:13px;color:var(--gray)}
.app .explore{display:inline-block;margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--red)}
.app.cta{border-style:dashed;border-color:rgba(178,40,46,.35);justify-content:center}
.app.cta h3{color:var(--red)}
.app.cta a{color:var(--red);font-weight:600;text-decoration:none;font-size:14px}

/* ---------- Application 页：6 项数据条变体 + 资质小字 ---------- */
.stats.six .wrap{grid-template-columns:repeat(6,1fr)}
.proof-note{text-align:center;font-size:12.5px;color:var(--gray);padding:0 24px 26px;margin-top:-8px}

@media(max-width:900px){
  .ahero{display:none} /* 2026-09-04 手机端去掉应用页整个 hero（动画+色块横幅整体不显示），页面从 appnav 直进内容；桌面端保留 */
  .sol{grid-template-columns:1fr}
  .apps{grid-template-columns:1fr 1fr}
  .stats.six .wrap{grid-template-columns:repeat(2,1fr);gap:14px}
  .stats.six div{border-left:none}
  .chain{flex-direction:column;gap:0}
  .chain .cj{width:2px;height:16px}
}
@media(max-width:520px){
  .apps{grid-template-columns:1fr}
}

.phead{padding:28px 0 44px;border-bottom:1px solid var(--line)}
.phead h1{font-size:34px;letter-spacing:-1px;margin-bottom:12px}
.phead .sub{font-size:16px;color:var(--gray);max-width:760px}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:stretch}
.pimg{aspect-ratio:auto;min-height:0;padding:24px;overflow:visible;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--gray);font-size:13px;position:relative}
.pimg::before{content:"";position:absolute;top:10px;left:10px;width:14px;height:14px;border-top:2px solid rgba(178,40,46,.3);border-left:2px solid rgba(178,40,46,.3)}
.pimg img{position:absolute;top:24px;left:24px;width:calc(100% - 48px) !important;height:calc(100% - 48px) !important;object-fit:contain !important;display:block}
.pimg.corners::after{bottom:0;right:0;width:14px;height:14px;border-bottom:2px solid rgba(178,40,46,.3);border-right:2px solid rgba(178,40,46,.3)}
.pimg-full{width:100%;min-height:400px}
/* key spec cards */
.keyspecs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.keyspecs.ks-8,.keyspecs.ks-10,.keyspecs.ks-full{grid-template-rows:none;grid-auto-rows:minmax(56px,auto);align-content:start}
.keyspecs .ks{border:1px solid var(--line);border-radius:6px;padding:10px 14px;background:#fff;position:relative;overflow:hidden;transition:.2s;display:flex;flex-direction:column;justify-content:center;min-height:0}
.keyspecs .ks:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(31,33,36,.07)}
.keyspecs .ks::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--red-dark));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.keyspecs .ks:hover::after{transform:scaleX(1)}
.keyspecs b{display:block;font-size:18px;color:var(--red);letter-spacing:-.5px}
.keyspecs small{font-size:11px;color:var(--gray)}
/* compact spec grid under product image */
.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
.spec-grid .sg{background:#fff;padding:13px 16px;display:flex;flex-direction:column;gap:2px;min-height:64px;transition:.15s}
.spec-grid .sg:hover{background:var(--red-light)}
.spec-grid .sl{font-size:10.5px;color:var(--gray);letter-spacing:.6px;text-transform:uppercase;line-height:1.25}
.spec-grid .sv{font-size:15px;font-weight:600;color:var(--ink);line-height:1.25}
.spec-grid .sv small{font-size:10.5px;color:var(--gray);font-weight:400;margin-left:3px}
/* compact datasheet strip */
.dlstrip-compact{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.dlstrip-compact h3{font-size:16px;margin-bottom:3px}
.dlstrip-compact p{font-size:13px;color:var(--gray)}
/* features / applications */
.fa{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.fa h3{font-size:16px;margin-bottom:14px;color:var(--ink)}
.fa ul{list-style:none}
.fa li{position:relative;padding:7px 0 7px 24px;font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--line)}
.fa li::before{content:"";position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--red)}
/* spec list（轻排版：细分割线、无表头无斑马纹） */
.spec-list{max-width:820px;margin:0 auto}
.spec-list .sr{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line)}
.spec-list .sn{font-size:14.5px;color:var(--gray)}
.spec-list .sv{font-size:14.5px;color:var(--ink);font-weight:600;text-align:right}
.spec-list .sv small{font-weight:400;color:var(--gray);margin-left:5px}
.tbl-note{font-size:12.5px;color:var(--gray);margin-top:14px}
/* datasheet strip（产品详情页版含 margin-top；Products 页在页内覆盖） */
.dlstrip{background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:44px}
.dlstrip h3{font-size:19px;margin-bottom:6px}
.dlstrip p{font-size:14px;color:var(--gray)}

/* ---------- Inquiry 表单（首页/Products/OCS/Circulator） ---------- */
.inquiry{background:linear-gradient(180deg,#ECEDEF 0%,#F5F6F7 22%,#fff 48%,#fff 52%,#F5F6F7 78%,#ECEDEF 100%);border-top:1px solid var(--line)}
.inquiry .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.inquiry h2{font-size:30px;margin-bottom:14px;letter-spacing:-.5px}
.inquiry h2 em{color:var(--red);font-style:normal}
.inquiry p{color:var(--gray)}
.form{background:#fff;border:1px solid var(--line);border-radius:6px;padding:32px;color:var(--ink)}
.form .field{position:relative;margin-bottom:14px}
.form .field input,.form .field textarea{width:100%;padding:20px 15px 8px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;background:var(--light);transition:border-color .15s,box-shadow .15s,background .15s}
.form .field textarea{resize:vertical}
.form .field label{position:absolute;left:15px;top:14px;font-size:14px;color:var(--gray);pointer-events:none;transition:.15s}
.form .field input:focus,.form .field textarea:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(178,40,46,.08)}
.form .field input:focus+label,.form .field input:not(:placeholder-shown)+label,
.form .field textarea:focus+label,.form .field textarea:not(:placeholder-shown)+label{top:5px;font-size:10.5px;letter-spacing:.8px;color:var(--red);text-transform:uppercase}
.form button{width:100%;padding:15px;background:var(--red);color:#fff;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:.15s}
.form button:hover{background:var(--red-dark);transform:scale(1.02)}

/* ---------- Footer ---------- */
footer{background:var(--light);border-top:1px solid var(--line);color:var(--gray);padding:56px 0 30px;font-size:14px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;margin-bottom:36px}
footer h4{color:var(--ink);font-size:15px;margin-bottom:14px}
footer a{color:var(--gray);text-decoration:none;display:block;margin-bottom:8px}
footer a:hover{color:var(--red)}
.copy{border-top:1px solid var(--line);padding-top:20px;text-align:center;font-size:13px}
/* 页脚资质徽章 */
.fbadges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}
.fbadges span{border:1px solid var(--line);border-radius:6px;padding:8px 16px;font-size:12px;color:var(--gray);letter-spacing:.8px;background:#fff}

/* ---------- Roadmap split card（产品页：现有产品 vs 微缩 Roadmap） ---------- */
.roadmap-split{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.roadmap-split .rs-left{padding:36px 40px;border-right:1px solid var(--line)}
.roadmap-split .rs-right{padding:36px 40px;background:#FAFBFC;display:flex;flex-direction:column;justify-content:center}
.roadmap-split .rs-badge{display:inline-block;border:1px solid rgba(178,40,46,.35);color:var(--red);font-size:12px;font-weight:600;padding:5px 12px;border-radius:4px;margin-bottom:18px}
.roadmap-split .rs-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.roadmap-split .rs-actions .btn.ghost{margin-left:0}
.roadmap-split .rs-also{font-size:12.5px;color:var(--gray);margin-top:18px}
.roadmap-split .rs-also a{color:var(--red);text-decoration:none;font-weight:600}
.roadmap-split .rs-also a:hover{text-decoration:underline}
.roadmap-split .rs-road{list-style:none;display:flex;flex-direction:column;gap:14px}
.roadmap-split .rs-road li{display:flex;align-items:center;gap:12px}
.roadmap-split .rs-road li::before{content:"";width:7px;height:7px;border-radius:50%;background:#C5C9CE;flex-shrink:0}
.roadmap-split .rs-road li b{font-size:14px;color:var(--gray);font-weight:600}
.roadmap-split .rs-road li small{font-size:12px;color:#9CA0A6;margin-left:auto}
@media(max-width:900px){
  .pimg{min-height:320px} /* 窄屏单列后 grid 拉伸失效，img 为 absolute 需给容器保底高度，否则产品主图塌陷消失 */
  .btn.ghost{margin-left:0;margin-top:14px} /* 窄屏按钮换行堆叠：取消并排间距左缩进，改上间距保持左缘对齐（含主页 hero 等） */
  .ahero .btn.ghost{margin-left:0;margin-top:14px} /* 窄屏按钮换行堆叠时取消左缩进并改上间距，保持左缘对齐 */
  .ahero .wrap{background:linear-gradient(96deg,rgba(9,2,4,.93) 0%,rgba(9,2,4,.82) 52%,rgba(9,2,4,0) 96%);padding:22px 20px} /* 窄屏文字底衬：压暗场景亮光保证可读，右侧渐隐露出场景 */
  .f-grid{grid-template-columns:1fr 1fr;gap:26px 20px} /* 2026-09-04 手机端页脚 4→2 列：邮箱/品牌名不可断行，4 列 min-content 超出视口导致整页横向溢出 */
  .roadmap-split{grid-template-columns:1fr}
  .roadmap-split .rs-left{border-right:none;border-bottom:1px solid var(--line)}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .spec-grid{grid-template-columns:1fr}
}

/* ---------- Product 族页共用（product-* 页：型号 tab / 族内链接卡 / datasheet 弹窗 / 宽版下载条 / 宽版 sec-head） ---------- */
/* 族页紧凑 hero：保留 page-hero 的红晕+点阵视觉，高度压缩，标题醒目且产品图首屏可见（整体左对齐） */
.phero{background:
      radial-gradient(700px 380px at 86% 6%,rgba(178,40,46,.09),transparent 62%),
      radial-gradient(480px 300px at 6% 96%,rgba(178,40,46,.05),transparent 60%),
      linear-gradient(180deg,#fff 0%,#F5F6F7 100%);
      padding:26px 0 20px;position:relative;overflow:hidden;text-align:left}
.phero::before{content:"";position:absolute;inset:0;
      background-image:radial-gradient(rgba(178,40,46,.07) 1px,transparent 1px);
      background-size:26px 26px;opacity:.5;pointer-events:none}
.phero .wrap{position:relative}
.phero h1{font-size:28px;letter-spacing:-.5px;line-height:1.2;margin:0 0 8px}
.phero p{font-size:14px;color:var(--gray);max-width:800px;margin:0;line-height:1.55}
.phero .kicker{margin-bottom:12px}
.mtabs-wrap{margin-top:18px}
/* 型号 tab：紧凑胶囊横排（替代大卡片，占位减半） */
.mtabs-family{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px;margin-top:0}
.mtabs-family a{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:6px;padding:7px 13px;min-width:80px;background:#fff;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;transition:.2s;position:relative;overflow:hidden;text-align:center;line-height:1.3}
.mtabs-family a small{display:block;font-weight:400;font-size:10.5px;color:var(--gray);margin-top:2px;white-space:nowrap}
.mtabs-family a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(31,33,36,.07);border-color:rgba(178,40,46,.3);color:var(--red)}
.mtabs-family a.on{border-color:var(--red);background:var(--red-light);color:var(--red)}
.mtabs-family a.on small{color:var(--red)}
/* 族内链接卡：紧凑网格 */
.family{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.family a{display:block;border:1px solid var(--line);border-radius:6px;padding:12px 14px;background:#fff;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;transition:.2s;position:relative;overflow:hidden}
.family a small{display:block;font-weight:400;font-size:11.5px;color:var(--gray);margin-top:3px}
.family a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(31,33,36,.07);border-color:rgba(178,40,46,.3);color:var(--red)}
.dlstrip-wide{margin-top:24px;padding:16px 22px}
.dlstrip-wide h3{font-size:16px}
.dlstrip-wide p{font-size:13px}
.sec-head.wide p{max-width:none}
.modal{display:none;position:fixed;inset:0;background:rgba(31,33,36,.45);z-index:200;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:8px;max-width:420px;width:100%;padding:32px;position:relative}
.modal-box .modal-close{position:absolute;top:12px;right:14px;width:auto;padding:4px 8px;background:none;border:none;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gray);cursor:pointer;line-height:1}
.modal-box .modal-close:hover{color:var(--red);background:none}
.modal-box h3{font-size:20px;margin-bottom:8px;letter-spacing:-.3px}
.modal-box>p{font-size:13px;color:var(--gray);margin-bottom:20px}
.modal-box input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:14px;margin-bottom:12px;font-family:inherit;background:var(--light);transition:border-color .15s,box-shadow .15s,background .15s}
.modal-box input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(178,40,46,.08)}
.modal-box button.submit-btn{width:100%;padding:13px;background:var(--red);color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.modal-box button.submit-btn:hover{background:var(--red-dark)}
@media(max-width:900px){
  .nav ul{display:none}
  .pgrid,.fa,.inquiry .wrap,.grid3{grid-template-columns:1fr}
  .keyspecs{grid-template-columns:1fr 1fr}
  .mtabs-family,.family{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 语言切换（地球图标 + Language 下拉：English / 简体中文；逻辑见 shared/nav.js） ---------- */
.nav ul{margin-left:auto}
.lang-switch{position:relative;margin-left:16px;flex-shrink:0}
.lang-current{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.3px;white-space:nowrap;cursor:pointer;transition:border-color .15s,color .15s}
.lang-current:hover{border-color:var(--red);color:var(--red)}
.lang-current svg{flex-shrink:0;display:block}
.lang-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:2px;transition:transform .18s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-dd{position:absolute;top:calc(100% + 8px);right:0;min-width:150px;background:#fff;border:1px solid var(--line);border-top:2px solid var(--red);border-radius:0 0 8px 8px;box-shadow:0 18px 44px rgba(31,33,36,.12);padding:6px 0;opacity:0;visibility:hidden;transition:opacity 0s .12s,visibility 0s .12s;z-index:210}
.lang-switch:hover .lang-dd,.lang-switch.open .lang-dd{opacity:1;visibility:visible}
html.nav-lock .lang-switch:hover .lang-dd{opacity:0;visibility:hidden} /* 与导航一致的防误触 */
.lang-switch.open .lang-dd{opacity:1;visibility:visible}               /* 点击展开不受 nav-lock 限制 */
.lang-dd a{display:block;padding:9px 16px;font-size:13.5px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:color .12s,background .12s}
.lang-dd a:hover{color:var(--red);background:var(--red-light)}
.lang-dd a.on{color:var(--red);font-weight:600}

/* ---------- 移动端导航：汉堡菜单（全站，nav.js 控制开关） ---------- */
.nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px 4px;flex-shrink:0}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){
  .nav{position:relative}
  .nav-burger{display:flex}
  .lang-switch{margin-left:auto;margin-right:10px}
  .lang-current{padding:5px 9px;font-size:12px}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;border-top:1px solid var(--line);box-shadow:0 18px 44px rgba(31,33,36,.1);padding:6px 24px 22px;gap:0;z-index:150;align-items:stretch;max-height:calc(100vh - 72px);overflow-y:auto;margin:0}
  .nav.open ul>li{width:100%}
  .nav.open ul>li>a{display:block;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  .nav.open ul>li>a.cta{display:block;text-align:center;padding:12px 20px;margin-top:16px;border-bottom:none;border-radius:6px}
  /* 一级带下拉项：右侧 +/− 指示，点击展开而不跳转（nav.js 处理） */
  .nav.open ul>li.has-drop>a{font-weight:600;position:relative;padding-right:26px}
  .nav.open ul>li.has-drop>a::after{content:"+";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--red);font-size:19px;font-weight:400;line-height:1}
  .nav.open ul>li.has-drop.expanded>a::after{content:"\2212"}
  /* 子菜单：默认折叠；必须清掉桌面端的 transform/left/两列 grid/nowrap，否则内容左移被裁 */
  .nav.open .dd,.nav.open .dd.cols{display:none;position:static;top:auto;left:auto;right:auto;transform:none;
    opacity:1;visibility:visible;box-shadow:none;border:none;border-left:2px solid var(--line);border-radius:0;
    margin:2px 0 10px 12px;padding:2px 0 2px 14px;min-width:0;max-width:none;width:auto;
    max-height:none;overflow:visible;background:none;grid-template-columns:none;transition:none}
  .nav.open .has-drop.expanded>.dd,.nav.open .has-drop.expanded>.dd.cols{display:flex;flex-direction:column}
  .nav.open .dd::before{display:none}
  .nav.open .dd.cols .col{padding:0 0 12px;border:none}
  .nav.open .dd.cols .col:nth-child(odd),.nav.open .dd.cols .col:nth-child(n+3){border:none}
  .nav.open .dd a,.nav.open .dd.cols a{display:block;padding:9px 0;border:none;font-size:13.5px;color:var(--gray);white-space:normal}
  .nav.open .dd a:hover{color:var(--red);padding-left:0}
  .nav.open .dd a::before{display:none}
  .nav.open .dd.cols .col b,.nav.open .dd.cols .col b a{white-space:normal;color:var(--red);font-size:11px}
  .nav.open .dd.cols .col .col-sub,.nav.open .dd.cols .col .col-sub-app{white-space:normal;color:var(--red);padding-left:0}
  .nav.open .dd.cols .col .col-sub2{white-space:normal;color:var(--gray);font-size:10px;padding-left:8px}
}

/* ---------- 超宽屏：容器放宽，充分利用横向空间（>1920px） ---------- */
@media(min-width:1920px){
  .wrap{max-width:1440px}
}

/* ---------- 询盘表单：验证码 / 蜜罐 / 提示 ---------- */
.captcha-field{display:flex;align-items:flex-end;gap:12px}
.captcha-field .field{flex:1;min-width:0}
.captcha-img{width:120px;height:44px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:#f5f6f7;flex:0 0 auto;display:block}
.captcha-img:not([src]),.captcha-img[src=""]{opacity:0} /* 未配置后端时占位不显示破图 */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.form-msg{margin:10px 0 0;font-size:13px;line-height:1.6;min-height:16px}
@media(max-width:560px){.captcha-field{flex-wrap:wrap}.captcha-img{width:104px;height:40px}}

/* ---------- 页脚备案信息（版权一行 + 备案独立一行） ---------- */
.copy,.foot-bottom{text-align:center}
.copy .beian,.foot-bottom .beian{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:6px}
.copy .beian a,.foot-bottom .beian a{color:inherit;text-decoration:none;white-space:nowrap}
.copy .beian a:hover,.foot-bottom .beian a:hover{color:var(--red)}
.copy .beian i.sep,.foot-bottom .beian i.sep{font-style:normal;color:#c9cdd2}