/* ============================================================
   BESCOLIN Design System v4.0 — "Precision Engineering Document"
   Palette: paper #F7FAFB / grid #E4EDF1 / ink #16212B /
            cleanroom blue #0E4A5E / safety orange #F26B1D / steel #8FB3C2
   Type:    Barlow Condensed (display) · IBM Plex Sans (body) · IBM Plex Mono (data)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --paper: #F7FAFB; --gridline: #E4EDF1; --ink: #16212B; --body: #2A3B45;
  --blue: #0E4A5E; --blue-soft: #CFE5EE; --steel: #8FB3C2;
  --orange: #F26B1D; --orange-press: #C24F0E;
  --ok: #1E7D4B; --warn: #C0392B; --line: #D8E2E8;
  --disp: "Barlow Condensed", "Noto Sans SC", sans-serif;
  --sans: "IBM Plex Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", "Noto Sans SC", Menlo, monospace;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans); color: var(--body); font-size: 16.5px; line-height: 1.7;
  background-color: var(--paper);
  background-image: linear-gradient(var(--gridline) 1px, transparent 1px),
                    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 28px 28px;
}
:lang(th) body, body:lang(th) { font-family: "IBM Plex Sans Thai", var(--sans); line-height: 1.9; }
:lang(zh) body, body:lang(zh) { font-family: "Noto Sans SC", var(--sans); }
img { max-width: 100%; display: block; }
a { color: var(--blue); }

/* ---------- top bar ---------- */
.topbar { background: var(--ink); color: #B7C6CF; font-size: 12.5px; padding: 7px 0; font-family: var(--mono); letter-spacing: .02em; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topbar a { color: #9FCBDB; text-decoration: none; }
.topbar a:hover { color: #fff; }
.langsel a { color: #9FCBDB; text-decoration: none; }
.langsel strong { color: #fff; border-bottom: 2px solid var(--orange); }

/* ---------- header / nav ---------- */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
header.site { background: #fff; border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 50; }
.navrow { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { font-family: var(--disp); font-size: 27px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }
.logo span { color: var(--orange); }
nav.main { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
nav.main > a, .dd > a.ddbtn {
  text-decoration: none; color: var(--ink); font-weight: 600; padding: 8px 11px;
  font-size: 14.5px; border-bottom: 3px solid transparent;
}
nav.main > a:hover, .dd > a.ddbtn:hover { border-bottom-color: var(--orange); }
nav.main > a.cta {
  background: var(--orange); color: #fff; border: 0; border-radius: 4px; padding: 10px 20px;
  box-shadow: 0 3px 0 var(--orange-press); margin-left: 8px;
}
nav.main > a.cta:hover { transform: translateY(1px); box-shadow: 0 2px 0 var(--orange-press); }
.dd { position: relative; }
.dd .menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); min-width: 260px; padding: 6px; box-shadow: 0 14px 30px rgba(22,33,43,.16); }
.dd:hover .menu { display: block; }
.dd .menu a { display: block; padding: 9px 12px; text-decoration: none; color: var(--body); font-size: 14.5px; }
.dd .menu a:hover { background: var(--paper); color: var(--blue); }

/* ---------- hero (photo type, used on language landings) ---------- */
.hero { position: relative; color: #fff; overflow: hidden; background: var(--ink); }
.hero .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: brightness(.9) saturate(.85); }
.hero .bgimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(22,33,43,.94) 0%, rgba(14,74,94,.82) 55%, rgba(22,33,43,.45) 100%); }
.hero .inner { position: relative; padding: 84px 20px 78px; max-width: 1160px; margin: 0 auto; z-index: 1; }
.hero h1 { font-family: var(--disp); font-weight: 700; font-size: 52px; line-height: 1.07; max-width: 800px; margin-bottom: 16px; text-transform: uppercase; letter-spacing: .01em; }
.hero h1 em { font-style: normal; color: #fff; border-bottom: 6px solid var(--orange); }
:lang(zh) .hero h1, :lang(th) .hero h1 { text-transform: none; font-size: 42px; line-height: 1.22; }
.hero p.sub { font-size: 18.5px; max-width: 680px; opacity: .94; margin-bottom: 28px; line-height: 1.65; }
.trustrow { display: flex; gap: 40px; margin-top: 38px; flex-wrap: wrap; }
.trustrow div { font-size: 13.5px; font-family: var(--mono); color: #B7C6CF; letter-spacing: .03em; }
.trustrow b { display: block; font-family: var(--disp); font-size: 44px; font-weight: 700; color: #fff; line-height: 1.05; }
.trustrow b::after { content: ""; display: block; width: 34px; height: 4px; background: var(--orange); margin: 6px 0 4px; }

/* ---------- industry trust band ---------- */
.trustband { background: var(--blue); color: #CFE5EE; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; padding: 10px 0; text-align: center; }
.trustband .wrap { overflow-x: auto; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--orange); color: #fff; text-decoration: none;
  font-family: var(--sans); font-weight: 700; padding: 13px 28px; border-radius: 4px;
  font-size: 16px; border: 0; cursor: pointer; box-shadow: 0 4px 0 var(--orange-press);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-press); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 2px currentColor; color: inherit; margin-left: 10px; }
.btn.ghost:hover { transform: none; background: rgba(255,255,255,.08); }

/* ---------- sections ---------- */
section.block { padding: 60px 0; }
section.block.alt { background: #EFF4F7; background-image: linear-gradient(#E2EBF0 1px, transparent 1px), linear-gradient(90deg, #E2EBF0 1px, transparent 1px); background-size: 28px 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2.sec { font-family: var(--disp); font-weight: 700; font-size: 34px; color: var(--ink); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .015em; }
:lang(zh) h2.sec, :lang(th) h2.sec { text-transform: none; font-size: 29px; }
h2.sec::after { content: ""; display: block; width: 52px; height: 5px; background: var(--orange); margin-top: 8px; }
p.seclead { color: #52646E; max-width: 780px; margin: 14px 0 30px; font-size: 16.5px; }

/* ---------- signature: iso chips / nameplate / ruler / stats ---------- */
.isochip { display: inline-block; font-family: var(--mono); font-size: 11.5px; background: var(--blue); color: var(--blue-soft); border-radius: 3px; padding: 3px 10px; margin: 0 6px 6px 0; letter-spacing: .09em; text-transform: uppercase; }
.isochip.warnc { background: #7A3A10; color: #FFD9BF; }
.plate {
  display: inline-block; background: linear-gradient(180deg, #EDF2F4, #D9E2E7);
  border: 1px solid #B9C9D2; border-radius: 6px; padding: 13px 18px;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(22,33,43,.14);
}
.plate b { font-size: 14.5px; letter-spacing: .06em; }
.plate .row { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.ruler { height: 14px; margin: 44px 0 0;
  background: repeating-linear-gradient(90deg, #9FB4BF 0 1px, transparent 1px 10px),
              repeating-linear-gradient(90deg, #5E7885 0 2px, transparent 2px 50px);
  border-bottom: 2px solid #5E7885; opacity: .55; }
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: var(--ink); border-radius: 6px; padding: 30px 34px; color: #B7C6CF; }
.statband .st b { display: block; font-family: var(--disp); font-size: 46px; color: #fff; line-height: 1; }
.statband .st b i { font-style: normal; color: var(--orange); }
.statband .st { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }

/* ---------- cards ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--body); transition: transform .14s, box-shadow .14s, border-color .14s; display: flex; flex-direction: column; position: relative; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); opacity: 0; transition: opacity .14s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14,74,94,.16); border-color: var(--steel); }
.card:hover::before { opacity: 1; }
.card .ph { height: 190px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.card .ph img { object-fit: contain; max-height: 100%; }
.card .tx { padding: 16px 18px 18px; }
.card h3 { font-family: var(--disp); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
:lang(zh) .card h3, :lang(th) .card h3 { text-transform: none; font-size: 18.5px; }
.card p { font-size: 14px; color: #52646E; }
.card .more { color: var(--orange); font-weight: 700; font-size: 13.5px; margin-top: 10px; display: inline-block; font-family: var(--mono); letter-spacing: .04em; }

/* ---------- feature blocks ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 4px; padding: 18px 20px; }
.feat h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.feat p { font-size: 14px; color: #52646E; }

/* ---------- tables (datasheet style) ---------- */
.tblwrap { overflow-x: auto; margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table.spec { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.spec th { background: var(--ink); color: #CFE5EE; padding: 10px 12px; text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
table.spec td { padding: 9px 12px; border-bottom: 1px solid #EAF0F3; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--body); }
table.spec tr:nth-child(even) td { background: #F4F8FA; }
table.spec tr:hover td { background: var(--blue-soft); }

/* ---------- page head ---------- */
.pagehead { background: var(--ink); background-image: linear-gradient(rgba(143,179,194,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(143,179,194,.10) 1px, transparent 1px); background-size: 28px 28px; color: #fff; padding: 52px 0 44px; border-bottom: 4px solid var(--orange); }
.pagehead h1 { font-family: var(--disp); font-weight: 700; font-size: 42px; line-height: 1.1; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .01em; }
:lang(zh) .pagehead h1, :lang(th) .pagehead h1 { text-transform: none; font-size: 34px; }
.pagehead p { font-size: 17px; opacity: .92; max-width: 820px; }
.crumb { font-family: var(--mono); font-size: 12px; opacity: .75; margin-bottom: 16px; letter-spacing: .05em; text-transform: uppercase; }
.crumb a { color: #9FCBDB; text-decoration: none; }

/* ---------- product layout ---------- */
.prodgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 34px; align-items: start; }
.imgbox { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px; position: relative; }
.imgbox img { margin: 0 auto; }
.imgrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.imgrow .imgbox { padding: 8px; }
ul.ticks { list-style: none; margin: 14px 0; }
ul.ticks li { padding-left: 28px; position: relative; margin-bottom: 9px; font-size: 15px; }
ul.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700; font-family: var(--mono); }

/* ---------- annotated figure ---------- */
.annot { position: relative; }
.annot .tag { position: absolute; font-family: var(--mono); font-size: 11px; background: rgba(22,33,43,.92); color: #CFE5EE; padding: 3px 8px; border-radius: 3px; border-left: 3px solid var(--orange); }

/* ---------- CTA band ---------- */
.ctaband { background: linear-gradient(115deg, var(--ink) 0%, var(--blue) 100%); color: #fff; border-radius: 6px; padding: 34px 38px; display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; margin: 26px 0 8px; border-left: 6px solid var(--orange); }
.ctaband h3 { font-family: var(--disp); font-size: 27px; font-weight: 700; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .02em; }
:lang(zh) .ctaband h3, :lang(th) .ctaband h3 { text-transform: none; font-size: 23px; }
.ctaband p { opacity: .9; font-size: 15px; }
.ctaband .btn { box-shadow: 0 4px 0 rgba(0,0,0,.35); }

/* ---------- forms ---------- */
form.quote { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 6px; padding: 26px; box-shadow: 0 6px 20px rgba(22,33,43,.08); }
form.quote label { display: block; font-weight: 600; font-size: 13px; margin: 13px 0 5px; color: var(--ink); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
form.quote input, form.quote textarea, form.quote select { width: 100%; padding: 11px 12px; border: 1px solid #C4D2DA; border-radius: 4px; font-size: 15.5px; font-family: var(--sans); background: var(--paper); }
form.quote input:focus, form.quote textarea:focus, form.quote select:focus { outline: 2px solid var(--orange); border-color: var(--orange); background: #fff; }
form.quote textarea { min-height: 110px; }

/* two-step form */
.stepform .stepnav { display: flex; gap: 0; margin-bottom: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: .05em; }
.stepform .stepnav span { flex: 1; text-align: center; padding: 8px 4px; background: #EAF0F3; color: #52646E; border-right: 2px solid #fff; }
.stepform .stepnav span.on { background: var(--blue); color: #fff; }
.rolegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.rolebtn { border: 2px solid var(--line); background: #fff; border-radius: 6px; padding: 16px 12px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; transition: all .12s; }
.rolebtn small { display: block; font-weight: 400; color: #52646E; font-size: 12.5px; margin-top: 3px; }
.rolebtn:hover { border-color: var(--steel); }
.rolebtn.sel { border-color: var(--orange); background: #FFF4EC; box-shadow: 0 0 0 1px var(--orange); }
.hidden { display: none !important; }

/* ---------- expert block ---------- */
.expertbox { display: flex; gap: 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange); border-radius: 6px; padding: 20px 24px; align-items: center; flex-wrap: wrap; }
.expertbox .face { width: 84px; height: 84px; border-radius: 50%; background: var(--blue-soft); overflow: hidden; flex-shrink: 0; border: 3px solid #fff; box-shadow: 0 3px 10px rgba(22,33,43,.2); }
.expertbox .face img { width: 100%; height: 100%; object-fit: cover; }
.expertbox h4 { font-family: var(--disp); font-size: 21px; color: var(--ink); text-transform: uppercase; }
.expertbox .role { font-family: var(--mono); font-size: 12px; color: var(--blue); letter-spacing: .05em; margin-bottom: 6px; }
.expertbox p { font-size: 14.5px; color: #52646E; }

/* ---------- footer ---------- */
footer.site { background: var(--ink); color: #93A6B2; padding: 46px 0 26px; margin-top: 64px; font-size: 14px; border-top: 4px solid var(--orange); }
footer.site h4 { color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
footer.site a { color: #93A6B2; text-decoration: none; display: block; margin-bottom: 6px; }
footer.site a:hover { color: #9FCBDB; }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 28px; margin-bottom: 24px; }
.socialrow { display: flex; gap: 10px; margin-bottom: 16px; }
.socialrow a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: rgba(255,255,255,.08); text-decoration: none; margin: 0; transition: all .16s ease; }
.socialrow svg { width: 19px; height: 19px; fill: #E8F0F4; transition: all .16s ease; }
.socialrow a:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.socialrow a:hover svg { fill: #fff; }
.socialrow a.li:hover { background: #0A66C2; }
.socialrow a.fb:hover { background: #1877F2; }
.socialrow a.yt:hover { background: #FF0000; }
.socialrow a.tk:hover { background: #000; }
.socialrow a.tk:hover svg { filter: drop-shadow(1.2px 0 #FE2C55) drop-shadow(-1.2px 0 #25F4EE); }
.socialrow a.za:hover { background: #0068FF; }
.socialrow a.ln:hover { background: #06C755; }
.socialrow a.tg:hover { background: #2AABEE; }
/* feature icons */
.fi { width: 21px; height: 21px; fill: var(--blue); display: inline-block; vertical-align: -4px; margin-right: 9px; flex-shrink: 0; }
.rolebtn .fi { fill: var(--orange); vertical-align: -5px; }
/* video slot */
a.videobox { position: relative; display: block; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); text-decoration: none; }
a.videobox img { width: 100%; display: block; transition: transform .3s ease; }
a.videobox:hover img { transform: scale(1.03); }
a.videobox .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76px; height: 76px; border-radius: 50%; background: rgba(22,33,43,.82); border: 2px solid #fff; display: flex; align-items: center; justify-content: center; transition: all .16s; }
a.videobox .play::after { content: ""; border-left: 22px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
a.videobox:hover .play { background: var(--orange); border-color: var(--orange); transform: translate(-50%,-50%) scale(1.08); }
a.videobox .vlabel { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(22,33,43,.92)); color: #CFE5EE; font-family: var(--mono); font-size: 11.5px; letter-spacing: .07em; padding: 30px 16px 12px; }
.copyright { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font-size: 12px; color: #6E8291; font-family: var(--mono); }

/* ---------- floats ---------- */
.wafloat { position: fixed; right: 22px; bottom: 22px; z-index: 99; background: #25D366; color: #fff; text-decoration: none; font-weight: 700; padding: 13px 20px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.3); font-size: 15px; }
.wafloat:hover { transform: translateY(-2px); }

/* ---------- motion ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .inner > * , .pagehead .wrap > * { animation: riseIn .5s ease both; }
.hero .inner > *:nth-child(2), .pagehead .wrap > *:nth-child(2) { animation-delay: .08s; }
.hero .inner > *:nth-child(3), .pagehead .wrap > *:nth-child(3) { animation-delay: .16s; }
.hero .inner > *:nth-child(4) { animation-delay: .24s; }
.hero .inner > *:nth-child(5) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .grid3, .feats, .grid4 { grid-template-columns: repeat(2, 1fr); }
  .prodgrid, .grid2 { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 38px; }
  .pagehead h1 { font-size: 32px; }
  .navrow { min-height: auto; padding: 10px 0; flex-wrap: wrap; }
}
@media (max-width: 580px) {
  body { font-size: 16px; }
  .grid3, .grid4, .feats { grid-template-columns: 1fr; }
  .imgrow { grid-template-columns: repeat(2, 1fr); }
  .hero .inner { padding: 56px 20px; }
  .hero h1 { font-size: 33px; }
  .trustrow { gap: 22px; }
  .trustrow b { font-size: 34px; }
  .statband { padding: 22px; grid-template-columns: repeat(2, 1fr); }
  .rolegrid { grid-template-columns: 1fr; }
  h2.sec { font-size: 27px; }
}

/* ============ P1: instant search ============ */
.searchbtn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:4px; border:1.5px solid var(--line); color:var(--ink); text-decoration:none; font-size:17px; margin-left:6px; }
.searchbtn:hover { border-color:var(--orange); color:var(--orange); }
.bsearch-overlay { position:fixed; inset:0; background:rgba(22,33,43,.66); backdrop-filter:blur(3px); z-index:200; display:none; padding:8vh 16px 0; }
.bsearch-overlay.on { display:block; }
.bsearch-box { max-width:640px; margin:0 auto; background:#fff; border-radius:8px; border-top:4px solid var(--orange); box-shadow:0 30px 80px rgba(0,0,0,.45); overflow:hidden; }
.bsearch-bar { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.bsearch-glass { font-size:19px; color:var(--blue); }
.bsearch-input { flex:1; border:0; outline:0; font-family:var(--sans); font-size:17px; color:var(--ink); background:transparent; }
.bsearch-kbd { font-family:var(--mono); font-size:10.5px; color:#52646E; border:1px solid var(--line); border-radius:4px; padding:2px 7px; }
.bsearch-results { max-height:52vh; overflow-y:auto; }
.bsearch-item { display:flex; align-items:center; gap:12px; padding:11px 16px; text-decoration:none; color:var(--body); font-size:15px; border-bottom:1px solid #F0F4F6; }
.bsearch-item:hover { background:var(--paper); color:var(--ink); }
.bsearch-item:hover .bsearch-go { color:var(--orange); transform:translateX(3px); }
.bsearch-tag { font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; background:var(--blue); color:var(--blue-soft); border-radius:3px; padding:2px 7px; flex-shrink:0; min-width:64px; text-align:center; }
.bsearch-go { margin-left:auto; color:#B9C9D2; transition:all .12s; }
.bsearch-empty { padding:22px 16px; color:#52646E; font-size:14.5px; }
.bsearch-foot { font-family:var(--mono); font-size:10px; color:#8FA3AF; letter-spacing:.08em; padding:9px 16px; background:var(--paper); border-top:1px solid var(--line); }

/* ============ P1: scroll narrative (Apple style) ============ */
.story { border-bottom:1px solid var(--line); }
.storypanel { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:64px 0; border-bottom:1px dashed var(--line); }
.storypanel:last-child { border-bottom:0; }
.storypanel .stno { font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--orange); margin-bottom:10px; }
.storypanel h3 { font-family:var(--disp); font-size:38px; font-weight:700; color:var(--ink); text-transform:uppercase; line-height:1.06; margin-bottom:12px; }
.storypanel p { font-size:16.5px; color:#52646E; max-width:440px; }
.storypanel .visual { border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#fff; }
.storypanel:nth-child(even) .visual { order:-1; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.inview { opacity:1; transform:none; }

/* ============ P1: technical drawings ============ */
.techdraw { background:#fff; border:1px solid var(--line); border-radius:6px; padding:22px; }
.techdraw svg { width:100%; height:auto; display:block; }
.td-cap { font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:#52646E; margin-top:10px; display:flex; justify-content:space-between; }

/* ============ P1: before/after slider ============ */
.ba { position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line); user-select:none; }
.ba img { width:100%; display:block; }
.ba-top { position:absolute; inset:0; width:50%; overflow:hidden; }
.ba-top img { width:auto; height:100%; max-width:none; }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background:var(--orange); pointer-events:none; }
.ba-handle::after { content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--orange); color:#fff; font-size:12px; padding:7px 9px; border-radius:20px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,.35); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
.ba-tags { position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; pointer-events:none; }
.ba-tags span { font-family:var(--mono); font-size:11px; background:rgba(22,33,43,.9); color:#CFE5EE; padding:3px 9px; border-radius:3px; border-left:3px solid var(--orange); }

/* ============ P1: configurator ============ */
.cfg { background:#fff; border:1px solid var(--line); border-top:4px solid var(--orange); border-radius:6px; padding:26px; }
.cfg .q { font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--blue); margin:16px 0 8px; text-transform:uppercase; }
.cfg .q:first-child { margin-top:0; }
.chips { display:flex; gap:10px; flex-wrap:wrap; }
.chip { border:2px solid var(--line); background:var(--paper); border-radius:5px; padding:9px 16px; font-family:var(--sans); font-weight:600; font-size:14.5px; color:var(--ink); cursor:pointer; transition:all .12s; }
.chip:hover { border-color:var(--steel); }
.chip.sel { border-color:var(--orange); background:#FFF4EC; box-shadow:0 0 0 1px var(--orange); }
.cfg-out { margin-top:20px; }

/* ============ P1: animated flow diagrams ============ */
.flowline { stroke-dasharray:6 6; animation:flowdash 1.1s linear infinite; }
@keyframes flowdash { to { stroke-dashoffset:-24; } }
.flowdot { animation:flowpulse 1.6s ease-in-out infinite; }
@keyframes flowpulse { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@media (max-width: 860px) {
  .storypanel { grid-template-columns:1fr; padding:44px 0; }
  .storypanel:nth-child(even) .visual { order:0; }
  .storypanel h3 { font-size:29px; }
}

/* ============ polish pass: 精致度终修 ============ */
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: #A9BDC8; border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }
/* 图片网格整齐化（缩略图统一4:3裁切；产品主图不受影响） */
.grid4 > .imgbox img, .grid3 > .imgbox img, .imgrow .imgbox img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 蓝图裁切角标（签名元素补齐） */
.imgbox::after { content: ""; position: absolute; inset: 5px; pointer-events: none; opacity: .65;
  background: linear-gradient(#8FB3C2,#8FB3C2) left 0 top 0 / 12px 1.5px,
              linear-gradient(#8FB3C2,#8FB3C2) left 0 top 0 / 1.5px 12px,
              linear-gradient(#8FB3C2,#8FB3C2) right 0 bottom 0 / 12px 1.5px,
              linear-gradient(#8FB3C2,#8FB3C2) right 0 bottom 0 / 1.5px 12px;
  background-repeat: no-repeat; }
/* 打印即文件（工程文档气质延伸） */
@media print {
  .topbar, header.site, .wafloat, .socialrow, nav, .bsearch-overlay, .btn.ghost { display: none !important; }
  body { background: #fff; }
  .pagehead { border-bottom: 2px solid #000; background: #fff !important; color: #000; }
  .pagehead h1, .pagehead p { color: #000; }
  a { color: #000; text-decoration: none; }
}
/* 404 页 */
.err-wrap { min-height: 62vh; display: flex; align-items: center; }
.err-code { font-family: var(--disp); font-size: 140px; font-weight: 700; color: var(--ink); line-height: 1; }
.err-code em { font-style: normal; color: var(--orange); }

/* —— 品牌LOGO图（倍斯科霖 BESTCLEAN 正式版）—— */
.logo img{height:48px;width:auto;display:block}
@media (max-width:720px){.logo img{height:38px}}