/* ================================================================
   Shanghai Hangbo Alloy Group — Global B2B Site
   Design tokens
   ================================================================ */
:root{
  --ink:#08182A;
  --ink-2:#0F2740;
  --ink-3:#16344F;
  --steel:#1B4F8A;
  --steel-l:#2E6FB5;
  --accent:#C07A1C;
  --accent-l:#E0A63C;
  --line:#E2E8F0;
  --line-2:#CBD5E1;
  --bg:#FFFFFF;
  --bg-2:#F6F8FB;
  --bg-3:#EEF2F7;
  --text:#12202E;
  --muted:#5A6B7C;
  --ok:#0E7C5A;

  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(8,24,42,.06),0 1px 3px rgba(8,24,42,.05);
  --shadow:0 4px 6px -1px rgba(8,24,42,.07),0 10px 24px -6px rgba(8,24,42,.10);
  --shadow-lg:0 18px 40px -12px rgba(8,24,42,.22);

  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;

  --maxw:1200px;
  --gut:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--sans);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:var(--steel);text-decoration:none;}
a:hover{color:var(--steel-l);}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.2;letter-spacing:-.02em;color:var(--ink);font-weight:700;}
h1{font-size:clamp(2rem,4.2vw,3.25rem);letter-spacing:-.03em;}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);}
h3{font-size:1.16rem;}
p{margin:0 0 1rem;}
ul,ol{margin:0 0 1rem;padding-left:1.15rem;}
li{margin:.3em 0;}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}
code{font-family:var(--mono);font-size:.875em;background:var(--bg-3);padding:.12em .4em;border-radius:4px;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);}
.container-narrow{max-width:820px;margin:0 auto;padding:0 var(--gut);}
.section{padding:clamp(3.25rem,6vw,5.5rem) 0;}
.section--tight{padding:clamp(2.25rem,4vw,3.25rem) 0;}
.section--alt{background:var(--bg-2);}
.section--ink{background:var(--ink);color:#DCE6F0;}
.section--ink h2,.section--ink h3{color:#fff;}
.section--ink p{color:#A9BDD1;}

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);display:block;}
.section-head{max-width:760px;margin-bottom:2.75rem;}
.section-head p{color:var(--muted);font-size:1.06rem;margin-bottom:0;}
.section--ink .section-head p{color:#A9BDD1;}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head--center .eyebrow{justify-content:center;}

/* ---------- topbar ---------- */
.topbar{background:var(--ink);color:#93A8BC;font-size:.82rem;border-bottom:1px solid rgba(255,255,255,.07);}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:40px;flex-wrap:wrap;}
.topbar a{color:#C6D5E4;}
.topbar a:hover{color:#fff;}
.topbar-left{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center;}
.topbar-item{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;}
.topbar-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none;}
.lang-switch{display:inline-flex;border:1px solid rgba(255,255,255,.2);border-radius:999px;overflow:hidden;}
.lang-switch button{
  background:none;border:0;color:#93A8BC;font:inherit;font-size:.78rem;font-weight:600;
  padding:.2rem .7rem;cursor:pointer;letter-spacing:.03em;
}
.lang-switch button[aria-pressed="true"]{background:var(--accent);color:#fff;}
.lang-switch button:hover{color:#fff;}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:74px;}
.brand{display:flex;align-items:center;gap:.75rem;flex:none;}
.brand-mark{width:42px;height:42px;flex:none;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;}
.brand-sub{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;}

.nav{display:flex;align-items:center;gap:.35rem;margin-left:auto;}
.nav a{
  color:var(--text);font-size:.93rem;font-weight:600;padding:.55rem .8rem;border-radius:var(--r-sm);
  position:relative;white-space:nowrap;
}
.nav a:hover{background:var(--bg-3);color:var(--ink);}
.nav a.is-active{color:var(--steel);background:rgba(27,79,138,.08);}
.nav-toggle{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.45rem .6rem;cursor:pointer;}
.nav-toggle svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-size:.94rem;font-weight:700;line-height:1;
  padding:.85rem 1.5rem;border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;transition:.18s ease;white-space:nowrap;text-align:center;
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:#A96812;color:#fff;transform:translateY(-1px);box-shadow:var(--shadow);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-dark:hover{background:var(--ink-3);color:#fff;transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--steel);color:var(--steel);background:#fff;}
.btn-onink{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.28);}
.btn-onink:hover{background:rgba(255,255,255,.16);color:#fff;}
.btn-sm{padding:.6rem 1.05rem;font-size:.86rem;}
.btn-block{width:100%;}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(900px 520px at 82% -8%,rgba(192,122,28,.26),transparent 62%),
    linear-gradient(160deg,rgba(8,24,42,.90) 0%,rgba(15,39,64,.84) 48%,rgba(14,38,60,.80) 100%),
    url("../img/gallery/hero-rings.jpg") center 42% / cover no-repeat,
    linear-gradient(160deg,#08182A 0%,#0F2740 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 15%,transparent 78%);
}
.hero .container{position:relative;z-index:2;padding-top:clamp(3.5rem,7vw,6rem);padding-bottom:clamp(3.5rem,7vw,6rem);}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;}
.hero h1{color:#fff;margin-bottom:1.1rem;}
.hero h1 .hl{color:var(--accent-l);}
.hero-lede{font-size:clamp(1rem,1.5vw,1.16rem);color:#B7C7D8;max-width:60ch;margin-bottom:2rem;}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2.25rem;}
.hero-badges{display:flex;gap:.5rem;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#D3E0EC;text-transform:uppercase;
}
.pill svg{width:13px;height:13px;stroke:var(--accent-l);fill:none;stroke-width:2.4;}

/* hero side card */
.spec-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:1.5rem;backdrop-filter:blur(6px);box-shadow:var(--shadow-lg);
}
.spec-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.13);}
.spec-card-head span:first-child{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:#8FA6BB;font-weight:700;}
.spec-rows{display:flex;flex-direction:column;gap:.85rem;}
.spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;}
.spec-row dt{font-size:.86rem;color:#A9BDD1;margin:0;}
.spec-row dd{margin:0;font-weight:700;color:#fff;font-size:.95rem;text-align:right;}
.spec-row dd small{display:block;font-weight:500;font-size:.74rem;color:#8FA6BB;letter-spacing:.02em;}

/* ---------- stats strip ---------- */
.stats{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.09);}
.stat{background:var(--ink-2);padding:1.6rem 1.25rem;text-align:center;}
.stat b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;letter-spacing:-.03em;line-height:1.1;}
.stat span{font-size:.79rem;color:#8FA6BB;letter-spacing:.05em;text-transform:uppercase;font-weight:600;}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:var(--gut);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;
  transition:.2s ease;position:relative;height:100%;
}
.card:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px);}
.card h3{margin-bottom:.45rem;}
.card p{color:var(--muted);font-size:.93rem;margin-bottom:.8rem;}
.card ul{font-size:.9rem;color:var(--muted);margin-bottom:0;}
.card-icon{
  width:46px;height:46px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(27,79,138,.12),rgba(192,122,28,.12));
  border:1px solid var(--line);margin-bottom:1.05rem;
}
.card-icon svg{width:23px;height:23px;stroke:var(--steel);fill:none;stroke-width:1.7;}
.card-tag{
  position:absolute;top:1.35rem;right:1.35rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  color:var(--accent);background:rgba(192,122,28,.1);padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;
}
.card-link{font-size:.87rem;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;color:var(--steel);}
.card-link::after{content:"→";transition:transform .18s;}
.card:hover .card-link::after{transform:translateX(3px);}

/* ---------- article cards (Knowledge section) ---------- */
.article-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:.2s ease;height:100%;
  text-decoration:none;color:inherit;
}
.article-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--line-2);}
.article-cover{
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
}
.article-cover::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 70%);
}
.article-cover svg{width:88px;height:88px;stroke:rgba(255,255,255,.85);fill:none;stroke-width:1.4;position:relative;z-index:2;}
.article-cover[data-tone="ni"]{background:linear-gradient(135deg,#0F2740 0%,#1B4F8A 100%);}
.article-cover[data-tone="ss"]{background:linear-gradient(135deg,#1F3A36 0%,#3E7B6E 100%);}
.article-cover[data-tone="dx"]{background:linear-gradient(135deg,#1E2A3A 0%,#4F6A8A 100%);}
.article-cover[data-tone="ph"]{background:linear-gradient(135deg,#3A2412 0%,#A6681A 100%);}
.article-cover[data-tone="wd"]{background:linear-gradient(135deg,#2A1B33 0%,#7A3F7E 100%);}
.article-body{padding:1.35rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.article-meta{display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:var(--muted);font-weight:600;flex-wrap:wrap;}
.chip-mini{
  display:inline-block;background:rgba(192,122,28,.12);color:var(--accent);
  font-weight:700;font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:4px;
}
.article-card h3{font-size:1.05rem;line-height:1.35;margin:0;}
.article-card p{font-size:.86rem;color:var(--muted);margin:0;}
.article-card .card-link{margin-top:auto;padding-top:.4rem;}

/* ---------- article page (single post) ---------- */
.article-page{padding:clamp(2.25rem,4vw,3.5rem) 0 0;}
.article-header{margin-bottom:2.25rem;}
.article-header .article-meta{margin-bottom:1.1rem;font-size:.82rem;}
.article-header h1{font-size:clamp(1.85rem,3.2vw,2.6rem);margin-bottom:.7rem;}
.article-lede{font-size:1.18rem;color:var(--muted);max-width:60ch;margin-bottom:1.1rem;line-height:1.5;}
.article-byline{font-size:.85rem;color:var(--muted);padding-top:1.1rem;border-top:1px solid var(--line);}
.article-byline strong{color:var(--ink);}

.prose h2{font-size:1.45rem;margin:2.25rem 0 .75rem;color:var(--ink);letter-spacing:-.015em;scroll-margin-top:90px;}
.prose h3{font-size:1.1rem;margin:1.6rem 0 .4rem;color:var(--ink);}
.prose p{margin-bottom:1.05rem;font-size:1rem;line-height:1.75;}
.prose ul,.prose ol{margin:0 0 1.15rem;padding-left:1.3rem;}
.prose li{margin:.35em 0;}
.prose table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.92rem;}
.prose th,.prose td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--line);}
.prose th{color:var(--ink);background:var(--bg-2);font-weight:700;}
.prose blockquote{
  border-left:3px solid var(--accent);background:var(--bg-2);
  padding:.85rem 1.1rem;margin:1.1rem 0;color:var(--text);font-size:.95rem;
}
.prose blockquote p{margin:0;}
.prose a{color:var(--steel);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.prose a:hover{color:var(--steel-l);}
.prose .key-fact{
  background:linear-gradient(135deg,var(--bg-2),#fff);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:1.1rem 1.25rem;margin:1.4rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.prose .key-fact p{margin:0;}
.prose .key-fact strong{color:var(--ink);}

.article-cta{
  margin:2.5rem 0;padding:1.6rem 1.75rem;
  background:linear-gradient(135deg,var(--ink),var(--ink-3));
  border-radius:var(--r-lg);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.article-cta h3{color:#fff;margin:0 0 .3rem;font-size:1.15rem;}
.article-cta p{color:#A9BDD1;margin:0;font-size:.92rem;}

.related-articles{margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line);}
.related-articles h2{font-size:1.3rem;margin-bottom:1.5rem;}

.toc{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.35rem;margin:1.5rem 0;
}
.toc b{display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-weight:700;}
.toc ol{margin:0;padding-left:1.15rem;font-size:.9rem;}
.toc li{margin:.3em 0;}
.toc a{color:var(--ink);text-decoration:none;}
.toc a:hover{color:var(--steel);text-decoration:underline;}

/* ---------- grade spotlight ---------- */
.spotlight{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;height:100%;}
.spotlight-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.4rem;}
.spotlight h3{font-size:1.3rem;margin-bottom:.15rem;}
.spotlight .uns{font-family:var(--mono);font-size:.83rem;color:var(--accent);font-weight:700;letter-spacing:.02em;}
.spotlight p{font-size:.93rem;color:var(--muted);}
.mini-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:1rem;}
.mini-table th,.mini-table td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;}
.mini-table th{color:var(--muted);font-weight:600;width:44%;font-size:.8rem;letter-spacing:.02em;}
.mini-table td{color:var(--text);font-weight:600;}
.mini-table tr:last-child th,.mini-table tr:last-child td{border-bottom:0;}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:680px;}
table.data thead th{
  background:var(--bg-3);color:var(--ink);text-align:left;font-size:.75rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1rem;border-bottom:1px solid var(--line-2);white-space:nowrap;
}
table.data td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;}
table.data tbody tr:hover{background:var(--bg-2);}
table.data tbody tr:last-child td{border-bottom:0;}
table.data .g{font-weight:700;color:var(--ink);}
table.data .u{font-family:var(--mono);font-size:.82rem;color:var(--accent);white-space:nowrap;}
table.data .dim{color:var(--muted);}

.chip-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.chip{
  font:inherit;font-size:.85rem;font-weight:700;padding:.5rem 1rem;border-radius:999px;
  border:1px solid var(--line-2);background:#fff;color:var(--muted);cursor:pointer;transition:.15s;
}
.chip:hover{border-color:var(--steel);color:var(--steel);}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}

/* ---------- timeline / process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);counter-reset:s;}
.step{position:relative;padding-top:3.1rem;}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:0;left:0;font-size:1.5rem;font-weight:800;color:var(--accent);
  font-family:var(--mono);letter-spacing:-.04em;
}
.step::after{content:"";position:absolute;top:1.05rem;left:3.2rem;right:0;height:1px;background:var(--line-2);}
.step:last-child::after{display:none;}
.step h4{margin:0 0 .35rem;font-size:1rem;color:var(--ink);}
.step p{font-size:.88rem;color:var(--muted);margin:0;}
.section--ink .step::after{background:rgba(255,255,255,.16);}
.section--ink .step h4{color:#fff;}
.section--ink .step p{color:#A9BDD1;}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;}
.check-list{list-style:none;padding:0;}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--muted);}
.check-list li strong{color:var(--text);}
.check-list svg{width:18px;height:18px;flex:none;margin-top:.22rem;stroke:var(--ok);fill:none;stroke-width:2.6;}
.panel{
  background:linear-gradient(150deg,var(--bg-2),#fff);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.75rem;box-shadow:var(--shadow-sm);
}
.panel-ink{background:linear-gradient(150deg,var(--ink),var(--ink-3));border-color:rgba(255,255,255,.12);color:#DCE6F0;}
.panel-ink h3,.panel-ink h4{color:#fff;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--ink) 0%,var(--ink-3) 100%);
  border-radius:var(--r-lg);padding:clamp(2rem,4vw,3.25rem);color:#fff;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:center;
  position:relative;overflow:hidden;
}
.cta-band::after{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(192,122,28,.35),transparent 70%);
}
.cta-band h2{color:#fff;margin-bottom:.5rem;}
.cta-band p{color:#A9BDD1;margin-bottom:0;}
.cta-actions{display:flex;flex-direction:column;gap:.7rem;position:relative;z-index:2;}

/* ---------- forms ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;}
.field{display:flex;flex-direction:column;gap:.35rem;}
.field--full{grid-column:1/-1;}
.field label{font-size:.82rem;font-weight:700;color:var(--ink);letter-spacing:.01em;}
.field label .req{color:#C0392B;}
.field input,.field select,.field textarea{
  font:inherit;font-size:.94rem;padding:.72rem .85rem;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:#fff;color:var(--text);width:100%;transition:.15s;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--steel);box-shadow:0 0 0 3px rgba(27,79,138,.13);}
.field .hint{font-size:.75rem;color:var(--muted);}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.8rem;color:var(--muted);}
.consent input{width:auto;flex:none;margin-top:.25rem;}
.form-note{font-size:.8rem;color:var(--muted);margin-top:1rem;}
.form-status{margin-top:1rem;padding:.85rem 1rem;border-radius:var(--r-sm);font-size:.88rem;font-weight:600;display:none;}
.form-status.is-ok{display:block;background:rgba(14,124,90,.09);color:#0B6349;border:1px solid rgba(14,124,90,.28);}
.form-status.is-err{display:block;background:rgba(192,57,43,.08);color:#8E2C21;border:1px solid rgba(192,57,43,.26);}

/* ---------- contact cards ---------- */
.contact-card{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;}
.contact-card svg{width:20px;height:20px;flex:none;margin-top:.2rem;stroke:var(--accent);fill:none;stroke-width:1.8;}
.contact-card b{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;}
.contact-card span,.contact-card a{font-size:.98rem;font-weight:600;color:var(--ink);word-break:break-word;}

/* ---------- page hero ---------- */
.page-hero{background:linear-gradient(150deg,var(--ink) 0%,var(--ink-3) 100%);color:#fff;padding:clamp(2.75rem,5vw,4rem) 0;position:relative;overflow:hidden;}
.page-hero::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(100% 120% at 90% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(100% 120% at 90% 0%,#000,transparent 70%);
}
.page-hero .container{position:relative;z-index:2;}
.page-hero h1{color:#fff;margin-bottom:.5rem;}
.page-hero p{color:#A9BDD1;max-width:70ch;margin-bottom:0;}
.breadcrumb{font-size:.78rem;color:#7B93A9;margin-bottom:1rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;}
.breadcrumb a{color:#A9BDD1;}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#93A8BC;padding:clamp(2.75rem,5vw,4rem) 0 0;font-size:.9rem;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;}
.site-footer h4{color:#fff;font-size:.79rem;letter-spacing:.13em;text-transform:uppercase;margin-bottom:1rem;}
.site-footer a{color:#A9BDD1;}
.site-footer a:hover{color:#fff;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin:.45em 0;}
.footer-brand p{color:#7B93A9;font-size:.86rem;max-width:38ch;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.25rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:#7B93A9;}
.footer-bottom span{display:block;}

/* ---------- prose (for docs/legal) ---------- */
.prose{font-size:.98rem;color:var(--muted);}
.prose h2{font-size:1.3rem;margin-top:2.25rem;color:var(--ink);}
.prose h3{font-size:1.05rem;margin-top:1.75rem;color:var(--ink);}
.prose strong{color:var(--text);}

/* ---------- utils ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.85rem}
[hidden]{display:none !important}

/* ---------- reveal animation ----------
   Only hidden when JS has added the .js flag to <html>, so content is
   always visible for no-JS visitors and crawlers. */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
html.js .reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;}
  .step:nth-child(2)::after{display:none;}
  .split{grid-template-columns:1fr;}
  .cta-band{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--gut) 1.1rem;margin:0;
    box-shadow:var(--shadow);display:none;
  }
  .nav.is-open{display:flex;}
  .nav a{padding:.85rem .5rem;border-bottom:1px solid var(--line);border-radius:0;}
  .nav .btn{margin-top:.75rem;border-radius:var(--r-sm);}
  .site-header .container{position:relative;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .step::after{display:none;}
  .topbar-left{font-size:.78rem;gap:.85rem;}
}
@media (max-width:560px){
  :root{--gut:18px;}
  .grid-4{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-cta .btn{width:100%;}
  .brand-sub{display:none;}
}

/* ---------- certifications ---------- */
.cert-rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.25rem;margin-top:2.5rem;
}
.cert-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.cert-card:hover{
  transform:translateY(-4px);border-color:var(--accent);
  box-shadow:0 14px 34px rgba(8,24,42,.12);
}
.cert-card__img{
  display:block;background:#fff;border-bottom:1px solid var(--line);
  aspect-ratio:1/1.38;overflow:hidden;
}
.cert-card__img img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  padding:.7rem;transition:transform .3s ease;
  filter:saturate(1.05);
}
.cert-card:hover .cert-card__img img{transform:scale(1.04);}
.cert-card__body{display:block;padding:1rem 1.1rem 1.15rem;}
.cert-card__body b{
  display:block;font-size:1rem;color:var(--ink);margin-bottom:.35rem;
  letter-spacing:-.01em;
}
.cert-card__body > span{display:block;font-size:.83rem;line-height:1.55;color:var(--muted);}
.cert-card__no{
  margin-top:.6rem;font-size:.75rem;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums;
}

/* 公司工商信息 */
.cred-table{
  margin-top:3rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;padding:1.75rem 1.9rem;
}
.cred-table h3{margin-bottom:1.1rem;font-size:1.15rem;}
.cred-table dl{margin:0;}
.cred-table dl > div{
  display:grid;grid-template-columns:minmax(140px,26%) 1fr;gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--line);
}
.cred-table dl > div:first-child{border-top:0;padding-top:0;}
.cred-table dt{font-weight:600;color:var(--ink);font-size:.88rem;}
.cred-table dd{margin:0;font-size:.88rem;line-height:1.6;color:var(--muted);}

/* 公司简介：完整 Logo */
.cert-logo{
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:2rem;box-shadow:var(--shadow-sm);
}
.cert-logo img{max-width:100%;width:340px;height:auto;}

/* 工商信息小表 */
.cred-mini{margin:1.5rem 0 0;}
.cred-mini dl{margin:0;}
.cred-mini > div,
.cred-mini dl > div{
  display:grid;grid-template-columns:minmax(120px,34%) 1fr;gap:1rem;
  padding:.5rem 0;border-top:1px solid var(--line);
}
.cred-mini dl > div:first-child{border-top:0;}
.cred-mini dt{font-weight:600;color:var(--ink);font-size:.85rem;}
.cred-mini dd{margin:0;font-size:.85rem;color:var(--muted);}

/* 首页证书信任条 */
.cred-strip{
  background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.5rem 0;
}
.cred-strip .container{
  display:flex;align-items:center;justify-content:center;
  gap:1.5rem 2.4rem;flex-wrap:wrap;
}
.cred-strip__label{
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}
.cred-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;color:var(--ink);
  padding:.42rem .85rem;background:var(--bg);
  border:1px solid var(--line-2);border-radius:999px;
}
.cred-chip svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2.2;flex:none;}

@media (max-width:860px){
  .cred-table dl > div{grid-template-columns:1fr;gap:.2rem;}
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(4,14,24,.92);
  display:none;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);cursor:zoom-out;
}
.lightbox.is-open{display:flex;}
.lightbox img{
  max-width:min(1080px,94vw);max-height:86vh;width:auto;
  background:#fff;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__cap{
  position:absolute;left:0;right:0;bottom:clamp(1rem,4vw,2.6rem);
  text-align:center;color:#B9CBDD;font-size:.85rem;padding:0 1rem;
}
.lightbox__close{
  position:absolute;top:1rem;right:1.2rem;width:42px;height:42px;
  border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lightbox__close svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
html.lb-open{overflow:hidden;}

/* ---------- FAQ 文章列表 ---------- */
.is-hidden{display:none !important;}
.faq-list{
  list-style:none;margin:0;padding:0;counter-reset:faq;
  max-width:880px;margin-inline:auto;
}
.faq-item{
  padding:1.4rem 0 1.5rem;border-top:1px solid var(--line);
}
.faq-item:first-child{border-top:0;padding-top:.25rem;}
.faq-item__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:.55rem;}
.faq-item__no{
  flex:none;font-weight:800;font-size:.82rem;color:var(--accent);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
  padding-top:.18rem;
}
.faq-item__head h3{
  margin:0;font-size:1.06rem;line-height:1.4;color:var(--ink);
}
.faq-item > p{
  margin:0 0 0 calc(1rem + 1rem);font-size:.93rem;line-height:1.7;color:var(--muted);
}
@media (max-width:560px){
  .faq-item > p{margin-left:0;}
}

/* ---------- 工厂/仓库图库 ---------- */
.media-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
}
.media-grid .media-tile:nth-child(1),
.media-grid .media-tile:nth-child(6){grid-column:span 2;grid-row:span 2;}
.media-tile{
  position:relative;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--bg-3);
  aspect-ratio:1/1;display:block;
}
.media-tile--wide{aspect-ratio:auto;}
.media-tile img,.media-tile video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .35s ease;
}
.media-tile:hover img{transform:scale(1.04);}
.media-tile video{object-fit:cover;}
.media-tile__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:.6rem .85rem;font-size:.76rem;font-weight:600;color:#fff;
  background:linear-gradient(transparent,rgba(8,24,42,.78));
  letter-spacing:.02em;
}
/* 视频网格：等分、16:9、封面占位 */
.media-grid--video{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.media-grid--video .media-tile,
.media-grid--video .media-tile:nth-child(1),
.media-grid--video .media-tile:nth-child(6){
  grid-column:auto;grid-row:auto;aspect-ratio:16/9;
}
.media-tile--video{background:#0F2740;cursor:pointer;}
.media-tile--video video{object-fit:cover;}
.media-tile--video:hover video{transform:scale(1.02);}
.media-note{
  text-align:center;font-size:.8rem;color:var(--muted);
  margin-top:.9rem;
}
@media (max-width:860px){
  .media-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .media-grid{grid-template-columns:1fr 1fr;}
  .media-grid .media-tile:nth-child(1),
  .media-grid .media-tile:nth-child(6){grid-column:span 2;grid-row:auto;}
}

/* ---------- 404 ---------- */
.nf-box{max-width:760px;margin:0 auto;text-align:center;}
.nf-code{
  font-size:clamp(4.5rem,12vw,8rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--accent,#C07A1C),var(--steel,#2E6FB5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf-box h1{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.9rem;line-height:1.25;}
.nf-lede{font-size:1.06rem;color:var(--muted);max-width:56ch;margin:0 auto 2.2rem;line-height:1.6;}
.nf-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1rem;margin-bottom:2.2rem;text-align:left;
}
.nf-card{
  display:block;padding:1.15rem 1.25rem;border:1px solid var(--line,#E3E8EF);
  border-radius:12px;background:#fff;text-decoration:none;color:inherit;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.nf-card:hover{border-color:var(--accent,#C07A1C);box-shadow:0 8px 24px rgba(20,40,80,.09);transform:translateY(-2px);}
.nf-card b{display:block;font-size:1rem;margin-bottom:.3rem;color:var(--ink);}
.nf-card span{font-size:.88rem;color:var(--muted);line-height:1.5;}
.nf-cta{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;}

/* ---------- print ---------- */
@media print{
  .site-header,.topbar,.cta-band,.site-footer,.nav-toggle{display:none !important;}
  body{color:#000;}
  .card,.panel,.table-wrap{box-shadow:none;border-color:#999;}
}