/* ===== NHH Barrier Masterbatch — Marketing site ===== */
:root{
  --ink:#0f2a33; --ink2:#1b3b45; --teal:#0b6e6e; --teal2:#0e8a88;
  --accent:#e9a23b; --sky:#eef4f5; --line:#dce6e8; --bg:#fbfcfc;
  --muted:#5d737b; --white:#ffffff; --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--teal2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.muted{color:var(--muted)}
.tiny{font-size:.82rem;letter-spacing:.02em}
.kick{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal2)}
h1,h2,h3,h4{line-height:1.18;font-weight:800;letter-spacing:0;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.5rem,3vw,2.2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}
/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--ink);white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--teal),var(--teal2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.nav ul{display:flex;gap:18px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.nav ul li a{font-weight:600;color:var(--ink2);padding:7px 1px;border-bottom:2px solid transparent}
.nav ul li a:hover{border-color:var(--accent);color:var(--ink)}
.nav .tools{display:flex;align-items:center;gap:10px;margin-left:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--radius);padding:10px 16px;font-weight:700;font-size:.92rem;cursor:pointer;transition:.15s}
.btn.primary{background:var(--teal);color:#fff}
.btn.primary:hover{background:var(--teal2)}
.btn.ghost{border-color:var(--line);color:var(--ink2);background:#fff}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn.accent{background:var(--accent);color:#2a2010}
button.lang{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-weight:700;font-size:.82rem;cursor:pointer;color:var(--ink)}
button.lang:hover{border-color:var(--teal)}
/* hero */
.hero{padding:70px 0 46px;background:linear-gradient(180deg,#fff, #eef4f5)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero .badge{display:inline-flex;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.8rem;font-weight:600;color:var(--ink2);margin-bottom:18px}
.hero .badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.hero-visual{position:relative;border-radius:var(--radius);overflow:hidden;background:#0f2a33;color:#fff;min-height:360px;display:flex;align-items:center;justify-content:center}
.hero-visual svg{width:100%;height:100%;object-fit:cover}
.hero-visual .caption{position:absolute;left:16px;bottom:14px;right:16px;font-size:.82rem;background:rgba(15,42,51,.72);padding:8px 12px;border-radius:7px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 40px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.stat .n{font-size:1.8rem;font-weight:900;color:var(--teal)}
.stat .l{font-size:.82rem;color:var(--muted)}
/* sections */
section{padding:56px 0}
.section-head{max-width:760px;margin:0 auto 34px;text-align:center}
.section-head .kick{display:block;margin-bottom:8px}
.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;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card h3{margin-top:0}
.card .icon{width:46px;height:46px;border-radius:8px;background:var(--sky);display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:14px}
.card .icon svg{width:26px;height:26px}
.pill{display:inline-block;background:var(--sky);color:var(--teal);border-radius:999px;padding:3px 11px;font-size:.75rem;font-weight:700;margin:2px 3px 2px 0}
/* data table */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;font-size:.92rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#0f2a33;color:#fff;font-weight:700}
tbody tr:nth-child(even){background:#f7fafa}
td b{color:var(--teal)}
.table-wrap{margin:20px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
/* callout */
.callout{background:#fff8ec;border:1px solid #f1d9a8;border-radius:var(--radius);padding:16px 18px;color:#5a4310;font-size:.92rem}
/* charts */
.chart{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}
.chart .title{font-weight:800;margin-bottom:6px}
.chart .note{font-size:.78rem;color:var(--muted)}
/* product hero */
.band{background:#0f2a33;color:#fff;padding:52px 0}
.band h1,.band h2{color:#fff}
.band .kick{color:var(--accent)}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.accent-bar{height:4px;width:64px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--teal2))}
/* footer */
footer.site{background:#0f2a33;color:#cfe0e3;padding:46px 0 30px;margin-top:0}
footer.site a{color:#cfe0e3}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;margin-bottom:24px}
footer.site h4{color:#fff;font-size:.92rem}
footer.site .legal{font-size:.76rem;color:#8ba6ab;border-top:1px solid #24454e;padding-top:18px}
/* contact */
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;font:inherit;background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aside{background:var(--sky);border-radius:var(--radius);padding:26px}
.aside h3{margin-top:0}
/* language toggle behavior */
.en,.cn{display:inline}
.lang-en,.lang-cn{display:block}
[data-lang=en] .cn{display:none!important}
[data-lang=en] .lang-cn{display:none!important}
[data-lang=cn] .en{display:none!important}
[data-lang=cn] .lang-en{display:none!important}
/* responsive */
.menu-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.4rem;color:var(--ink)}
@media(max-width:900px){
  .hero-grid,.form-grid{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .nav ul{position:fixed;inset:66px 0 auto 0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 22px;gap:14px;display:none}
  .nav.open ul{display:flex}
  .menu-toggle{display:block}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}