@charset "utf-8";
/* ============================================================================
   广州逸明化工有限公司官网 · 设计系统
   ----------------------------------------------------------------------------
   取「合格证」做签名元素：客户的每一袋货上都贴着一张双框红字的检验标签，
   站上的产品卡、板块标记、首屏角标全部照这个形制做（.plate）。
   底色是牛皮纸袋的米白，主色取水处理药剂那条线的青碧，重点信息走等宽字体。
   与 dehui(石墨深+工程图纸) / lunsu(暖纸+衬线 lookbook) / yihao(铜色+回收现场)
   三站不共用任何组件，只共用「自托管字体、零外链」这个做法。
   ========================================================================== */
@import url("fonts.css");

/* ---------- 令牌 ---------- */
:root{
  --ink:#12211f;          /* 正文：带绿的墨黑 */
  --ink-2:#3d4f4b;        /* 次级文字 */
  --ink-3:#6b7b76;        /* 弱化文字 */
  --teal:#0c6a5e;         /* 主色：青碧 */
  --teal-d:#084b43;
  --teal-l:#e4f0ed;
  --red:#b3352b;          /* 合格证红，只用在标签与必填星号 */
  --kraft-l:#f2ede2;      /* 牛皮纸袋的浅色，做区块底 */
  --paper:#f7f7f5;        /* 页底 */
  --white:#fff;
  --line:#e0e4e0;
  --line-d:#c8d0cc;
  --radius:2px;
  --wrap:1220px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(18,33,31,.05),0 8px 24px -12px rgba(18,33,31,.16);
}

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.25;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--teal);color:#fff;padding:.6rem 1rem}
.skip:focus{left:.5rem;top:.5rem}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}

/* ---------- 排版件 ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin:0 0 .55rem;
}
.h2{font-size:clamp(1.45rem,1.05rem + 1.5vw,2.1rem)}
.lede{color:var(--ink-2);font-size:clamp(.98rem,.94rem + .2vw,1.09rem)}
.mt5{margin-top:.5rem}
.small{font-size:.86rem;color:var(--ink-3)}
.prose p+p{margin-top:.85rem}
.prose h3{margin:1.6rem 0 .5rem;font-size:1.05rem}
.prose strong{font-weight:600;color:var(--ink)}
strong{font-weight:600}

/* ---------- 合格证标签（签名元素） ---------- */
.plate{
  border:1px solid var(--ink);padding:3px;background:var(--white);
  font-family:var(--mono);line-height:1.5;
}
.plate__in{border:1px solid var(--ink);padding:.7rem .85rem}
.plate__t{
  display:block;text-align:center;color:var(--red);font-weight:600;
  letter-spacing:.34em;font-size:.82rem;padding-bottom:.45rem;
  border-bottom:1px dashed var(--line-d);margin-bottom:.5rem;
}
.plate__row{display:flex;gap:.5rem;font-size:.78rem;color:var(--ink-2)}
.plate__row+.plate__row{margin-top:.28rem}
.plate__row b{color:var(--ink);font-weight:500;flex:1;word-break:break-all}
.plate__row span{color:var(--ink-3);min-width:4.2em;letter-spacing:.06em}

/* ---------- 顶栏 ---------- */
.topline{background:var(--ink);color:#cfd9d6;font-size:.8rem}
.topline__in{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;align-items:center}
.topline__in b{color:#fff;font-family:var(--mono);letter-spacing:.04em}
.topline span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){.topline span:first-child{display:none}.topline__in{justify-content:center}}

.mast{position:sticky;top:0;z-index:60;background:rgba(247,247,245,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.mast__in{display:flex;align-items:center;gap:1.4rem;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand__mark{width:38px;height:38px;flex-shrink:0}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt b{font-size:1.12rem;font-weight:600;letter-spacing:.04em}
.brand__txt span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.nav{display:flex;gap:.2rem;margin-left:auto}
.nav a{display:block;padding:.5rem .8rem;font-size:.95rem;color:var(--ink-2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--teal)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--teal);font-weight:500}
.mast__cta{display:flex;align-items:center;gap:.8rem}
.telbox{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.telbox span{font-size:.68rem;color:var(--ink-3);letter-spacing:.1em}
.telbox strong{font-family:var(--mono);font-size:1.02rem;color:var(--teal-d);font-weight:600}
.burger{display:none;width:42px;height:38px;border:1px solid var(--line-d);background:var(--white);border-radius:var(--radius);padding:0;place-items:center;cursor:pointer}
.burger i{display:block;width:17px;height:1.5px;background:var(--ink);margin:3px auto}
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:grid}
}
@media (max-width:520px){.telbox{display:none}}

/* 抽屉 */
.drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--white);z-index:90;
  transform:translateX(102%);transition:transform .28s ease;display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(18,33,31,.18)}
.drawer[data-open]{transform:none}
.drawer__top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
.drawer__close{background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--ink-2);padding:.1rem .3rem}
.drawer nav{padding:.6rem 0;overflow-y:auto}
.drawer nav a{display:block;padding:.75rem 1.1rem;border-bottom:1px solid var(--line);font-size:1rem}
.drawer nav a.sub{padding-left:2rem;font-size:.92rem;color:var(--ink-2)}
.drawer__foot{margin-top:auto;padding:1.1rem;background:var(--kraft-l);display:flex;flex-direction:column;gap:.2rem}
.drawer__foot span{font-size:.78rem;color:var(--ink-3)}
.drawer__foot b{font-family:var(--mono);font-size:1.25rem;color:var(--teal-d)}
.scrim{position:fixed;inset:0;background:rgba(18,33,31,.42);z-index:80;opacity:0;pointer-events:none;transition:opacity .28s}
.scrim[data-open]{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.drawer,.scrim{transition:none}}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.25rem;border-radius:var(--radius);
  font-size:.94rem;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-d)}
.btn--line{border-color:var(--line-d);background:var(--white);color:var(--ink)}
.btn--line:hover{border-color:var(--teal);color:var(--teal)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- 区块骨架 ---------- */
.sec{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.sec--tint{background:var(--white);border-block:1px solid var(--line)}
.sec--kraft{background:var(--kraft-l)}
.sechead{margin-bottom:clamp(1.6rem,1.2rem + 1.4vw,2.6rem);max-width:64ch}
.sechead--row{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;max-width:none;flex-wrap:wrap}
.rule{height:1px;background:var(--line);margin-block:clamp(2rem,1.4rem + 2vw,3rem)}

/* ---------- 首屏 ---------- */
.hero{background:var(--white);border-bottom:1px solid var(--line);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:center;
  padding-block:clamp(2.6rem,1.8rem + 4vw,5rem)}
.hero__kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal-l);
  background:var(--teal-l);padding:.3rem .7rem;border-radius:var(--radius);margin-bottom:1.1rem}
.hero h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.35rem);letter-spacing:-.025em}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero__lede{margin-top:1.1rem;max-width:52ch}
.hero__acts{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.hero__strip{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.6rem}
.chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--ink-2);
  border:1px solid var(--line-d);background:var(--white);padding:.26rem .58rem;border-radius:var(--radius)}
.chip--solid{background:var(--ink);color:#e7ece9;border-color:var(--ink)}
.hero__fig{position:relative}
.hero__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.hero__plate{position:absolute;right:-8px;bottom:-14px;width:min(230px,62%);box-shadow:var(--shadow)}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr}
  /* 窄屏不压在图上：叠上去会盖住图里的货，右下角还要和悬浮拨号钮抢地方 */
  .hero__plate{position:static;width:100%;max-width:360px;margin-top:.9rem}
}

/* ---------- 数据条 ---------- */
.facts{background:var(--ink);color:#dbe3e0}
.facts__in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.facts__c{background:var(--ink);padding:clamp(1.2rem,1rem + 1vw,1.9rem) clamp(1rem,.8rem + 1vw,1.6rem)}
.facts__c b{display:block;font-family:var(--mono);font-size:clamp(1.3rem,1.05rem + 1vw,1.85rem);color:#fff;font-weight:600;letter-spacing:-.01em}
.facts__c span{display:block;font-size:.83rem;color:#9fb3ad;margin-top:.3rem}
/* 文字型数据（地名）比数字长，单独降一档字号，窄屏才不会断成两行 */
.facts__c--t b{font-size:clamp(1.02rem,.92rem + .55vw,1.4rem);letter-spacing:0}
@media (max-width:760px){.facts__in{grid-template-columns:repeat(2,1fr)}}

/* ---------- 产品线卡 ---------- */
.lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.line{background:var(--white);padding:clamp(1.3rem,1rem + 1vw,1.9rem);display:flex;flex-direction:column;gap:.7rem;
  transition:background .18s}
.line:hover{background:var(--teal-l)}
.line__no{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;color:var(--teal);text-transform:uppercase}
.line h3{font-size:1.16rem}
.line p{color:var(--ink-2);font-size:.93rem;line-height:1.7}
.line__chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.5rem}
.line__more{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--teal);display:flex;align-items:center;gap:.35rem;text-transform:uppercase}
.line__more svg{width:14px;height:14px}

/* ---------- 图文分栏 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,1rem + 3vw,3.2rem);align-items:center}
.split--r .split__fig{order:2}
.split--top{align-items:start}
.split__fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.split__fig figcaption{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-top:.5rem;letter-spacing:.03em}
@media (max-width:860px){.split{grid-template-columns:1fr}.split--r .split__fig{order:0}}

/* ---------- 图库 ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.6rem,.4rem + .6vw,1rem)}
@media (min-width:700px){
  /* 列数按张数在 build.py 里挑，挑到能整除的那个，末行不留单张 */
  .shots--c3{grid-template-columns:repeat(3,1fr)}
  .shots--c4{grid-template-columns:repeat(4,1fr)}
}
.shots figure{margin:0;background:var(--white);border:1px solid var(--line)}
.shots img{width:100%;aspect-ratio:3/4;object-fit:cover}
.shots figcaption{font-family:var(--mono);font-size:.73rem;color:var(--ink-2);padding:.5rem .6rem;border-top:1px solid var(--line);letter-spacing:.02em}
/* 只有两张时别撑成两张巨图 */
@media (min-width:700px){.shots--c2{max-width:640px}}

/* ---------- 规格 / 清单表 ---------- */
.spec{width:100%;border-collapse:collapse;font-size:.92rem}
.spec caption{text-align:left;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:.6rem}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:.7rem .8rem;text-align:left;vertical-align:top}
.spec th{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--ink-3);font-weight:500;text-transform:uppercase;background:var(--kraft-l)}
.spec td:first-child{font-weight:500;white-space:nowrap}
.spec tr:hover td{background:var(--teal-l)}
.spec .mk{text-align:center}
.spec .mk--on{color:var(--teal);font-weight:600}
.spec .mk--off{color:var(--line-d)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--white)}

/* ---------- 要点列表 ---------- */
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,.8rem + 1vw,1.6rem)}
.point{background:var(--white);border:1px solid var(--line);padding:clamp(1.1rem,.9rem + .8vw,1.5rem);border-top:2px solid var(--teal)}
.point b{display:block;font-size:1.02rem;margin-bottom:.4rem}
.point p{color:var(--ink-2);font-size:.92rem;line-height:1.72}
.steps{counter-reset:s;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--white);padding:clamp(1rem,.85rem + .7vw,1.4rem) clamp(1rem,.85rem + .7vw,1.6rem);display:grid;
  grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;
  color:var(--teal);letter-spacing:.08em;padding-top:.2rem}
.step b{display:block;margin-bottom:.25rem}
.step p{color:var(--ink-2);font-size:.93rem}

/* ---------- 页头（内页） ---------- */
.phead{background:var(--white);border-bottom:1px solid var(--line);padding-block:clamp(1.8rem,1.4rem + 2vw,3rem)}
.crumb{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--mono);font-size:.74rem;color:var(--ink-3);margin-bottom:.9rem}
.crumb li+li::before{content:"/";margin-right:.4rem;color:var(--line-d)}
.crumb a:hover{color:var(--teal)}
.phead h1{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem)}
.phead .lede{margin-top:.8rem;max-width:62ch}

/* ---------- CTA 条 ---------- */
.cta{background:var(--teal-d);color:#fff}
.cta__in{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:space-between;align-items:center;padding-block:clamp(1.8rem,1.4rem + 2vw,2.8rem)}
.cta h2{font-size:clamp(1.25rem,1.05rem + .8vw,1.7rem)}
.cta p{color:#bfd8d3;margin-top:.4rem;font-size:.95rem;max-width:52ch}
.cta__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.cta__tel{font-family:var(--mono);font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);font-weight:600;letter-spacing:.02em}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink);color:#aebbb7;font-size:.9rem;padding-top:clamp(2.4rem,2rem + 2vw,3.6rem)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:clamp(1.4rem,1rem + 2vw,2.6rem)}
.foot__brand p{margin-top:.9rem;line-height:1.8;max-width:38ch}
.foot .brand__txt b{color:#fff}
.foot .brand__txt span{color:#7f918c}
.foot h4{color:#fff;font-size:.86rem;letter-spacing:.1em;font-family:var(--mono);text-transform:uppercase;margin-bottom:.9rem;font-weight:500}
.foot li+li{margin-top:.5rem}
.foot a:hover{color:#fff}
.foot__contact li{display:flex;flex-direction:column}
.foot__contact span{font-size:.76rem;color:#7f918c}
.foot__contact b{color:#fff;font-family:var(--mono);font-weight:500;font-size:1.02rem}
.foot__icp{margin-left:.7rem;text-decoration:underline;text-underline-offset:3px}
.foot__icp:hover{color:#fff}
.foot__bar{margin-top:clamp(2rem,1.6rem + 1.5vw,3rem);border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.1rem 1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;font-size:.8rem;color:#7f918c}
.foot__kw{max-width:70ch;line-height:1.7}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* ---------- 悬浮呼叫 ---------- */
.fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;gap:8px}
.fab a,.fab button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;gap:0;background:var(--teal);
  color:#fff;border:0;cursor:pointer;box-shadow:var(--shadow);line-height:1}
.fab button{background:var(--ink)}
/* .fab 的 display:grid 是作者样式，会盖过 UA 的 [hidden]{display:none}，
   不补这条，main.js 里的 top.hidden 就等于没生效，按钮从首屏就一直露着 */
.fab__top[hidden]{display:none!important}
.fab svg{width:19px;height:19px}
.fab em{font-style:normal;font-size:.55rem;letter-spacing:.06em;margin-top:1px}
@media (min-width:1041px){.fab{display:none}}

/* ---------- 动效 ---------- */
[data-reveal]{opacity:0;transform:translateY(12px)}
[data-reveal].in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}[data-reveal].in{transition:none}}

/* ---------- 404 ---------- */
.nf{display:grid;place-items:center;text-align:center;padding-block:clamp(3rem,2rem + 6vw,7rem)}
.nf__code{font-family:var(--mono);font-size:clamp(3rem,2rem + 6vw,6rem);color:var(--teal);letter-spacing:.06em;line-height:1}