/* ==========================================================================
   深圳市可行科技有限公司 官网  ·  keepgtech.com
   全站样式表  style.css
   ========================================================================== */

:root{
  --navy:#07223B;
  --navy-2:#0B3157;
  --brand:#0E5FA8;
  --brand-2:#1E88E5;
  --brand-3:#5AA9EE;
  --accent:#12A0A6;
  --gold:#F0A500;
  --ink:#12232F;
  --ink-2:#4A5C6E;
  --ink-3:#7C8EA0;
  --line:#E3EAF2;
  --line-2:#D2DEEA;
  --bg:#F5F8FC;
  --white:#FFFFFF;
  --r:14px;
  --r-sm:9px;
  --shadow:0 1px 2px rgba(16,42,67,.04), 0 8px 24px rgba(16,42,67,.06);
  --shadow-lg:0 16px 46px rgba(11,49,87,.14);
  /* 内容容器宽度：随视口生长，到 1560px 封顶。
     原来的固定 1200px 是超宽屏两侧大面积空白的根因；
     1560px 上限是为了守住中文正文行长的可读性（再宽一行就太长，眼睛要来回扫）。 */
  --max:1560px;
  --hz:96px;            /* 锚点滚动补偿（吸顶导航高度 + 余量） */
}

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* 移动端横向溢出兜底：≤980px 时收起的汉堡菜单用 translateX(100%) 移出屏幕，
     若不做兜底，它会把页面 scrollWidth 撑到视口的 2 倍，客户能左右拖出大片空白。
     overflow-x:clip 不会像 hidden 那样把 position:sticky 的吸顶导航变成滚动容器。 */
  overflow-x:clip;
}

body{
  margin:0;
  overflow-x:clip;
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px;
  line-height:1.8;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;display:block;}
a{color:var(--brand);text-decoration:none;transition:color .18s;}
a:hover{color:var(--brand-2);}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0 0 1em;}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.35;letter-spacing:-.01em;}
table{border-collapse:collapse;width:100%;}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px;}
/* 1440px 以下不额外限制（--max 1560 已经大于它们，容器由 padding 自然收边）；
   1440px 以上同样由 max-width 封顶。真正需要额外处理的只有超宽屏下
   「让整页背景/卡片跟着铺开」这件事，见文件末尾的超宽屏断点。 */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================ 顶部信息条 ============================ */
.topbar{
  background:var(--navy);
  color:#B7CCE0;
  font-size:12.5px;
  line-height:1;
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;height:36px;
}
.topbar a{color:#B7CCE0;}
.topbar a:hover{color:#fff;}
.topbar-l,.topbar-r{display:flex;align-items:center;gap:20px;}
.topbar .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:7px;vertical-align:1px;}
.topbar .sep{width:1px;height:12px;background:rgba(255,255,255,.18);}
.lang-switch{display:flex;align-items:center;gap:8px;}
.lang-switch b{color:#fff;font-weight:600;}

/* ============================ 主导航 ============================ */
.site-header{
  position:sticky;top:0;z-index:600;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .22s;
}
.site-header.is-stuck{box-shadow:0 6px 26px rgba(11,49,87,.09);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px;}

.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.brand img{height:40px;width:auto;flex:0 0 auto;}
.brand svg{width:42px;height:42px;flex:0 0 auto;}
.foot-brand .brand img{height:46px;}
.brand-txt{display:flex;flex-direction:column;line-height:1.25;}
.brand-cn{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:.5px;}
.brand-en{font-size:10.5px;letter-spacing:2.2px;color:var(--ink-3);text-transform:uppercase;font-weight:600;}
.brand-sub{font-size:11px;letter-spacing:.6px;color:var(--ink-3);font-weight:600;}
.foot-brand .brand-sub{color:#6E8CA8;}
html[lang="en"] .brand-sub{text-transform:uppercase;letter-spacing:1.8px;}

.nav-menu{display:flex;align-items:center;gap:2px;}
.nav-menu > li{position:relative;}
.nav-menu > li > a{
  display:block;padding:0 15px;line-height:76px;
  font-size:15px;font-weight:600;color:var(--ink);
  position:relative;white-space:nowrap;
}
.nav-menu > li > a::after{
  content:"";position:absolute;left:15px;right:15px;bottom:22px;height:2px;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  transition:transform .22s;
}
.nav-menu > li > a:hover{color:var(--brand);}
.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after{transform:scaleX(1);}
.nav-menu > li.active > a{color:var(--brand);}

.sub{
  position:absolute;top:100%;left:8px;min-width:216px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.nav-menu > li:hover .sub{opacity:1;visibility:visible;transform:translateY(0);}
.sub a{display:block;padding:9px 13px;border-radius:8px;font-size:14px;color:var(--ink-2);}
.sub a:hover{background:var(--bg);color:var(--brand);}

.nav-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.menu-cta{display:none;}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center;}
.burger span{display:block;width:18px;height:2px;background:var(--navy);position:relative;transition:.2s;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--navy);transition:.2s;}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger.on span{background:transparent;}
.burger.on span::before{top:0;transform:rotate(45deg);}
.burger.on span::after{top:0;transform:rotate(-45deg);}

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:10px;
  font-size:14.5px;font-weight:600;letter-spacing:.2px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s;
  white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 6px 18px rgba(14,95,168,.26);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(14,95,168,.34);}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink);}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);}
.btn-light{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);color:#fff;}
.btn-light:hover{background:rgba(255,255,255,.2);color:#fff;}
.btn-white{background:#fff;color:var(--brand);}
.btn-white:hover{color:var(--brand-2);transform:translateY(-2px);}
.btn-sm{height:38px;padding:0 17px;font-size:13.5px;}
.btn .ar{transition:transform .2s;}
.btn:hover .ar{transform:translateX(3px);}

/* ============================ 首页 Hero ============================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 78% -10%, rgba(30,136,229,.42), transparent 62%),
    radial-gradient(760px 420px at 8% 104%, rgba(18,160,166,.30), transparent 60%),
    linear-gradient(160deg,#06203A 0%,#0A2C4E 46%,#0E4372 100%);
  color:#fff;
  padding:84px 0 132px;
}
.hero .circuit{position:absolute;inset:0;opacity:.30;pointer-events:none;}
.hero .glow{position:absolute;width:520px;height:520px;right:-120px;top:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(90,169,238,.34),transparent 66%);pointer-events:none;}
.hero .wrap{position:relative;z-index:2;}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;letter-spacing:2.6px;text-transform:uppercase;font-weight:700;
  color:var(--brand-3);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);}
.eyebrow.on-dark{color:#8FC7F5;}

.hero h1{
  font-size:46px;line-height:1.24;letter-spacing:-.5px;margin:20px 0 0;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,#7FD3F5,#5AA9EE 55%,#B9E4FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{
  margin-top:22px;font-size:16.5px;line-height:1.95;color:#C3D8EA;max-width:560px;
}
.hero .lead strong{color:#fff;font-weight:600;}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
.hero-pts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;font-size:13.5px;color:#A9C4DA;}
.hero-pts span{display:inline-flex;align-items:center;gap:8px;}
.hero-pts span::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);flex:0 0 auto;}

/* Hero 右侧能力卡 */
.hero-card{
  background:linear-gradient(158deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.20);
  border-radius:20px;padding:26px 26px 22px;
  backdrop-filter:blur(14px);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.hero-card h3{font-size:14px;letter-spacing:1.6px;color:#9CC5E8;text-transform:uppercase;font-weight:700;margin-bottom:16px;}
.hero-lines{display:flex;flex-direction:column;gap:9px;}
.hero-lines a{
  display:flex;align-items:center;gap:13px;
  padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  color:#EAF3FB;font-size:14px;font-weight:600;
  transition:.2s;
}
.hero-lines a:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff;transform:translateX(4px);}
.hero-lines .ico{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:rgba(18,160,166,.26);color:#8FE3E6;
}
.hero-lines .ico svg{width:18px;height:18px;}
.hero-lines .go{margin-left:auto;color:#7FA9CB;font-size:16px;}
.hero-card-foot{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:#9CC5E8;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

/* 数字条 */
.stats{
  position:relative;z-index:5;margin-top:-64px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 48px rgba(11,49,87,.10);
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:26px 10px;
}
.stat{text-align:center;padding:6px 14px;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat .n{font-size:34px;font-weight:800;color:var(--brand);line-height:1.1;letter-spacing:-1px;}
.stat .n small{font-size:15px;font-weight:700;margin-left:2px;}
.stat .l{font-size:13px;color:var(--ink-2);margin-top:6px;}

/* ============================ 通用区块 ============================ */
.section{padding:86px 0;}
.section.tight{padding:64px 0;}
.section.alt{background:var(--bg);}
.section.dark{background:linear-gradient(160deg,#07223B,#0B3157);color:#fff;}
.section.dark .sec-desc{color:#A9C4DA;}

.sec-head{max-width:760px;margin:0 auto 46px;text-align:center;}
.sec-head.left{text-align:left;margin-left:0;}
.sec-head h2{font-size:34px;letter-spacing:-.4px;margin:14px 0 0;color:var(--navy);}
.section.dark .sec-head h2{color:#fff;}
.sec-desc{margin-top:14px;font-size:15.5px;color:var(--ink-2);line-height:1.9;}
/* 正文行长封顶：容器放宽后，长段落若不设限会拉到 700px+ 一行，
   中文一行超过 40 字就明显难读。这里统一按 40em（约 620px）收住。 */
.card > p,.sol-body > p,.with-side p{max-width:42em;}
.sec-head.center .eyebrow{justify-content:center;}
.sec-more{text-align:center;margin-top:44px;}

.rule{width:52px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--brand),var(--accent));margin:18px auto 0;}
.sec-head.left .rule{margin-left:0;}

/* 网格 */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

/* 卡片 */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;position:relative;overflow:hidden;
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#C6DCF2;}
.card .ico-box{
  width:52px;height:52px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  background:linear-gradient(140deg,#E8F2FB,#D6E7F7);color:var(--brand);
}
.card .ico-box svg{width:26px;height:26px;}
.card h3{font-size:17.5px;color:var(--navy);margin-bottom:9px;}
.card p{font-size:14px;color:var(--ink-2);margin-bottom:0;line-height:1.85;}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:13.5px;font-weight:600;}
.card .tagline{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:10px;}

/* 带序号的产品卡 */
.pcard{display:flex;flex-direction:column;}
.pcard .no{
  position:absolute;right:18px;top:12px;
  font-size:52px;font-weight:800;line-height:1;color:#EEF4FA;letter-spacing:-2px;
}
.pcard .chips{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
.pcard .supplier{
  display:inline-block;font-size:12px;font-weight:700;color:var(--brand);
  background:#EAF3FC;border-radius:999px;padding:3px 11px;margin-bottom:12px;
}

/* 标签 */
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  font-size:12.5px;color:var(--brand);background:#EDF4FC;
  border:1px solid #DCEAF8;border-radius:999px;padding:3px 12px;white-space:nowrap;
}
.chip.grey{color:var(--ink-2);background:#F4F7FA;border-color:var(--line);}

/* 分割统计 / 数据条 */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);}
.metric{background:#fff;padding:28px 24px;}
.metric .n{font-size:30px;font-weight:800;color:var(--brand);letter-spacing:-1px;}
.metric .l{font-size:13.5px;color:var(--ink-2);margin-top:4px;}

/* ============================ 品牌卡 ============================ */
.brand-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:30px;margin-bottom:18px;
  display:grid;grid-template-columns:236px 1fr;gap:32px;
  transition:box-shadow .22s,border-color .22s;
}
.brand-card:hover{box-shadow:var(--shadow-lg);border-color:#C6DCF2;}
.bc-aside{border-right:1px dashed var(--line-2);padding-right:30px;}
.bc-logo{
  width:100%;height:64px;border-radius:10px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:var(--brand);letter-spacing:.4px;
  border:1px solid var(--line);margin-bottom:14px;text-align:center;padding:6px;
}
.bc-name{font-size:20px;font-weight:800;color:var(--navy);}
.bc-en{font-size:12.5px;color:var(--ink-3);margin:3px 0 12px;letter-spacing:.3px;}
.bc-cat{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:600;border-radius:6px;padding:3px 11px;}
.bc-hq{font-size:12.5px;color:var(--ink-3);margin-top:12px;line-height:1.7;}
.bc-body h4{font-size:16px;color:var(--brand);margin-bottom:10px;}
.bc-body p{font-size:14px;color:var(--ink-2);text-align:justify;line-height:1.9;}
.bc-specs{display:flex;flex-wrap:wrap;gap:22px;margin:18px 0;}
.bc-specs div{font-size:13px;color:var(--ink-2);}
.bc-specs b{display:block;font-size:17px;color:var(--navy);font-weight:800;}

/* ============================ 表格 ============================ */
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;overflow-x:auto;}
table.tbl{font-size:14px;min-width:760px;}
table.tbl thead th{
  background:linear-gradient(135deg,var(--navy),var(--brand));
  color:#fff;text-align:left;padding:15px 18px;font-weight:600;
  font-size:13.5px;letter-spacing:.4px;white-space:nowrap;
}
table.tbl tbody td{padding:15px 18px;border-top:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.8;}
table.tbl tbody td:first-child{font-weight:700;color:var(--navy);white-space:nowrap;}
table.tbl tbody tr:nth-child(even){background:#FAFCFE;}
table.tbl tbody tr:hover{background:#F2F8FD;}

/* ============================ 应用领域大卡 ============================ */
.app-card{
  border-radius:18px;padding:34px 32px;color:#fff;position:relative;overflow:hidden;
  min-height:300px;display:flex;flex-direction:column;
}
.app-card::after{
  content:"";position:absolute;right:-70px;bottom:-90px;width:260px;height:260px;
  border-radius:50%;background:rgba(255,255,255,.10);
}
.app-card.a1{background:linear-gradient(150deg,#0B3157,#1E88E5);}
.app-card.a2{background:linear-gradient(150deg,#0A5F5C,#12A0A6);}
.app-card.a3{background:linear-gradient(150deg,#0A3A66,#4E7FB5);}
.app-card h3{font-size:22px;letter-spacing:.5px;margin-bottom:6px;position:relative;z-index:2;}
.app-card .sub{font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;opacity:.72;margin-bottom:20px;position:relative;z-index:2;}
.app-card ul{position:relative;z-index:2;font-size:13.8px;}
.app-card li{padding:5px 0 5px 17px;position:relative;opacity:.94;}
.app-card li::before{content:"›";position:absolute;left:2px;font-weight:800;}

/* ============================ 方案条 ============================ */
.sol{
  display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:start;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--r);padding:26px 30px;
}
.sol + .sol{margin-top:16px;}
.sol-t{font-size:17px;font-weight:800;color:var(--navy);}
.sol-s{font-size:12.5px;color:var(--ink-3);margin-top:5px;letter-spacing:.4px;}
.sol-body p{font-size:14px;color:var(--ink-2);margin-bottom:12px;}

/* ============================ 新闻 ============================ */
.news-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.news-tabs button{
  height:40px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);
  background:#fff;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;
  font-family:inherit;transition:.18s;
}
.news-tabs button:hover{border-color:var(--brand);color:var(--brand);}
.news-tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff;}

.news-item{
  display:grid;grid-template-columns:104px 1fr;gap:22px;
  padding:22px 0;border-bottom:1px dashed var(--line-2);
}
.news-item:last-child{border-bottom:none;}
.news-date{
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:10px 8px;text-align:center;
}
.news-date b{display:block;font-size:22px;font-weight:800;color:var(--brand);line-height:1.15;}
.news-date span{font-size:11.5px;color:var(--ink-3);}
.news-item h4{font-size:16px;color:var(--navy);margin-bottom:7px;font-weight:600;}
.news-item h4 a{color:inherit;}
.news-item h4 a:hover{color:var(--brand);}
.news-item p{font-size:13.8px;color:var(--ink-2);margin-bottom:0;}
.news-cat{font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.6px;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.news-col{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 10px;}
.news-col > h3{font-size:15px;color:var(--navy);padding-bottom:14px;border-bottom:2px solid var(--brand);display:inline-block;margin-bottom:6px;}
.news-col .news-item{grid-template-columns:1fr;gap:8px;padding:16px 0;}
.news-col .news-item .d{font-size:12.5px;color:var(--ink-3);}
.news-col .news-item h4{font-size:14.5px;margin-bottom:0;line-height:1.65;}

/* ============================ CTA 区 ============================ */
.cta{
  position:relative;overflow:hidden;border-radius:20px;
  background:linear-gradient(135deg,#07223B,#0E5FA8 62%,#1E88E5);
  color:#fff;padding:52px 56px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.cta::after{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,160,166,.42),transparent 68%);
}
.cta h2{font-size:29px;letter-spacing:-.3px;position:relative;z-index:2;}
.cta p{margin:12px 0 0;font-size:15px;color:#C3D8EA;position:relative;z-index:2;max-width:640px;}
.cta .acts{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:2;}

/* ============================ 页面头部（内页） ============================ */
.pagehead{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(140deg,#06203A,#0B3157 55%,#0E4372);
  padding:60px 0 56px;
}
.pagehead .circuit{position:absolute;inset:0;opacity:.24;pointer-events:none;}
.pagehead .wrap{position:relative;z-index:2;}
.pagehead h1{font-size:34px;letter-spacing:-.4px;margin:14px 0 0;}
.pagehead .en{font-size:12.5px;letter-spacing:3px;text-transform:uppercase;color:#8FC7F5;font-weight:700;}
.pagehead p{margin:14px 0 0;font-size:15px;color:#A9C4DA;max-width:760px;line-height:1.9;}

.crumb{font-size:12.5px;color:#7FA9CB;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.crumb a{color:#9CC5E8;}
.crumb span.s{opacity:.5;}

/* 内页侧栏导航 */
.with-side{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:start;}
.with-side > *{min-width:0;}   /* grid 子项默认 min-width:auto，内部长内容会撑破轨道
                                   并把整页顶出屏幕（移动端 products页侧栏曾宽 762px）*/
.side{position:sticky;top:92px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.side > .side-t{background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff;padding:16px 20px;font-size:15px;font-weight:700;letter-spacing:.4px;}
.side a{display:block;padding:13px 20px;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line);border-left:3px solid transparent;}
.side a:last-child{border-bottom:none;}
.side a:hover{background:var(--bg);color:var(--brand);}
.side a.on{color:var(--brand);font-weight:700;background:#F2F8FD;border-left-color:var(--brand);}
.side .side-cta{padding:18px 20px;background:var(--bg);}
.side .side-cta p{font-size:12.8px;color:var(--ink-2);margin-bottom:12px;}

/* ============================ 表单 ============================ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13.5px;font-weight:600;color:var(--ink);}
.field label i{color:#D64545;font-style:normal;margin-left:3px;}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14px;color:var(--ink);
  border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;
  background:#fff;transition:border-color .18s,box-shadow .18s;width:100%;
}
.field textarea{min-height:126px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,95,168,.12);
}
.form-note{font-size:12.5px;color:var(--ink-3);margin-top:14px;}
.form-msg{
  display:none;margin-top:18px;padding:14px 18px;border-radius:10px;font-size:14px;
  background:#EAF7F1;border:1px solid #BFE6D5;color:#0F6B47;
}
.form-msg.on{display:block;}

/* ============================ 联系方式卡 ============================ */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px;display:flex;gap:18px;}
.cc .ico-box{
  width:48px;height:48px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#E8F2FB,#D6E7F7);color:var(--brand);
}
.cc .ico-box svg{width:22px;height:22px;}
.cc h4{font-size:15px;color:var(--navy);margin-bottom:7px;}
.cc p{font-size:14px;color:var(--ink-2);margin-bottom:2px;line-height:1.8;word-break:break-all;}
.cc .ph{color:var(--gold);font-weight:600;}

/* ---------- 地图与到访指引 ---------- */
.map-panel{
  display:grid;grid-template-columns:1fr 1.12fr;
  border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff;
}
.map-panel.solo{grid-template-columns:1fr;}
.map-info{padding:34px 36px;}
.map-info h4{color:var(--navy);font-size:19px;margin-bottom:12px;}
.map-info .addr{color:var(--ink-2);font-size:15px;line-height:1.9;}
.map-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.map-acts button.btn{font-family:inherit;font-size:14.5px;}
.map-acts button.btn.done{border-color:var(--brand);color:var(--brand);background:var(--bg);}
.map-coord{margin-top:20px;font-size:12.5px;color:var(--ink-3);letter-spacing:.3px;}
.map-canvas{min-height:340px;background:var(--bg);border-left:1px solid var(--line-2);}
.map-canvas.ready{background:#fff;}
@media (max-width:860px){
  .map-panel{grid-template-columns:1fr;}
  .map-info{padding:26px 22px;}
  .map-canvas{min-height:260px;border-left:0;border-top:1px solid var(--line-2);}
}

/* ============================ 页脚 ============================ */
.site-footer{background:var(--navy);color:#93AEC6;font-size:13.5px;padding:64px 0 0;}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:40px;padding-bottom:46px;}
.foot-brand .brand-cn{color:#fff;}
.foot-brand .brand-en{color:#6E8CA8;}
.foot-brand p{margin-top:18px;line-height:1.9;font-size:13px;max-width:330px;}
.foot h4{color:#fff;font-size:14.5px;letter-spacing:.6px;margin-bottom:18px;font-weight:700;}
.foot li{margin-bottom:11px;}
.foot a{color:#93AEC6;}
.foot a:hover{color:#fff;}
.foot-contact li{display:flex;gap:10px;line-height:1.75;margin-bottom:14px;}
.foot-contact b{color:#fff;font-weight:600;flex:0 0 auto;}
.foot-bar{
  border-top:1px solid rgba(255,255,255,.10);padding:20px 0;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:#6E8CA8;
}
.foot-bar a{color:#93AEC6;}

/* 回到顶部 */
.totop{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:12px;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(14,95,168,.34);cursor:pointer;border:none;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.24s;z-index:500;
}
.totop.on{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--brand-2);}

/* 滚动进场 */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* 锚点定位补偿 */
[id]{scroll-margin-top:var(--hz);}

/* ============================ 响应式 ============================ */
@media (max-width:1100px){
  .hero h1{font-size:38px;}
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-card{max-width:620px;}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px;}
  .nav-menu > li > a{padding:0 11px;font-size:14.5px;}
  .brand-en{display:none;}
  .brand-sub{display:none;}
}
@media (max-width:980px){
  :root{--hz:86px;}
  .topbar{display:none;}
  .nav{height:66px;}
  .nav-menu > li.menu-cta{display:block;}
  .nav-menu > li.menu-cta > a{
    display:flex;align-items:center;justify-content:center;
    height:46px;padding:0 18px;line-height:1;border-bottom:none;margin-top:16px;
  }
  .nav-menu{
    position:fixed;left:0;right:0;top:66px;bottom:0;
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:10px 16px 40px;overflow-y:auto;
    transform:translateX(100%);transition:transform .26s ease,visibility 0s linear .26s;
    border-top:1px solid var(--line);
    /* 收起态彻底移出布局：配合 html/body 的 overflow-x:clip 双保险。
       部分浏览器（iOS Safari）以 body 为滚动容器，只靠 clip 不够，
       这里 visibility:hidden 让它不再撑大 body.scrollWidth。 */
    visibility:hidden;
  }
  .nav-menu.on{transform:none;visibility:visible;}
  .nav-menu > li > a{line-height:48px;padding:0 6px;border-bottom:1px solid var(--line);}
  .nav-menu > li > a::after{display:none;}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 12px;}
  .burger{display:flex;}
  .nav-cta .btn{display:none;}
  .g3,.g4,.g2,.metrics,.contact-grid,.news-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;margin-top:-46px;}
  .stat{border-right:none;border-bottom:1px solid var(--line);}
  .stat:nth-child(odd){border-right:1px solid var(--line);}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none;}
  .brand-card{grid-template-columns:1fr;gap:20px;}
  .bc-aside{border-right:none;border-bottom:1px dashed var(--line-2);padding:0 0 20px;}
  .with-side{grid-template-columns:1fr;gap:26px;}
  .side{position:static;}
  .sol{grid-template-columns:1fr;gap:14px;}
  .cta{padding:38px 28px;}
  .form-grid{grid-template-columns:1fr;}
  .section{padding:60px 0;}
  .sec-head h2{font-size:27px;}
  .hero{padding:56px 0 100px;}
  .hero h1{font-size:31px;}
  .pagehead h1{font-size:26px;}
  .foot-grid{grid-template-columns:1fr;gap:30px;}
  .news-item{grid-template-columns:76px 1fr;gap:16px;}
  .topbar-l .hide-sm{display:none;}
}
@media (max-width:520px){
  .wrap{padding:0 18px;}
  .hero h1{font-size:26px;}
  .stat .n{font-size:27px;}
  .news-item{grid-template-columns:1fr;}
  .brand img{height:34px;}
  .brand-cn{font-size:17px;}
  .foot-brand .brand img{height:40px;}
}

/* ============================ PCB 电路纹理 ============================ */
.hero .circuit,
.pagehead .circuit{
  background-repeat:repeat;
  background-size:360px 360px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M0 40H120V120H240V40H360'/%3E%3Cpath d='M0 200H80V280H200'/%3E%3Cpath d='M360 168H280V248H120'/%3E%3Cpath d='M60 0V80'/%3E%3Cpath d='M300 360V300H360'/%3E%3C/g%3E%3Cg fill='%23FFFFFF' opacity='.7'%3E%3Ccircle cx='120' cy='120' r='3.2'/%3E%3Ccircle cx='240' cy='40' r='3.2'/%3E%3Ccircle cx='80' cy='280' r='3.2'/%3E%3Ccircle cx='280' cy='168' r='3.2'/%3E%3Ccircle cx='60' cy='80' r='3.2'/%3E%3Ccircle cx='200' cy='280' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
}
.pagehead .circuit{opacity:.22;}

/* 勾选列表 */
.ticklist li{position:relative;padding:6px 0 6px 24px;line-height:1.75;}
.ticklist li::before{
  content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
}

/* 询价表单兜底入口：表单走 mailto，手机端无邮件客户端时提供三条不依赖客户端的路径 */
.form-alt{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line-2);}
.form-alt-t{font-size:13px;color:var(--ink-3);margin-bottom:12px;}
.form-alt-btns{display:flex;gap:10px;flex-wrap:wrap;}
.form-alt-btns .btn-sm{height:38px;padding:0 16px;font-size:13.5px;}
/* 锚点跳转目标：吸顶导航会遮住目标卡片顶部，用 scroll-margin-top 避让 */
#wechat-qr{scroll-margin-top:120px;}

/* ============================ 产品中心：新品标记 ============================ */
.tag-new{
  display:inline-block;margin-left:6px;padding:1px 5px;border-radius:4px;
  background:var(--gold);color:#5A3B00;font-size:9.5px;font-style:normal;
  font-weight:800;letter-spacing:.6px;vertical-align:1px;
}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.85;margin-top:14px;}
.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;letter-spacing:.3px;}

/* ============================ MLCC 专区：原厂背景 ============================ */
.mlcc-maker{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 36px;box-shadow:var(--shadow);}
.mm-brand{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px dashed var(--line-2);
}
.mm-brand img{height:38px;width:auto;display:block;}
.mm-brand .mm-badge{height:32px;opacity:.7;}
.mlcc-maker p{font-size:14.5px;color:var(--ink-2);line-height:1.95;}
.mlcc-maker p + p{margin-top:12px;}
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:26px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
}
.fact{background:#F8FBFE;padding:18px 18px 16px;}
.fact .n{font-size:26px;font-weight:800;color:var(--brand);line-height:1.1;letter-spacing:-.5px;}
.fact .l{font-size:12.5px;color:var(--ink-3);margin-top:7px;line-height:1.6;}

/* ============================ MLCC 专区：三档产品 ============================ */
.grade-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  transition:box-shadow .22s,border-color .22s,transform .22s;
}
.grade-card:hover{box-shadow:var(--shadow-lg);border-color:#C6DCF2;transform:translateY(-2px);}
.gc-en{font-size:10.5px;letter-spacing:2px;font-weight:800;color:var(--brand-3);text-transform:uppercase;}
.grade-card h3{font-size:18px;margin:8px 0 10px;color:var(--navy);}
.grade-card p{font-size:13.5px;color:var(--ink-2);line-height:1.85;}
.gc-list{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);}
.gc-list li{position:relative;padding-left:15px;font-size:13px;color:var(--ink-2);line-height:1.8;margin-bottom:7px;}
.gc-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:1.5px;background:var(--accent);}

.callout{margin-top:24px;padding:20px 24px;border-radius:var(--r-sm);background:#EAF3FB;border-left:4px solid var(--brand);}
.callout b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:6px;}
.callout p{font-size:13.5px;color:var(--ink-2);line-height:1.85;}

/* ============================ MLCC 专区：型号解码器 ============================ */
.mlcc-dec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);}
.mdc-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.mdc-row label{font-size:13px;font-weight:600;color:var(--ink-2);flex:0 0 auto;}
.mdc-row input{
  flex:1 1 260px;min-width:0;height:46px;padding:0 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--line-2);background:#FAFCFE;color:var(--navy);
  font-size:17px;font-weight:700;letter-spacing:2.4px;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  transition:border-color .18s,box-shadow .18s;
}
.mdc-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,95,168,.12);}
.mdc-row input.bad{border-color:#C0392B;background:#FDF4F3;}
.mdc-msg{font-size:12.5px;margin-top:11px;color:var(--ink-3);}
.mdc-msg.err{color:#A93226;}
.mdc-msg.ok{color:#1B7A4B;}

.mdc-strip{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px;}
.mdc-chip{position:relative;min-width:46px;padding:10px 9px 19px;border-radius:9px;text-align:center;border:1px solid transparent;}
.mdc-chip b{font-size:19px;font-weight:800;letter-spacing:1px;display:block;line-height:1.1;}
.mdc-chip i{position:absolute;left:0;right:0;bottom:5px;font-size:10px;font-style:normal;opacity:.6;}
.mdc-chip.g1{background:#E8F2FB;border-color:#C6DCF2;color:#0B3157;}
.mdc-chip.g2{background:#E6F6F6;border-color:#BEE6E7;color:#0A5F5C;}
.mdc-chip.g3{background:#FFF4E0;border-color:#F6DCA8;color:#7A5200;}
.mdc-chip.g4{background:#EEF1F5;border-color:#DCE3EB;color:#3C4C5C;}
.mdc-chip.g5{background:#FDECEC;border-color:#F5C9C9;color:#A31F1F;}

.mdc-unknown{font-style:normal;color:#A93226;}
.mdc-note{font-size:12px;color:var(--ink-3);line-height:1.8;margin-top:16px;}

/* ============================ MLCC 专区：代码速查表 ============================ */
.code-tables{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;align-items:start;}
.code-block{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 20px 6px;}
.code-block.wide{grid-column:1 / -1;}
.code-block h3{font-size:14px;color:var(--navy);margin-bottom:14px;padding-bottom:11px;border-bottom:1px dashed var(--line-2);}
.code-block .tbl{min-width:0;font-size:13px;}
.code-block .tbl thead th{padding:11px 13px;font-size:12px;}
.code-block .tbl td{padding:9px 13px;}

@media (max-width:1100px){
  .facts{grid-template-columns:1fr 1fr;}
  .code-tables{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .mlcc-maker{padding:24px 20px;}
  .mlcc-dec{padding:20px 16px;}
  .fact .n{font-size:22px;}
  .mdc-chip{min-width:38px;padding:8px 6px 17px;}
  .mdc-chip b{font-size:16px;}
  .mdc-row input{font-size:15px;letter-spacing:1.6px;}
}


/* ---------- 企业微信二维码 ---------- */
.foot-qr{display:block;width:88px;height:88px;margin-top:10px;padding:5px;background:#fff;border-radius:8px;box-sizing:content-box}
.qr-card{display:block;width:140px;height:140px;padding:7px;background:#fff;border-radius:12px;box-sizing:content-box;box-shadow:0 2px 12px rgba(14,95,168,.12)}
@media (max-width:560px){.qr-card{width:120px;height:120px}}

/* ============================================================================
   超宽屏适配（≥1440px）
   ---------------------------------------------------------------------------
   为什么单独加这一段：原表只有 max-width 查询（1200px 以下才生效），
   ≥1440px 的桌面/大屏没有任何规则，容器被 --max 卡死，于是内容挤在
   正中间、两侧大片空白。这里按视口逐级放开，并做两件事：
     ① 容器变宽；
     ② 正文与栅格加宽的同时，同步放大字号与留白，
        否则会出现「大容器 + 小字」的廉价感（大屏上 15px 正文明显偏小）。
   ========================================================================== */
@media (min-width:1440px){
  :root{--hz:104px;}
  /* 大屏上 15px 正文字号偏小，整体上调一档 */
  body{font-size:16px;}
  .topbar{font-size:13px;line-height:1.1;}
  .topbar .wrap{height:40px;}
  .nav{height:78px;}
  .hero{padding:104px 0 150px;}
  .hero h1{font-size:52px;}
  .hero .lead{font-size:17.5px;max-width:640px;}
  .section{padding:100px 0;}
  .section.tight{padding:76px 0;}
  .sec-head h2{font-size:38px;}
  .sec-desc{font-size:16.5px;}
  .pagehead{padding:96px 0 82px;}
  .pagehead h1{font-size:40px;}
  .stats{padding:32px 14px;}
  .stat .n{font-size:40px;}
  .stat .l{font-size:14px;}
  .foot-grid{gap:52px;}
  .site-footer{padding-top:76px;}
  .foot-brand p{font-size:14px;max-width:400px;}
  .foot h4{font-size:15.5px;}
  .foot li{font-size:14.5px;}
  .foot-bar{font-size:13.5px;}
  .foot-contact li{font-size:14.5px;margin-bottom:16px;}
  .grid{gap:26px;}
  .card h3{font-size:19px;}
  .form-grid{gap:18px;}
  .cta{padding:56px 44px;}
  /* 带左侧栏的页面（关于 / 产品中心）：容器变宽后，250px 的固定侧栏
     会显得又窄又长，与右侧加宽后的正文不成比例。这里同步加宽并加大间距。 */
  .with-side{grid-template-columns:290px 1fr;gap:56px;}
  /* 选择器必须与基础定义保持同等特异性，否则会被上面的规则静默覆盖：
     基础是 `.side > .side-t`（0,2,0）和 `.side .side-cta p`（0,2,1），
     这里若只写 `.side-t` / `.side-cta p`，特异性更低 → 写了不生效。 */
  .side > .side-t{font-size:16px;padding:17px 24px;}
  .side a{padding:14px 24px;font-size:15px;}
  .side .side-cta{padding:22px 24px;}
  .side .side-cta p{font-size:13.5px;}
}

/* 超宽屏（≥1900px，如 2K 显示器）：再放宽一档并加大留白，
   避免 1920/2560 宽屏上又回到「内容挤在中间」的老问题。 */
@media (min-width:1900px){
  /* 2K 屏再放宽一档。正文行长已由 .card > p 的 max-width 单独封顶，
     所以加宽容器不会让文字一行过长，只会让卡片和留白更舒展。 */
  :root{--max:1720px;}
  .wrap{padding:0 40px;}
  .hero h1{font-size:58px;}
  .hero .lead{font-size:18.5px;max-width:700px;}
  .hero-grid{gap:72px;}
  .hero-card{padding:32px 32px 26px;}
  .section{padding:118px 0;}
  .sec-head h2{font-size:42px;}
  .sec-head{max-width:860px;}
  .pagehead h1{font-size:44px;}
  .stat .n{font-size:46px;}
  .grid{gap:30px;}
  .foot-grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:64px;}
}

/* 超宽屏（≥2500px，2K 3360px 一类）：继续放宽并加大横向留白。
   正文行长已被 .card > p 等的 max-width 单独封顶，
   所以这里只放大容器与卡片，正文一行仍是 40 字上下，不会被拉长。 */
@media (min-width:2500px){
  :root{--max:1960px;}
  .wrap{padding:0 80px;}
  .hero h1{font-size:64px;}
  .hero .lead{max-width:760px;font-size:19.5px;}
  .section{padding:132px 0;}
  .sec-head h2{font-size:46px;}
  .sec-head{max-width:920px;}
  .pagehead h1{font-size:48px;}
  .stat .n{font-size:52px;}
  .foot-grid{gap:80px;}
  .with-side{grid-template-columns:330px 1fr;gap:72px;}
}

/* 4K（≥3200px）：最后一档。容器封顶 2320px（占 3840 的 60%），
   再宽就没有必要了——继续拉大只会让卡片之间的空白比卡片本身还宽。 */
@media (min-width:3200px){
  :root{--max:2320px;}
  .wrap{padding:0 96px;}
  .hero h1{font-size:72px;}
  .section{padding:150px 0;}
  .sec-head h2{font-size:52px;}
  .pagehead h1{font-size:54px;}
  .stat .n{font-size:60px;}
  .foot-grid{gap:100px;}
}