/* ==========================================================================
   POWERALLOY — Fuzhou Baorui Import & Export Trade Co., Ltd.
   Shared stylesheet. Linked by index.html and products.html.
   ========================================================================== */

:root{
  --ink:#1b1b1b;
  --muted:#5c6166;
  --line:#e4e4e1;
  --navy:#16324f;
  --paper:#ffffff;
  --wash:#f7f6f3;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1000px;margin:0 auto;padding:0 28px}

/* ---------- masthead ---------- */
header{border-bottom:1px solid var(--line)}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:26px 0 24px;gap:24px;flex-wrap:wrap}
.wordmark{font-size:22px;font-weight:700;letter-spacing:.16em;color:var(--navy);text-decoration:none}
.masthead nav{display:flex;gap:26px;flex-wrap:wrap}
.masthead nav a{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:.02em}
.masthead nav a:hover,
.masthead nav a[aria-current="page"]{color:var(--navy)}

/* ---------- hero (home) ---------- */
.hero{padding:76px 0 68px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.hero h1{
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.22;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0 0 24px;
  max-width:19em;
  color:var(--navy);
}
.hero p:not(.eyebrow){font-size:17px;color:var(--muted);max-width:34em;margin:0}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.facts div{background:var(--paper);padding:22px 22px 24px}
.facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.facts dd{margin:0;font-size:15px;font-weight:600}

/* ---------- page head (inner pages) ---------- */
.page-head{padding:70px 0 46px;border-bottom:1px solid var(--line)}
.page-head h1{
  font-size:clamp(28px,3.8vw,40px);
  line-height:1.24;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0 0 20px;
  color:var(--navy);
  max-width:22em;
}
.page-head p:not(.eyebrow){font-size:16.5px;color:var(--muted);max-width:40em;margin:0}

/* ---------- sections ---------- */
section{padding:64px 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:none}
h2{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 30px}
.lede{font-size:18px;line-height:1.72;max-width:44em;margin:0 0 20px}
.lede + .lede{font-size:16px;color:var(--muted)}
.zh{display:block;color:var(--muted);font-size:15px;margin-top:10px;letter-spacing:.02em}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:8px}
.cards article{border-top:2px solid var(--navy);padding-top:18px}
.cards h3{font-size:15px;margin:0 0 10px;font-weight:600}
.cards p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.7}

.brandblock{background:var(--wash);padding:38px 38px 40px;border-left:3px solid var(--navy)}
.brandblock .name{font-size:20px;font-weight:700;letter-spacing:.14em;color:var(--navy);margin:0 0 14px}
.brandblock p{margin:0;max-width:42em;color:var(--muted);font-size:15.5px}

/* ---------- product list ---------- */
.products{display:grid;gap:34px}
.product{
  display:grid;
  grid-template-columns:360px 1fr;
  border:1px solid var(--line);
  background:var(--paper);
}
.product .shot{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  border-right:1px solid var(--line);
}
.product .shot img{display:block;width:100%;height:auto;max-height:340px;object-fit:contain}
.product .body{padding:30px 32px 30px;display:flex;flex-direction:column;gap:14px}
.product .kicker{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.product h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--navy);line-height:1.3}
.product .body p:not(.kicker):not(.cta){margin:0;font-size:15px;color:var(--muted);line-height:1.72;max-width:36em}
.product dl.specs{
  display:grid;grid-template-columns:auto 1fr;gap:8px 20px;
  margin:2px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
}
.product dl.specs dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.product dl.specs dd{margin:0;font-size:14.5px}
.product .cta{margin-top:auto;padding-top:8px}
.product .cta a{
  display:inline-flex;align-items:center;gap:9px;
  font-size:14px;color:var(--navy);text-decoration:none;
  border-bottom:1px solid rgba(22,50,79,.35);padding-bottom:2px;
}
.product .cta a:hover{border-bottom-color:var(--navy)}
.product .cta a .arrow{transition:transform .18s ease}
.product .cta a:hover .arrow{transform:translateX(3px)}

.range-note{margin:34px 0 0;font-size:14.5px;color:var(--muted);max-width:44em}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;margin-top:6px}
.contact-grid div{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-grid dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.contact-grid dd{margin:0;font-size:15px;line-height:1.6}
.contact-grid a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(22,50,79,.3)}
.contact-grid a:hover{border-bottom-color:var(--navy)}

/* ---------- footer ---------- */
footer{padding:34px 0 44px;border-top:1px solid var(--line)}
footer .legal{font-size:13px;color:var(--muted);line-height:1.8;margin:0}
footer .legal strong{color:var(--ink);font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .product{grid-template-columns:1fr}
  .product .shot{padding:16px;border-right:none;border-bottom:1px solid var(--line)}
  .product .shot img{max-height:280px}
  .product .body{padding:26px 24px 28px}
}
@media (max-width:760px){
  .hero{padding:52px 0 48px}
  .page-head{padding:52px 0 38px}
  .facts{grid-template-columns:1fr;margin-top:40px}
  .cards{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr}
  .brandblock{padding:28px 24px}
  section{padding:48px 0}
  .masthead nav{gap:18px}
}