/* KUOXUAN · Self-adhesive & Functional Label Materials
   KUOXUAN sub-brand of FOB RENT — v1 prototype
   Performance-first: system fonts, no webfont, CSS-only interactions where possible */

:root{
  --ink:#0E1B2A;
  --ink-2:#16293D;
  --navy:#0B3B6F;
  --blue:#1264C4;
  --blue-soft:#E8F1FB;
  --amber:#F2A21C;
  --amber-dark:#C97F05;
  --paper:#FFFFFF;
  --mist:#F5F7FA;
  --line:#E3E8EF;
  --line-2:#D3DAE4;
  --text:#1B2733;
  --muted:#5C6B7A;
  --ok:#1E8E5A;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(16,35,63,.06),0 8px 24px rgba(16,35,63,.06);
  --shadow-lg:0 4px 12px rgba(16,35,63,.08),0 24px 60px rgba(16,35,63,.12);
  --max:1240px;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--paper);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.25rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:.7em;display:block
}
.eyebrow.light{color:var(--amber)}
.lead{font-size:1.08rem;color:var(--muted);max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:.95rem;
  background:var(--blue);color:#fff;border:1px solid transparent;cursor:pointer;
  transition:.18s ease;white-space:nowrap
}
.btn:hover{background:#0E55A8;transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.amber{background:var(--amber);color:#3A2600}
.btn.amber:hover{background:#E2930F}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.outline{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn.outline:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.btn.sm{padding:9px 18px;font-size:.86rem}

/* ---------- Header ---------- */
.topbar{
  background:var(--ink);color:rgba(255,255,255,.72);font-size:.8rem;
  padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08)
}
.topbar .wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.topbar a{color:rgba(255,255,255,.86)}
.topbar a:hover{color:var(--amber)}
.topbar .r{display:flex;gap:16px;flex-wrap:wrap}
/* 联系方式图标 */
.tbitem{display:inline-flex;align-items:center;gap:6px;line-height:1}
.ico{width:15px;height:15px;flex:0 0 auto;display:inline-block;vertical-align:-3px}
.ico.ph,.ico.em{color:var(--amber)}
.ico.wa{color:#25D366}
.ico.ink{color:var(--blue)}
.topbar .ico,.topbar .ico.wa{opacity:.95}
.floating .ico{width:22px;height:22px;color:#fff;vertical-align:middle}
.kvrow{display:flex;align-items:center;gap:7px;margin-bottom:4px}
.kvrow:last-child{margin:0}

header.site{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line)
  /* 注意：不要给 header 加 backdrop-filter / transform / contain 等会
     "创建包含块"的属性 —— 否则 header 内的 position:fixed 元素（如手机端
     语言下拉面板）会相对 header 而非视口定位，直接飞出屏幕。 */
}
.nav{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .logo{
  font-weight:800;font-size:1.32rem;letter-spacing:-.02em;color:var(--ink);line-height:1
}
.brand .logo span{color:var(--blue)}
.brand .sub{
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line-2);padding-left:12px;line-height:1.25
}
.navlinks{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:nowrap}
.navlinks a{
  padding:9px 13px;border-radius:8px;font-size:.92rem;font-weight:500;color:var(--ink);
  transition:.15s;white-space:nowrap
}
.navlinks a:hover{background:var(--mist);color:var(--blue)}
.navlinks a.active{color:var(--blue);background:var(--blue-soft);font-weight:600}
.has-mega{position:relative}
.mega{
  position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px;
  display:none;grid-template-columns:repeat(2,minmax(210px,1fr));gap:6px;min-width:520px;z-index:70
}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}
.mega a{
  padding:10px 12px;border-radius:8px;font-size:.9rem;display:flex;flex-direction:column
}
.mega a small{color:var(--muted);font-size:.76rem;font-weight:400}
.mega a:hover{background:var(--blue-soft)}
.mega .mega-note{
  grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:12px;
  font-size:.8rem;color:var(--muted)
}
.nav-cta{display:flex;gap:8px;align-items:center;margin-left:8px}
.langsel{display:flex;align-items:center;gap:9px;position:relative;flex:0 0 auto;max-width:100%}
.langlabel{font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.langdd{position:relative}
.langbtn{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;max-width:100%;
  border:1px solid var(--line-2);background:#fff;cursor:pointer;font:inherit;font-size:.85rem;
  color:var(--ink);transition:.16s;white-space:nowrap
}
.langbtn:hover{border-color:var(--blue);color:var(--blue)}
.langcur{display:inline-flex;align-items:center;gap:7px}
.langbtn .car{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;margin-left:1px;transition:.16s}
.langdd.open .langbtn .car{transform:rotate(180deg)}
.langlist{
  position:absolute;top:calc(100% + 7px);right:0;min-width:205px;max-height:330px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:6px;display:none;z-index:200
}
.langdd.open .langlist{display:block}
.langlist button{
  display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:none;
  background:none;border-radius:8px;cursor:pointer;font:inherit;font-size:.88rem;color:var(--text);
  text-align:left;transition:.14s
}
.langlist button:hover{background:var(--mist)}
.langlist button.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.burger{display:none;border:1px solid var(--line-2);background:#fff;border-radius:8px;
  width:40px;height:36px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
/* ---- Hero 三帧轮动（V61）------------------------------------------------
   原来 <img> 自带 opacity:.40 当"遮罩"用，一旦要叠第二张图就不成立了：
   两张半透明的图叠加会互相提亮（0.4 + 0.4 → 0.64），切换瞬间闪一下。
   现在改成图片满不透明、由 ::after 渐变统一压暗，肉眼效果与旧版一致
   （0.976/0.928/0.78 是按 1-0.4*(1-a_old) 反算出来的等效值），
   再由 app.js 每 7 秒给下一张加 .on 做交叉淡入。
------------------------------------------------------------------ */
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease}
.hero-media img.on{opacity:1}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(8,17,28,.92) 0%,rgba(8,17,28,.78) 45%,rgba(8,17,28,.50) 100%)
}
.hero .wrap{position:relative;padding:96px 24px 84px}
.hero h1{max-width:19ch}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.12rem;max-width:56ch}
.hero-actions{display:flex;gap:12px;margin:28px 0 34px;flex-wrap:wrap}
.hero-badges{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:24px}
.hero-badges div span{display:block;font-size:1.65rem;font-weight:800;color:#fff;line-height:1.1}
.hero-badges div small{font-size:.76rem;color:rgba(255,255,255,.62);letter-spacing:.05em}

/* ---------- Sections ---------- */
section{padding:74px 0}
section.tight{padding:52px 0}
.mist{background:var(--mist)}
.dark{background:var(--ink);color:#fff}
.dark h2,.dark h3{color:#fff}
.dark .lead{color:rgba(255,255,255,.74)}
.sec-head{max-width:70ch;margin-bottom:40px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

.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(--radius);
  padding:24px;transition:.2s ease;display:flex;flex-direction:column
}
.card img{align-self:flex-start;max-width:100%}/* 防止 flex stretch 拉伸 logo 等图片 */
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--line-2)}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);font-size:.93rem;margin-bottom:1em}
.card .more{margin-top:auto;font-weight:600;color:var(--blue);font-size:.9rem}

/* category tiles */
.cat-tile{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);
  min-height:240px;display:flex;align-items:flex-end;color:#fff;padding:20px;
  border:1px solid var(--line)
}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:.4s}
.cat-tile:hover img{opacity:.7;transform:scale(1.04)}
.cat-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,17,28,.15),rgba(8,17,28,.88))}
.cat-tile .t{position:relative;z-index:2}
.cat-tile h3{margin:0 0 .25em}
.cat-tile small{display:block;color:rgba(255,255,255,.75);font-size:.82rem;margin-bottom:.6em}
.cat-tile .cnt{
  display:inline-block;background:rgba(255,255,255,.16);border-radius:999px;
  padding:2px 10px;font-size:.75rem;font-weight:600
}

/* three-layer diagram */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.layer{
  border-radius:var(--radius);padding:26px;color:#fff;position:relative;overflow:hidden;min-height:210px
}
.layer.a{background:linear-gradient(150deg,#1B4E8C,#0B3B6F)}
.layer.b{background:linear-gradient(150deg,#D98A0B,#A9660A)}
.layer.c{background:linear-gradient(150deg,#3A5268,#1E2E3D)}
.layer h3{margin-bottom:.5em;font-size:1.1rem}
.layer ul{margin:0;padding-left:1.1em;font-size:.88rem;color:rgba(255,255,255,.88)}
.layer .tag{position:absolute;top:16px;right:18px;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}

/* spec table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table.spec{width:100%;border-collapse:collapse;font-size:.9rem;min-width:760px}
table.spec th,table.spec td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
table.spec thead th{background:var(--ink);color:#fff;font-weight:600;font-size:.82rem;
  letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0}
table.spec tbody tr:hover{background:var(--blue-soft)}
table.spec td.code{font-family:ui-monospace,Consolas,monospace;font-weight:600;color:var(--navy)}

/* filter bar */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.filterbar input,.filterbar select{
  font:inherit;font-size:.9rem;padding:10px 14px;border:1px solid var(--line-2);
  border-radius:999px;background:#fff;min-width:160px
}
.filterbar input{flex:1;min-width:240px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  padding:7px 15px;border-radius:999px;border:1px solid var(--line-2);background:#fff;
  font-size:.85rem;cursor:pointer;font-weight:500
}
.chip:hover{border-color:var(--blue)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* download cards */
.dl{
  display:flex;gap:16px;align-items:center;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;background:#fff
}
.dl .ico{
  width:46px;height:46px;border-radius:10px;background:var(--blue-soft);color:var(--blue);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:0 0 auto
}
.dl h4,.dl h3{margin:0 0 .15em;font-size:1rem}
/* V57：about 页时间轴卡片标题由 h4 降为 h3（h2→h4 跳级），字号拉回 h4 的 1em，视觉零变化 */
.it h3{font-size:1em}
.dl p{margin:0;font-size:.85rem;color:var(--muted)}
.dl .go{margin-left:auto}

/* FAQ */
details.faq{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;background:#fff}
details.faq summary{
  padding:18px 22px;cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.4rem;color:var(--blue);font-weight:400;line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq .body{padding:0 22px 20px;color:var(--muted);font-size:.94rem;border-top:1px solid var(--line);
  padding-top:16px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px}
.contact-card{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:#fff}
.kv{display:flex;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line)}
.kv:last-child{border:0}
.kv .k{width:88px;flex:0 0 auto;color:var(--muted);font-size:.86rem}
.kv .v{font-weight:600}
.kv .v a{color:var(--blue)}

form.leadForm{display:grid;gap:14px}
form.leadForm input,form.leadForm textarea,form.leadForm select{
  font:inherit;font-size:.94rem;padding:12px 14px;border:1px solid var(--line-2);
  border-radius:var(--radius-sm);background:#fff;width:100%
}
form.leadForm input:focus,form.leadForm textarea:focus{outline:2px solid var(--blue-soft);border-color:var(--blue)}
form.leadForm textarea{min-height:104px;resize:vertical}
.field2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* footer */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding:60px 0 28px;font-size:.9rem}
footer h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.f-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);gap:26px}
/* Technical & guides：15 条，单独占一行内部铺 4 列（4 行），不再把左侧 5 列撑歪。
   手机端折叠成约 4 条 + 「Show all guides」，勾选由 label 驱动（纯 CSS，无 JS、无 CLS）。 */
.f-tech{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.f-tech .ftg-t{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.f-tech .ftg-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px}
.f-tech .ftg-btn{display:none}
/* V58 Company 列折叠：桌面+移动默认显示前 5 条（到 Contact & Samples），
   后 4 条默认收起、点药丸展开。纯 CSS 无 JS；链接全在 DOM 里，SEO 不受影响。 */
.f-grid .co-t{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.f-grid .co-more{display:none}
.f-grid .co-t:checked~ul .co-more{display:block}
.f-grid .co-btn{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  padding:8px 16px;border-radius:999px;font-size:.79rem;font-weight:600;line-height:1;
  color:rgba(255,255,255,.86);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s,border-color .16s,color .16s
}
.f-grid .co-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);color:#fff}
.f-grid .co-btn::after{content:"▾";font-size:.68rem;opacity:.72;transition:transform .3s}
.f-grid .co-btn .co-l{display:none}
.f-grid .co-t:checked~.co-btn .co-m{display:none}
.f-grid .co-t:checked~.co-btn .co-l{display:inline}
.f-grid .co-t:checked~.co-btn::after{transform:rotate(180deg)}
/* V58 首页选型工具入口卡（L4 lead magnet 的门面） */
.sel-entry{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:linear-gradient(120deg,#0B3B6F 0%,#12508F 100%);
  border-radius:var(--radius);padding:30px 34px;color:#fff;text-decoration:none;
  box-shadow:var(--shadow-lg);transition:transform .2s,box-shadow .2s
}
.sel-entry:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(11,59,111,.28)}
.sel-entry .eyebrow{color:var(--amber)}
.sel-entry h2{color:#fff}
.sel-entry p{color:rgba(255,255,255,.82);font-size:.95rem;line-height:1.6}
.sel-entry-cta{flex:none;background:var(--amber);color:#3A2600;border:0;font-weight:700}
.sel-entry-cta:hover{background:#E2930F;color:#3A2600}
@media (max-width:680px){
  .sel-entry{padding:24px 22px}
  .sel-entry-cta{width:100%;justify-content:center}
}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:var(--amber)}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:8px}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:22px;
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.8rem;
  color:rgba(255,255,255,.55);text-align:center
}
.f-legal{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;line-height:1.75}
.f-legal>span:first-child{display:inline}
.f-sep{opacity:.32}
.f-tag{color:rgba(255,255,255,.45)}
.f-bottom a{color:rgba(255,255,255,.55);text-decoration:none}
.f-bottom a:hover{color:var(--amber);text-decoration:underline}
.f-icp{
  border-top:1px solid rgba(255,255,255,.12);margin-top:14px;padding-top:14px;
  text-align:center;font-size:.78rem;color:rgba(255,255,255,.5)
}
.f-icp a{color:rgba(255,255,255,.5);text-decoration:none}
.f-icp a:hover{color:rgba(255,255,255,.85);text-decoration:underline}
.brand-note{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;font-size:.86rem
}
.brand-note b{color:#fff}

/* floating contact */
.floating{
  position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px
}
.floating a{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  box-shadow:var(--shadow-lg);font-size:1.25rem;color:#fff
}
.floating .wa{background:#1FA855}
.floating .wc{background:#0E7A3D}
.floating .em{background:var(--blue)}
.floating .top{background:rgba(14,27,42,.82)}

/* utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mt24{margin-top:24px}.mt40{margin-top:40px}
.hide{display:none!important}
.tag{
  display:inline-block;padding:3px 10px;border-radius:999px;background:var(--blue-soft);
  color:var(--navy);font-size:.75rem;font-weight:600
}
.tag.g{background:#E6F5EC;color:var(--ok)}
.note{font-size:.85rem;color:var(--muted)}
.breadcrumb{font-size:.82rem;color:var(--muted);padding:14px 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue)}

/* responsive */

/* ---- ≤1240：顶栏切汉堡（V59 从 1080 上调）----
   .wrap 上限 1240、左右各 24 内边距 ⇒ 内容可用宽最大只有 1192，且视口小于
   1288 时会跟着视口一起缩（1200 视口只剩 1152）。
   顶栏是单行 flex：品牌 181 + 7 项链接（nowrap）+ 语言选择 + 样品 CTA，
   紧凑档下俄语实测需要 1171、荷兰语 1116、英语 1098。
   → 1241 以上容器固定 1192，装得下；1240 以下容器收窄就必然溢出，
     所以断点直接对齐 --max：容器没到满宽就用汉堡。
   ⚠ .navlinks{display:none} 与 .navlinks.open 的定位规则必须留在同一个断点里。
     旧版这两条在 ≤1080 里，如果把隐藏规则单独提前，1081–1240 点汉堡会什么都不出来。 */
@media (max-width:1240px){
  .navlinks{display:none}
  /* align-items:flex-start —— 竖排时 align-items 管的是水平方向。
     基础样式里是 center，竖排后链接被居中成一条悬浮的窄条（截图实测），
     汉堡下探到 1240 之后这个观感问题在平板/小笔记本上更明显。
     左对齐 + 文字左对齐，并给整行加一点左内边距，视觉上和 logo 对齐。 */
  .navlinks.open{display:flex;position:absolute;top:74px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;text-align:left;
    padding:12px 18px 14px;border-bottom:1px solid var(--line);gap:2px;z-index:80}
  .navlinks.open > a,.navlinks.open > .has-mega{width:100%}
  .burger{display:block;margin-left:auto}
  .mega{position:static;display:none;grid-template-columns:1fr;box-shadow:none;border:0;padding:0 0 8px}
  .has-mega:hover .mega{display:none}
}

@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .layers{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .f-tech .ftg-list{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:680px){
  section{padding:52px 0}
  /* minmax(0,1fr) 而不是 1fr：1fr 的最小值是 min-content，
     卡片里只要有一个长词（非英语语种常见）就会把整列顶宽、页面横向溢出 15px 左右。
     实测 pt/technology.html 在 390px 下就踩过这个坑。 */
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .hero .wrap{padding:64px 24px 56px}
  .field2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  /* 手机端：折叠到约 4 条，底部渐隐提示还有内容；点「Show all guides」展开 */
  .f-tech{margin-top:26px;padding-top:22px}
  .f-tech .ftg-list{
    display:block;max-height:126px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.08));
    mask-image:linear-gradient(180deg,#000 56%,rgba(0,0,0,.08));
    transition:max-height .34s cubic-bezier(.4,0,.2,1)
  }
  .f-tech .ftg-t:checked~.ftg-list{max-height:1600px;-webkit-mask-image:none;mask-image:none}
  .f-tech .ftg-btn{
    display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    padding:9px 17px;border-radius:999px;font-size:.81rem;font-weight:600;line-height:1;
    color:rgba(255,255,255,.86);background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.2);cursor:pointer;user-select:none;
    -webkit-tap-highlight-color:transparent;
    transition:background .16s,border-color .16s,color .16s
  }
  .f-tech .ftg-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.34);color:#fff}
  .f-tech .ftg-btn::after{content:"▾";font-size:.68rem;opacity:.72;transition:transform .3s}
  .f-tech .ftg-btn .ftg-l{display:none}
  .f-tech .ftg-t:checked~.ftg-btn .ftg-m{display:none}
  .f-tech .ftg-t:checked~.ftg-btn .ftg-l{display:inline}
  .f-tech .ftg-t:checked~.ftg-btn::after{transform:rotate(180deg)}
  .hero-badges{gap:18px}
  .hero-badges div span{font-size:1.3rem}
}

/* --- V5 性能/SEO --- */
/* <picture> 不产生盒子，保证内部 <img> 仍是 flex/grid 直接子项，不破坏既有布局 */
picture{display:contents}

/* --- V5 手机端修正：联系页表单撑破视口 --- */
.contact-grid > *{min-width:0}
input,select,textarea{min-width:0;max-width:100%}
@media (max-width:680px){
  .contact-grid{grid-template-columns:1fr}
  .contact-card{padding:20px;min-width:0;max-width:100%}
  .field2{grid-template-columns:1fr}
}


/* ===== 后台图表动画 ===== */
@keyframes kxBarV{from{transform:scaleY(.02);opacity:.25}to{transform:scaleY(1);opacity:1}}
@keyframes kxBarH{from{transform:scaleX(.02);opacity:.25}to{transform:scaleX(1);opacity:1}}
.kxbar-v{transform-origin:bottom center;animation:kxBarV .75s cubic-bezier(.22,.9,.24,1) both}
.kxbar-h{transform-origin:left center;animation:kxBarH .75s cubic-bezier(.22,.9,.24,1) both}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸ ";color:#5c94ca}
details[open]>summary::before{content:"▾ "}
.kxmap-t{transition:opacity .15s}
.kxmap-t:hover{opacity:.75}
@media (prefers-reduced-motion:reduce){.kxbar-v,.kxbar-h{animation:none}}

/* ---------- 后台：访问统计地图与国旗图标 ---------- */
.kxflag{display:inline-block;width:20px;height:15px;vertical-align:-2px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(11,59,111,.14);flex:0 0 auto;overflow:hidden}
/* 语言下拉里的国旗尺寸（避免 SVG 无尺寸时撑宽布局） */
.langbtn .kxflag,.langcur .kxflag{width:19px;height:14px}
.langlist .kxflag{width:20px;height:15px}
/* 表格内的 TDS 按钮：白底 + 深色文字，避免与白色表格背景融为一体 */
.btn.darkline{background:#fff;color:var(--ink);border:1px solid var(--line-2);font-weight:700}
.btn.darkline:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}
/* 蓝色门禁条内的垃圾箱提示：琥珀色加粗，醒目但不额外占行 */
.tds-lockbar .spamline{display:block;margin-top:7px;font-size:.83rem;font-weight:800;
  color:#FFD166;line-height:1.45;position:relative}
.tds-lockbar .spamline b{color:#FFD166;font-weight:800}
.tds-lockbar .spamline span[aria-hidden]{font-size:.95rem}
.kx-mapbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(16,35,63,.05)}
.kx-maphead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.kx-maphead b{font-size:1rem;color:var(--ink)}
.kx-maphead .note{font-size:.8rem}
@media (max-width:760px){
  .kx-mapbox{padding:12px}
  #kxmapWorld{height:300px !important}
  #kxmapChina{height:330px !important}
}

/* 语言下拉：窄屏适配（隐藏「语言选择」标签，面板靠右/底部弹出）
   断点跟着汉堡一起走 1240：1081–1240 现在是汉堡档，顶栏没有横向链接，
   留着 "LANGUAGE" 这个词只会白占宽度。 */
@media (max-width:1240px){
  .langlabel{display:none}
  .langlist{min-width:190px;max-height:62vh}
}

/* ================= 顶栏导航：桌面档（≥1241px）=================
   历史（V59 重写，2026-10-24）：旧版按视口宽度分了 1400 / 1240 / 1401 三档去压缩，
   但它压缩的依据是视口宽度，而顶栏能用的宽度其实由 .wrap 决定：
   max-width 1240 − 左右各 24 内边距 = 可用宽恒为 1192，视口再宽也不会变宽。
   两套坐标一错位，就出现了三个互不相干的溢出区间（实测 trust.html）：
     1081–1200  容器随视口缩到 1033–1152，俄语最多溢 129px
     1241–1400  用的是 .86rem 松档，俄语 1258 对 1192，溢 66px
     ≥1401      同上，1440 笔记本上俄语真能拉出横向滚动条
   现在改成：桌面只留一档，紧到最长的俄语也能装进 1192（实测 1171），
   不再随视口宽度变——反正容器宽度也不变。
   1240 以下交给汉堡菜单（见上面 ≤1240 的注释），断点与 --max 对齐。
   ⚠️ 不要再用 html[lang="ru"] 之类按语言区分的写法：data-mono 页面
      （型号页 / 关键词指南 / search.html）故意把 <html lang> 钉成 en，
      界面切成俄语时选择器命中不了。纯按宽度最稳。 */
@media (min-width:1241px){
  .nav{gap:6px}
  .navlinks{gap:2px}
  .navlinks a{padding:8px 6px;font-size:.8rem}
  .langlabel{display:none}
  .nav-cta{gap:6px;margin-left:4px}
  .nav-cta .btn.sm{padding:8px 12px;font-size:.8rem}
  .langbtn{padding:6px 10px;font-size:.8rem}
}

/* 超窄屏（≤420px）的内容行换行修复。
   1) resources 的下载行 .dl：flex 里 .ico(46) + 文案 + 按钮(.go, margin-left:auto) 挤一行，
      德语 "Herunterladen" 让整行的 min-content 变成 366px，320/360 视口直接横滚 6–46px。
   2) contact 的信息行 .kv：左边 .k 固定 88px，右边 .v 里 .kvrow 又是 flex 不换行，
      "王总监 + wangchangjiu@bltok.com + Marketing Director" 在 320px 下撑到 329px。
   两处都只影响窄屏布局，桌面端不动。 */
@media (max-width:420px){
  .dl{flex-wrap:wrap}
  .dl .go{margin-left:auto}
  .kv{display:block}
  .kv .k{width:auto;flex:none;margin-bottom:3px}
  .kvrow{flex-wrap:wrap}
}

@media (max-width:560px){
  /* 底部弹出 Sheet：header 已确保不创建包含块，fixed 相对视口 */
  .langlist{position:fixed;left:10px;right:10px;bottom:10px;top:auto;
    max-height:72vh;min-width:0;border-radius:16px}
}

/* 语言下拉：手机端进一步紧凑（避免与品牌标识、按钮争抢宽度） */
@media (max-width:560px){
  .langbtn{padding:6px 9px;font-size:.78rem;gap:6px}
  .langcur span{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav-cta{gap:6px;margin-left:4px}
}
@media (max-width:400px){
  .langcur span{max-width:44px}
  .langbtn{padding:5px 8px}
}

/* 门禁条提示行：窄屏适配 */
@media (max-width:560px){
  .tds-lockbar .spamline{font-size:.79rem;margin-top:6px;line-height:1.4}
  .tds-lockbar .txt span{font-size:.85rem}
}

/* ===================== 布局稳定性（CLS）=====================
   下面这些容器的内容都由 JS 在 DOMContentLoaded 之后注入：
     .langcur   语言按钮里的国旗 + 语言名
     .topbar .r 顶栏的联系方式（防爬：明文只存在于 base64 里，靠 JS 解码写入）
     #pdHero / #pdTop / #pdRows 产品页的家族信息（等 products-data.js 就绪才渲染）
   注入前后高度不一致 → 整页向下跳一次。实测：手机端首页 CLS 0.23、
   产品页 0.36（Google 阈值：≤0.1 良好，0.1~0.25 需改进）。
   修法：按"注入后实测高度"预留最小高度，取值见各断点。
   注意顺序：这里放在文件末尾，窄屏覆盖宽屏，靠层叠生效。 */
.langcur{min-height:22px}
@media (max-width:1240px){.langcur{min-height:21px}}
@media (max-width:680px){.langcur{min-height:19px}}
@media (max-width:400px){.langcur{min-height:17px}}

.topbar .r{min-height:17px}
@media (max-width:900px){.topbar .r{min-height:15px}}
@media (max-width:428px){.topbar .r{min-height:40px}}   /* 428px 及以下联系方式换行成两行（实测 427 换行、429 不换行） */

#pdHero{min-height:340px;margin-top:20px}   /* 与渲染后一致：sol-hero 300px(受 min-height 抬到 340) + margin-top 20px */
#pdTop{min-height:218px}           /* 家族信息双卡：桌面并排两列 */
@media (max-width:680px){#pdTop{min-height:513px}}  /* 手机端两张卡上下堆叠 */

/* ---------------------------------------------------------------
   工厂视频模块（V42）
   preload="none" 下不点播放不下流量，所以体量不是问题；
   这里只管三件事：不抖动、手机单列、深色板块里的说明文字够亮。
   --------------------------------------------------------------- */
.vblock{margin:26px 0 38px}
.vmain{border-radius:16px;overflow:hidden;background:#0b0f14;border:1px solid rgba(255,255,255,.16);line-height:0}
.vmain video{display:block;width:100%;height:auto;aspect-ratio:4/3;background:#0b0f14}
.vcap{font-size:.88rem;color:var(--muted);margin:12px 0 0}
.dark .vcap{color:rgba(255,255,255,.66)}
.vrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
.vcell{border-radius:12px;overflow:hidden;background:#0b0f14;border:1px solid rgba(255,255,255,.14);line-height:0}
.vcell video{display:block;width:100%;height:auto;aspect-ratio:4/3}
.vcell span{display:block;line-height:1.4;font-size:.8rem;padding:9px 11px 11px;color:rgba(255,255,255,.74)}
@media(max-width:760px){.vrow{grid-template-columns:1fr;gap:12px}}

/* ---- Cookie 同意条（consent.js）：fixed 不占文档流 → 不产生 CLS ---- */
.kxcb{position:fixed;left:0;right:0;bottom:0;z-index:9998;background:rgba(16,18,24,.97);color:#e8eaf0;
  box-shadow:0 -2px 22px rgba(0,0,0,.28);transform:translateY(0);opacity:1;
  transition:transform .3s ease,opacity .3s ease;font-size:14px;line-height:1.5}
.kxcb.out{transform:translateY(110%);opacity:0}
.kxcb-w{max-width:1120px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;
  gap:18px;justify-content:space-between;flex-wrap:wrap}
.kxcb-t{margin:0;flex:1 1 340px;color:#c9cfdb}
.kxcb-b{display:flex;gap:10px;flex:0 0 auto}
.kxcb button{font:inherit;border-radius:9px;padding:9px 17px;cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:filter .16s,border-color .16s}
.kxcb-a{background:#F2A21C;border-color:#F2A21C;color:#181818;font-weight:600}
.kxcb-a:hover{filter:brightness(1.08)}
.kxcb-d{background:transparent;border-color:#5b6474;color:#c9cfdb}
.kxcb-d:hover{border-color:#8d97a8}
@media(max-width:640px){.kxcb-w{padding:12px 14px;gap:11px}.kxcb-b{width:100%}
  .kxcb-b button{flex:1;padding:10px 8px}}

/* ---- 表格在手机上堆叠成卡片（V46）--------------------------------------
   4–5 列的对比表在 390px 屏幕上只能横向滚动：右侧列用户看不到，也没有滚动提示，
   等于把关键参数（胶水/离型纸）藏起来了。680px 以下改成一行一张卡：
   隐藏表头，每个单元格用 data-label 补回字段名。
   只作用于 class 带 stack 的表，不影响既有页面。 */
@media(max-width:680px){
  table.spec.stack{min-width:0;width:100%}
  table.spec.stack thead{display:none}
  table.spec.stack,table.spec.stack tbody,table.spec.stack tr,table.spec.stack td{display:block;width:auto}
  table.spec.stack tr{border:1px solid var(--line);border-radius:10px;padding:10px 13px;margin-bottom:10px;background:#fff}
  table.spec.stack tr:hover{background:#fff}
  table.spec.stack td{border:0;padding:5px 0;display:flex;gap:12px;align-items:baseline;font-size:.88rem;line-height:1.5}
  table.spec.stack td+td{border-top:1px solid rgba(0,0,0,.06);padding-top:7px;margin-top:2px}
  table.spec.stack td::before{content:attr(data-label);flex:0 0 auto;min-width:84px;white-space:nowrap;font-size:.71rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:1px}
  table.spec.stack td:first-child{padding-bottom:8px}
  table.spec.stack td:first-child::before{content:none}
  table.spec.stack td:not([data-label])::before{content:none}
  table.spec.stack td:first-child a{font-size:1rem}
}

/* ---- ≤420px：堆叠表格的标签列允许折行 ------------------------------------
   "What it means for you" 这类长 data-label 原来 white-space:nowrap 硬占 140px，
   把右侧正文挤到溢出 —— trust.html 在 320px 整页横滚 26px（2026-10-24 修）。
   ⚠ 必须放在上面 @media(max-width:680px) 的 stack 规则**之后**：两条选择器
   特异度相同，靠顺序决胜，放前面会被覆盖（第一版就踩了这个坑）。
------------------------------------------------------------------ */
@media (max-width:420px){
  table.spec.stack td{flex-wrap:wrap}
  table.spec.stack td::before{white-space:normal;min-width:0;flex-shrink:1;max-width:100%}
}

/* ---- ≤420px：长 URL / 长英文串允许断行 -----------------------------------
   trust.html 官方社媒那条 <li> 里 facebook.com/KuoxuanLabelMaterials 是个
   无法断行的长 token，在 320px 把整页撑宽 26px（2026-10-24 实测定位）。
   overflow-wrap 只在"单个词本身就放不下"时才断，不会影响正常排版。
------------------------------------------------------------------ */
@media (max-width:420px){
  body{overflow-wrap:break-word}
  .wrap li,.wrap p,.wrap dd,.wrap td{overflow-wrap:anywhere}
}

/* ---- 产品中心顶部 banner（V61）------------------------------------------
   A4 品牌包装图放在 H1 右侧：客户打开产品列表第一眼就看到"整箱空白材料"，
   直接把"你们是不是也做印刷"这个误解挡在浏览之前。
   ≤900px 早于 .g2 的 680 断点收回单列 —— 800px 左右两列时 H1 只剩十几字符宽。
------------------------------------------------------------------ */
.pr-banner{display:grid;grid-template-columns:1.08fr .92fr;gap:36px;align-items:center;margin:6px 0 10px}
.pr-banner .pic{border-radius:var(--radius);overflow:hidden;background:var(--mist);
  box-shadow:var(--shadow-lg);border:1px solid var(--line)}
.pr-banner .pic img{display:block;width:100%;height:auto}
.pr-banner h1{margin-top:.25em}
@media (max-width:900px){
  .pr-banner{grid-template-columns:minmax(0,1fr);gap:20px}
}