/* ==========================================================================
   Wiopticable — Fiber Optic Interconnect Solutions — shared stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ---- light (default) palette — fiber-optic blue ---- */
  --bg:#f3f6f9;
  --surface:#ffffff;
  --surface-2:#e7edf3;
  --ink:#0e1720;
  --ink-soft:#45576a;
  --ink-faint:#7f93a3;
  --line:#d7e1ea;
  --accent:#0e5fa8;
  --accent-bright:#1f8fe0;
  --accent-soft:#dceefb;
  --signal:#d8402c;
  --signal-soft:#fce7e3;
  --good:#2e7d52;
  --good-soft:#e6f3ea;
  --shadow: 0 1px 2px rgba(14,23,32,.06), 0 10px 28px -14px rgba(14,23,32,.18);

  /* ---- fixed light-blue "brand band" — deliberate constant look, same in
     every theme. Was a near-black navy through v10; Songbo said that read
     too heavy/somber ("太深沉") for the nav/banner/footer, so this is now a
     soft, saturated light blue instead, with dark text/lines to match. ---- */
  --band-bg:#dceafb;
  --band-surface:#eef5fc;
  --band-surface-2:#cbe0f4;
  --band-ink:#0e1720;
  --band-ink-soft:#3d5266;
  --band-ink-faint:#5c7488;
  --band-line:rgba(14,23,32,.12);
  --band-accent:#0e5fa8;
  /* Primary CTA button color — v24 (2026-09-27): the v22 same-hue blue
     (#0a63e0) fixed the "too jarring" complaint but Songbo then said it
     doesn't pair well / reads flat against the blue theme ("搭配不好看") —
     a button in the same hue as everything around it stops looking like a
     button. Blue's true complement is orange, but a bright coral repeats
     the original "too jarring" problem, so this uses a warmer, more
     refined amber-gold instead — a classic contrast pairing with blue used
     in a lot of premium industrial/engineering branding. It's warm where
     the theme is cool, so it pops and reads as the one actionable color on
     the page, without the harsh red-orange clash from before. Paired with
     --band-ink (dark) text rather than white: white-on-amber measured a
     weak ~2.5:1 contrast, while dark-ink-on-amber measures ~7.3:1 (WCAG
     AA/AAA), and it lets the button "borrow" the same dark ink used for
     body text elsewhere, so it still feels tied to the page's palette. */
  --band-signal:#e0952e;
  --band-signal-hover:#c97e1d;

  --font-display:'Archivo', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-body:'IBM Plex Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b141c;
    --surface:#121f2b;
    --surface-2:#182838;
    --ink:#e9f0f6;
    --ink-soft:#a0b4c4;
    --ink-faint:#71879a;
    --line:#24384a;
    --accent:#4db8f0;
    --accent-bright:#4db8f0;
    --accent-soft:rgba(77,184,240,.14);
    --signal:#ff6a54;
    --signal-soft:rgba(255,106,84,.14);
    --good:#55c085;
    --good-soft:rgba(85,192,133,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0b141c;
  --surface:#121f2b;
  --surface-2:#182838;
  --ink:#e9f0f6;
  --ink-soft:#a0b4c4;
  --ink-faint:#71879a;
  --line:#24384a;
  --accent:#4db8f0;
  --accent-bright:#4db8f0;
  --accent-soft:rgba(77,184,240,.14);
  --signal:#ff6a54;
  --signal-soft:rgba(255,106,84,.14);
  --good:#55c085;
  --good-soft:rgba(85,192,133,.14);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -14px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box;}
html,body{background:var(--bg);}
body{
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  padding-inline:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); text-wrap:balance; letter-spacing:-.01em; margin:0; color:inherit;}
p{margin:0 0 14px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.mono{font-family:var(--font-mono);}
::selection{background:var(--accent-soft); color:var(--accent);}

.container{max-width:1180px; margin-inline:auto; padding-inline:max(20px, env(safe-area-inset-left,0px)) max(20px, env(safe-area-inset-right,0px));}
.container-narrow{max-width:820px; margin-inline:auto; padding-inline:20px;}

section{padding-block:64px;}
section.tight{padding-block:44px;}
@media (max-width:700px){
  section{padding-block:46px;}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:12px;
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--accent);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  padding:12px 22px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-signal{background:var(--band-signal); color:var(--band-ink);}
.btn-signal:hover{background:var(--band-signal-hover);}
.btn-ghost-dark{border-color:var(--band-line); color:var(--band-ink);}
.btn-ghost-dark:hover{border-color:var(--band-accent); color:var(--band-accent);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-accent:hover{background:var(--accent-bright);}
.btn-outline{border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px; font-size:.82rem;}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:var(--band-bg);
  border-bottom:1px solid var(--band-line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
/* v13: no separate icon mark any more — Songbo said the name is long
   enough already and asked to style the wordmark itself instead. The
   brand lockup is just the two colored spans below; "Wio" (the prefix it
   shares with Songbo's other site, wioptic.com) stays the default ink
   color, "pticable" picks up the accent blue. */
.brand{display:flex; align-items:center; font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:-.01em;}
.brand-wio{color:var(--band-ink);}
.brand-rest{color:var(--band-accent);}
.brand small{
  display:block; font-family:var(--font-mono); font-weight:400; font-size:.6rem;
  color:var(--band-ink-faint); letter-spacing:.04em; margin-top:1px;
}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{
  color:var(--band-ink-soft); font-size:.9rem; font-weight:500;
  padding-block:4px; border-bottom:2px solid transparent;
}
.nav-links a:hover, .nav-links a.active{color:var(--band-ink); border-color:var(--band-accent);}
.nav-cta{display:flex; align-items:center; gap:10px;}
.nav-toggle{
  display:none; background:none; border:1px solid var(--band-line); color:var(--band-ink);
  border-radius:8px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;
}
@media (max-width:920px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0; background:var(--band-bg);
    flex-direction:column; align-items:flex-start; gap:0;
    padding:8px 20px 20px; border-bottom:1px solid var(--band-line);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:.18s ease;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links a{width:100%; padding-block:12px; border-bottom:1px solid var(--band-line);}
  .nav-toggle{display:inline-flex;}
  .nav-cta .btn span.full{display:none;}
}

/* ---------- nav products dropdown ---------- */
.nav-dropdown{position:relative; display:flex; align-items:center;}
.nav-drop-btn{
  color:var(--band-ink-soft); font-size:.9rem; font-weight:500;
  padding-block:4px; border-bottom:2px solid transparent;
}
.nav-drop-btn:hover{color:var(--band-ink); border-color:var(--band-accent);}
.nav-dropdown-active .nav-drop-btn{color:var(--band-ink); border-color:var(--band-accent);}
.nav-drop-toggle{
  background:none; border:none; color:var(--band-ink-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:1px; padding:0; flex:none;
}
.nav-drop-toggle:hover{color:var(--band-ink);}
.nav-drop-toggle svg{transition:transform .15s ease;}
.nav-dropdown.open .nav-drop-toggle svg, .nav-dropdown:hover .nav-drop-toggle svg{transform:rotate(180deg);}
.nav-drop-menu{
  position:absolute; top:calc(100% + 10px); left:0; background:var(--band-surface); border:1px solid var(--band-line);
  border-radius:12px; padding:8px; min-width:250px; box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:.15s ease; z-index:50;
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu{opacity:1; pointer-events:auto; transform:none;}
.nav-drop-cat{display:block; padding:10px 12px; border-radius:7px; font-size:.85rem; color:var(--band-ink-soft); width:auto; border-bottom:none !important;}
.nav-drop-cat:hover, .nav-drop-cat.active{background:var(--band-surface-2); color:var(--band-ink);}

/* MPO/MTP flyout submenu — opens to the right when hovering the "MPO/MTP"
   row inside the Products dropdown, listing its 12 individual product
   pages grouped the same way as the MPO hub page. */
.nav-drop-item{position:relative;}
.nav-drop-item.has-flyout{display:flex; align-items:center;}
.nav-drop-item.has-flyout .nav-drop-cat{flex:1;}
.nav-flyout-toggle{
  background:none; border:none; color:var(--band-ink-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:6px; flex:none;
}
.nav-flyout-toggle:hover{background:var(--band-surface-2); color:var(--band-ink);}
.nav-drop-item.flyout-open .nav-flyout-toggle{color:var(--band-ink);}
.nav-drop-item.flyout-open .nav-flyout-toggle svg{transform:rotate(90deg);}
/* left:100% with NO margin so the flyout's hit-box touches the trigger row
   edge-to-edge — a gap here (the old margin-left:8px) creates a dead pixel
   zone the pointer has to cross with nothing hoverable under it, which
   drops :hover on .nav-drop-item mid-transit and slams the flyout shut
   before the pointer reaches a product link. The 8px visual breathing room
   moves to inner padding-left instead, so it still looks the same but the
   hoverable box itself is contiguous with the trigger. */
.nav-flyout{
  position:absolute; left:100%; top:-8px; margin-left:0; padding:10px 10px 10px 18px;
  background:var(--band-surface); border:1px solid var(--band-line); border-radius:12px;
  min-width:300px; box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transform:translateX(-6px); transition:.15s ease; z-index:60;
}
.nav-drop-item.has-flyout:hover .nav-flyout,
.nav-drop-item.has-flyout .nav-flyout:hover{opacity:1; pointer-events:auto; transform:none;}
.nav-flyout-group{margin-bottom:6px;}
.nav-flyout-group:last-child{margin-bottom:0;}
.nav-flyout-group-label{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:var(--band-ink-faint); padding:6px 10px 4px;}
.nav-flyout a{display:block; padding:8px 10px; border-radius:7px; font-size:.82rem; color:var(--band-ink-soft); white-space:nowrap; border-bottom:none !important;}
.nav-flyout a:hover{background:var(--band-surface-2); color:var(--band-ink);}

@media (max-width:920px){
  .nav-dropdown{width:100%; flex-wrap:wrap; border-bottom:1px solid var(--band-line);}
  .nav-drop-btn{flex:1; padding-block:12px; border-bottom:none;}
  .nav-drop-toggle{width:36px; height:36px;}
  .nav-drop-menu{
    flex:0 0 100%; position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none; border:none;
    background:none; padding:0 0 8px 14px; max-height:0; overflow:hidden; transition:max-height .2s ease;
  }
  .nav-dropdown.open .nav-drop-menu{max-height:3000px;}
  .nav-drop-cat{border-bottom:1px solid var(--band-line) !important; padding-block:10px;}
  .nav-flyout-toggle{display:flex; width:36px; height:36px;}
  .nav-flyout{
    position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none; border:none; background:none;
    margin:0; min-width:0; padding:0 0 0 14px; max-height:0; overflow:hidden; transition:max-height .2s ease;
  }
  .nav-drop-item.flyout-open .nav-flyout{max-height:900px;}
  .nav-flyout a{white-space:normal; border-bottom:1px solid var(--band-line) !important;}
}
@media (min-width:921px){
  .nav-flyout-toggle{display:none;}
}

/* ---------- products.html summary page: sidebar + sections ---------- */
.products-layout{display:grid; grid-template-columns:250px 1fr; gap:36px; align-items:start;}
.products-sidebar{
  position:sticky; top:84px; display:flex; flex-direction:column; gap:2px;
  max-height:calc(100vh - 100px); overflow-y:auto;
}
/* Major categories are always bold/full-ink, whether active or not — only
   the accent color + left border + background distinguish the active one.
   Sub-items (below) are deliberately lighter and smaller so the two levels
   read as clearly different tiers at a glance, not just by indentation. */
.products-sidebar > a, .cat-label{
  display:block; padding:10px 14px; border-radius:8px; font-size:.88rem; font-weight:700; color:var(--ink);
  border-left:2px solid transparent;
}
.products-sidebar > a:hover, .cat-label:hover{background:var(--surface-2);}
.products-sidebar > a.active, .cat-label.active{color:var(--accent); border-color:var(--accent); background:var(--surface-2);}
.products-section{scroll-margin-top:84px; padding-block:34px; border-top:1px solid var(--line);}
.products-section:first-child{padding-top:0; border-top:none;}
.products-group-label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); margin:18px 0 10px;
}

/* Sidebar items with sub-categories (currently just MPO/MTP): clicking the
   category label expands/collapses its sub-item list in place, while still
   following its #anchor href to scroll the main content to that section —
   the two aren't mutually exclusive, so this is a plain class toggle on
   click rather than a preventDefault(). Leaf categories (no known
   sub-items yet) stay simple links, unchanged. */
.products-side-item{display:flex; flex-direction:column;}
.cat-label{display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer;}
.cat-label .chev{flex:none; transition:transform .18s ease; color:var(--ink-faint);}
.products-side-item.expanded .cat-label .chev{transform:rotate(90deg);}
.side-sub{
  max-height:0; overflow:hidden; transition:max-height .22s ease;
  margin:2px 0 2px 22px; padding-left:10px; border-left:1px solid var(--line);
}
.products-side-item.expanded .side-sub{max-height:600px;}
.side-sub-group{margin:6px 0 2px;}
.side-sub-group-label{
  display:block; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 10px 3px;
}
.side-sub a{
  display:block; padding:6px 10px; border-radius:6px; font-size:.8rem; font-weight:400; color:var(--ink-faint);
}
.side-sub a:hover{color:var(--ink); background:var(--surface-2);}
.side-sub a.active{color:var(--accent); font-weight:600;}

@media (max-width:860px){
  .products-layout{grid-template-columns:1fr;}
  .products-sidebar{
    position:static; flex-direction:column; max-height:none; overflow-y:visible;
    padding-bottom:4px; border-bottom:1px solid var(--line); margin-bottom:8px;
  }
  .products-sidebar > a, .cat-label{white-space:nowrap; border-left:none; border-bottom:2px solid transparent;}
  .products-sidebar > a.active, .cat-label.active{border-color:var(--accent);}
}

/* ---------- 8-card category grid (homepage) ---------- */
.grid-8{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:1080px){.grid-8{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-8{grid-template-columns:1fr;}}

/* ---------- dark band hero (home) ---------- */
.hero{
  background:var(--band-bg); color:var(--band-ink);
  position:relative; overflow:hidden;
  padding-block:min(14vh,110px) 74px;
}
.hero-beam{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(63,216,196,.16), transparent 60%),
    radial-gradient(40% 40% at 8% 90%, rgba(255,106,84,.10), transparent 65%);
}
.hero-beam svg{position:absolute; inset:0; width:100%; height:100%;}
.hero-inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
@media (max-width:920px){.hero-inner{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2rem, 4.6vw, 3.3rem); font-weight:800; line-height:1.08; margin-bottom:18px;}
.hero h1 em{font-style:normal; color:var(--band-accent);}
.hero p.lead{color:var(--band-ink-soft); font-size:1.05rem; max-width:52ch; margin-bottom:28px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px;}
.hero-stats{display:flex; flex-wrap:wrap; gap:28px;}
.hero-stat b{display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--band-ink);}
.hero-stat span{font-size:.78rem; color:var(--band-ink-faint);}
.hero-visual{
  background:var(--band-surface); border:1px solid var(--band-line); border-radius:16px;
  padding:22px; box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.hero-visual .row{display:flex; justify-content:space-between; align-items:center; padding-block:11px; border-bottom:1px dashed var(--band-line); font-size:.86rem;}
.hero-visual .row:last-child{border-bottom:none;}
.hero-visual .row b{color:var(--band-ink); font-weight:500;}
.hero-visual .row span{color:var(--band-ink-faint); font-family:var(--font-mono); font-size:.78rem;}
/* rows are real links to each item's product/category page (added
   2026-09-28) — subtle hover highlight + arrow so it reads as clickable
   without looking like a button; kept quiet at rest to match the original
   "quick spec glance" look Songbo liked. */
.hero-visual a.row{cursor:pointer; border-radius:8px; margin-inline:-10px; padding-inline:10px; transition:background-color .15s ease;}
.hero-visual a.row:hover{background:var(--band-surface-2);}
.hero-visual a.row:hover b{color:var(--band-accent);}
.hero-visual a.row span::after{content:""; display:inline-block; width:7px; height:7px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); opacity:0; transition:opacity .15s ease;}
.hero-visual a.row:hover span::after{opacity:.7;}
.pulse-dot{width:7px; height:7px; border-radius:50%; background:var(--band-accent); display:inline-block; margin-right:6px; box-shadow:0 0 0 0 rgba(14,95,168,.6); animation:pulse 2.2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,216,196,.5);}70%{box-shadow:0 0 0 8px rgba(63,216,196,0);}100%{box-shadow:0 0 0 0 rgba(63,216,196,0);}}
@media (prefers-reduced-motion: reduce){.pulse-dot{animation:none;}}

/* ---------- compact banner (category / about / contact pages) ---------- */
.banner{background:var(--band-bg); color:var(--band-ink); padding-block:38px 34px;}
.crumb{font-family:var(--font-mono); font-size:.76rem; color:var(--band-ink-faint); margin-bottom:14px; display:flex; gap:8px; align-items:center;}
.crumb a{color:var(--band-ink-soft);}
.crumb a:hover{color:var(--band-accent);}
.banner h1{font-size:clamp(1.5rem,3.4vw,2.1rem); font-weight:800; margin-bottom:8px;}
.banner p{color:var(--band-ink-soft); max-width:64ch; margin-bottom:0; font-size:.96rem;}

/* ---------- trust strip ---------- */
.trust-strip{background:var(--surface-2); border-block:1px solid var(--line);}
.trust-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;}
.trust-chip{
  display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--ink-soft);
  font-family:var(--font-mono); white-space:nowrap;
}
.trust-chip b{color:var(--ink); font-weight:600;}

/* ---------- category grid (home) ---------- */
.grid-6{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:980px){.grid-6{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-6{grid-template-columns:1fr;}}
.cat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow);
  transition:.18s ease; position:relative;
}
.cat-card:hover{transform:translateY(-3px); border-color:var(--accent);}
.cat-card .ic{width:38px; height:38px; color:var(--accent);}
.cat-card h3{font-size:1.02rem; font-weight:700;}
.cat-card p{font-size:.9rem; color:var(--ink-soft); margin-bottom:0; flex:1;}
.cat-card .go{font-size:.8rem; font-family:var(--font-mono); color:var(--accent); display:flex; align-items:center; gap:6px;}
.cat-card.wide{grid-column:span 2;}
@media (max-width:560px){.cat-card.wide{grid-column:span 1;}}

/* ---------- why grid ---------- */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:760px){.why-grid{grid-template-columns:1fr;}}
.why-item{display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface);}
.why-item .num{font-family:var(--font-mono); color:var(--accent); font-size:.8rem; flex:none; padding-top:2px;}
.why-item h4{font-size:.96rem; margin-bottom:6px;}
.why-item p{font-size:.9rem; color:var(--ink-soft); margin:0;}

/* ---------- scenario band ---------- */
.scn-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media (max-width:860px){.scn-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.scn-grid{grid-template-columns:1fr;}}
.scn-card{border:1px solid var(--line); border-radius:12px; padding:18px; background:var(--surface);}
.scn-card .tag{font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:8px; display:block;}
.scn-card h4{font-size:.94rem; margin-bottom:6px;}
.scn-card p{font-size:.9rem; color:var(--ink-soft); margin:0;}

/* ---------- section header ---------- */
/* Centered — changed 2026-09-28: Songbo pointed out that Product Matrix /
   Why Choose Us / Applications sat left-aligned while the closing "Get in
   Touch" band was centered, even though they read as parallel, equal-level
   sections. The old flex/space-between layout was for a right-side button
   (the home page's "Download Full Catalog" link) that no longer exists
   anywhere on the site (checked: no other page's .sec-head has a second
   element in it any more either), so there was nothing left actually
   needing the two-column layout. Centering brings every section header —
   on every page, not just the home page, since .sec-head is shared — into
   the same visual language as the CTA band, which is also the more common
   pattern for an intro sitting above a centered card/product grid. */
.sec-head{max-width:640px; margin-inline:auto; margin-bottom:28px; text-align:center;}
.sec-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem);}
.sec-head p{color:var(--ink-soft); font-size:.95rem; max-width:56ch; margin:8px auto 0;}

/* ---------- tabs ---------- */
.tabbar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:4px;}
.tab-btn{
  font-family:var(--font-body); font-weight:600; font-size:.86rem;
  color:var(--ink-soft); background:none; border:none; cursor:pointer;
  padding:10px 6px; position:relative;
}
.tab-btn::after{content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; background:transparent; transition:.15s ease;}
.tab-btn.active{color:var(--ink);}
.tab-btn.active::after{background:var(--signal);}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.tab-panel.active{animation:none;}}

/* ---------- product grid/card (grouped multi-model listing) ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:920px){.prod-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.prod-grid{grid-template-columns:1fr;}}
.prod-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.prod-card .glyph{width:100%; height:64px; display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--accent-soft); border-radius:8px;}
.prod-card .glyph svg{width:70%; height:70%;}
.prod-card h4{font-size:.94rem; font-weight:700;}
.prod-card .models{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); line-height:1.7;}
.prod-card .models b{color:var(--ink-soft); font-weight:500;}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 2px;}
.chip{font-family:var(--font-mono); font-size:.73rem; padding:4px 9px; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--line);}
.chip.on{background:var(--accent-soft); color:var(--accent); border-color:transparent;}
.prod-card p.desc{font-size:.82rem; color:var(--ink-soft); margin:0; flex:1;}
.prod-card .cta-row{display:flex; gap:8px; margin-top:4px;}
a.prod-card-link{text-decoration:none; color:inherit; transition:.18s ease;}
a.prod-card-link:hover{transform:translateY(-3px); border-color:var(--accent);}
a.prod-card-link .go{font-size:.78rem; font-family:var(--font-mono); color:var(--accent); display:flex; align-items:center; gap:6px;}

/* ---------- spec-sheet card (image top / key-value spec table below,
   datasheet-style) — used by Instruments & Tools, which Songbo asked to
   show as one flat page instead of per-item sub-pages ---------- */
.spec-card .glyph{height:88px;}
.spec-table{width:100%; border-collapse:collapse; font-size:.83rem;}
.spec-table th{text-align:left; font-weight:500; color:var(--ink-faint); padding:4px 8px 4px 0; white-space:nowrap; vertical-align:top; width:44%;}
.spec-table td{text-align:left; color:var(--ink-soft); padding:4px 0; border-bottom:1px solid var(--line);}
.spec-table tr:last-child th, .spec-table tr:last-child td{border-bottom:none;}

/* ---------- gap / caution callouts ---------- */
.callout{border-radius:10px; padding:14px 16px; font-size:.87rem; margin-bottom:16px; border:1px solid transparent;}
.callout h4{margin:0 0 6px; font-size:.86rem; font-family:var(--font-body); font-weight:700;}
.callout p, .callout li{margin-bottom:4px;}
.callout.note{background:var(--accent-soft); color:var(--accent);}
.callout.warn{background:var(--signal-soft); color:var(--signal);}

/* ---------- placeholder marker (for un-confirmed real content) ---------- */
.ph{
  display:inline-block; font-family:var(--font-mono); font-size:.68rem;
  background:var(--signal-soft); color:var(--signal); padding:1px 7px; border-radius:5px; margin-left:6px; vertical-align:2px;
}

/* ---------- mena table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; font-size:.86rem; background:var(--surface);}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{background:var(--surface-2); font-family:var(--font-mono); font-weight:500; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
tbody tr:last-child td{border-bottom:none;}

/* ---------- cta band ---------- */
.cta-band{background:var(--band-bg); color:var(--band-ink); text-align:center; padding-block:56px;}
.cta-band h2{font-size:clamp(1.4rem,3vw,2rem); margin-bottom:10px;}
.cta-band p{color:var(--band-ink-soft); max-width:52ch; margin:0 auto 24px;}
.cta-band .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* ---------- footer ---------- */
footer.site-footer{background:var(--band-bg); color:var(--band-ink-soft); padding-block:44px 30px; border-top:1px solid var(--band-line);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;}}
.foot-grid h5{color:var(--band-ink); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono); margin-bottom:14px; font-weight:500;}
.foot-grid a, .foot-grid p{display:block; font-size:.86rem; margin-bottom:9px; color:var(--band-ink-soft);}
.foot-grid a:hover{color:var(--band-accent);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:34px; padding-top:22px; border-top:1px solid var(--band-line); font-size:.78rem; color:var(--band-ink-faint); font-family:var(--font-mono);}

/* ---------- form ---------- */
.form-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:26px; box-shadow:var(--shadow);}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 12px;
  font-family:var(--font-body); font-size:.92rem; background:var(--bg); color:var(--ink);
}
.field textarea{resize:vertical; min-height:96px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}

.wa-btn{
  display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#06210f;
  padding:11px 18px; border-radius:8px; font-weight:600; font-size:.88rem;
}
.wa-btn:hover{filter:brightness(1.05);}

/* ---------- floating WhatsApp button ---------- */
/* Added 2026-09-28: fixed to the right edge of the viewport on every page,
   independent of scroll position — Songbo asked for a dedicated WhatsApp
   entry point that's always reachable, instead of only living inside the
   Contact page's form card. */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  background:#25D366; color:#06210f;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{transform:scale(1.06); box-shadow:0 8px 22px rgba(0,0,0,.28);}
@media (max-width:640px){.wa-float{right:16px; bottom:16px; width:48px; height:48px;}}