/* ============================================================
   果邦包装官网 · 设计令牌 Design Tokens
   品牌标识绿 #49A486 —— 逐字取自官方 LOGO（与 LOGO 同色）
   文字与按钮用深一阶 #2A7D60（白底对比度 5.1:1，达 WCAG AA）
   果邦金 #FB9F16 为 CTA 强调色
   ============================================================ */
:root{
  --green-700:#1B5C44;   /* 深阶：hover / 强调文字 */
  --green-600:#2A7D60;   /* 主色：按钮 / 链接（白底对比度 5.1:1） */
  --green-500:#49A486;   /* 品牌标识绿 —— 与官方 LOGO 逐字一致 */
  --green-050:#EDF7F3;
  --green-025:#F5FBF8;
  --gold-600:#E88A00;
  --gold-500:#FB9F16;    /* 强调色 */
  --gold-050:#FFF6E6;
  --ink-900:#0F1A14;
  --ink-700:#33453B;
  --ink-500:#5C6E64;
  --ink-400:#8A9992;
  --line:#E5EAE7;
  --line-strong:#D3DBD6;
  --bg:#FFFFFF;
  --bg-page:#F5F7F6;
  --danger:#D8402F;

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(15,26,20,.06);
  --sh-md:0 4px 16px rgba(15,26,20,.08);
  --sh-lg:0 12px 32px rgba(15,26,20,.12);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --maxw:1200px;
  --font:"Source Han Sans SC","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink-900);background:var(--bg);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;padding-bottom:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sec{padding:var(--sp-8) 0}
.sec--gray{background:var(--bg-page)}
.sec-head{text-align:center;margin-bottom:var(--sp-6)}
.sec-head h2{font-size:32px;line-height:1.3;letter-spacing:-.3px}
.sec-head p{color:var(--ink-500);margin-top:8px}
.sec-head .en{display:block;font-size:12px;letter-spacing:2px;color:var(--green-600);
  font-weight:700;margin-bottom:10px;text-transform:uppercase}
.eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  letter-spacing:1px;color:var(--green-600);background:var(--green-050);
  padding:4px 10px;border-radius:var(--r-full)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;border-radius:var(--r-sm);font-weight:700;font-size:15px;
  transition:.18s ease;white-space:nowrap}
.btn:focus-visible{outline:3px solid rgba(14,123,71,.35);outline-offset:2px}
.btn--primary{background:var(--green-600);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--green-700);transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn--gold{background:var(--gold-500);color:#3A2600}
.btn--gold:hover{background:var(--gold-600);transform:translateY(-1px)}
.btn--ghost{border:1.5px solid var(--line-strong);color:var(--ink-700);background:#fff}
.btn--ghost:hover{border-color:var(--green-600);color:var(--green-600)}
.btn--sm{min-height:36px;padding:0 14px;font-size:14px;border-radius:var(--r-xs)}
.btn--block{width:100%}

/* ---------- 顶部导航 ---------- */
.topbar{background:var(--green-700);color:#CBE6D8;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:16px}
.topbar b{color:#fff}
.topbar .tb-r{display:flex;gap:20px;overflow:hidden;white-space:nowrap}

header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:72px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:43px;width:auto;flex:0 0 auto}
.brand .bt{position:relative;margin-left:11px;padding-left:14px;line-height:1}
.brand .bt::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:38px;
  background:linear-gradient(180deg,rgba(42,125,96,0),rgba(42,125,96,.42) 50%,rgba(42,125,96,0))}
.brand .bt strong{display:block;font-size:20px;line-height:1;font-weight:800;letter-spacing:1.6px;
  color:var(--green-700)}
.brand .bt .en{display:block;margin-top:6px;line-height:1;font-size:9px;font-weight:800;
  letter-spacing:1.9px;color:#7E9489;white-space:nowrap}
.brand .bt .en i{font-style:normal;font-weight:500;color:#ADBDB4;margin-left:5px;letter-spacing:1.6px}
.menu{display:flex;gap:2px;margin-left:4px;flex:0 1 auto;min-width:0}
.menu a{padding:9px 12px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;
  color:var(--ink-700);white-space:nowrap}
.menu a:hover{background:var(--green-025);color:var(--green-600)}
.menu a.on{color:var(--green-600);background:var(--green-050)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:12px}
.search{display:flex;align-items:center;gap:8px;width:206px;height:40px;padding:0 12px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-full);background:var(--bg-page)}
.search input{border:0;background:none;outline:none;width:100%;font-size:14px;font-family:inherit}
.search svg{flex:0 0 auto}
.tel-btn{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tel-btn .t-num{font-weight:800;font-size:15px;letter-spacing:.2px;color:var(--green-700);
  line-height:1.1;white-space:nowrap}
.tel-btn .t-lbl{font-size:11px;color:var(--ink-400)}
.burger{display:none;width:44px;height:44px;border-radius:var(--r-sm);place-items:center}

/* ---------- Hero ---------- */
.hero{background:
   radial-gradient(900px 420px at 88% -10%, rgba(251,159,22,.16), transparent 62%),
   linear-gradient(160deg,#2E8266 0%,#1F6B51 58%,#134B37 100%);
  color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:64px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V34c120-22 240-30 360-14s240 44 360 40 360-38 480-46v50z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:56px;align-items:center;padding-top:72px;padding-bottom:104px}
.hero h1{font-size:50px;line-height:1.16;letter-spacing:-1px;font-weight:800}
.hero h1 em{font-style:normal;color:#FFD79A}
.hero .sub{margin-top:20px;font-size:17px;color:#C9E3D6;max-width:520px}
.hero .kpis{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.hero .kpis div strong{display:block;font-size:28px;color:#FFD79A;letter-spacing:-.5px}
.hero .kpis div span{font-size:13px;color:#AFD2C1}
.hero .cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-shot{position:relative;display:block;text-decoration:none;color:inherit;cursor:pointer;border-radius:var(--r-lg);outline:none}
.hero-shot .main{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.32);
  border:6px solid rgba(255,255,255,.10);background:#fff;aspect-ratio:1100/1000;
  transition:box-shadow .35s ease,border-color .35s ease}
.hero-shot .main img{width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.hero-shot .float{position:absolute;left:-22px;bottom:-26px;background:#fff;color:var(--ink-900);
  border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--sh-lg);display:flex;gap:10px;align-items:center;
  transition:transform .28s ease,box-shadow .28s ease}
.hero-shot .float i{width:34px;height:34px;border-radius:50%;background:var(--green-050);
  display:grid;place-items:center;font-style:normal}
.hero-shot .float .go{flex:0 0 auto;width:26px;height:26px;margin-left:2px;border-radius:50%;
  background:var(--green-500);color:#fff;display:grid;place-items:center;
  transition:background .28s ease,transform .28s ease}
/* 可点击反馈：图片微放大 + 阴影加深 + 标签上浮 */
.hero-shot:hover .main{box-shadow:0 32px 78px rgba(0,0,0,.44);border-color:rgba(255,255,255,.22)}
.hero-shot:hover .main img{transform:scale(1.04)}
.hero-shot:hover .float{transform:translateY(-4px);box-shadow:0 22px 48px rgba(0,0,0,.22)}
.hero-shot:hover .float .go{background:var(--green-600);transform:translateX(3px)}
.hero-shot:active .main img{transform:scale(1.02)}
.hero-shot:focus-visible{outline:3px solid rgba(73,164,134,.9);outline-offset:8px}

/* ---------- 信任条 ---------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:22px 20px}
.trust .it{display:flex;gap:10px;align-items:center;font-size:14px}
.trust .it i{color:var(--green-600);width:36px;height:36px;border-radius:var(--r-sm);background:var(--green-050);
  display:grid;place-items:center;flex:0 0 auto}
.trust .it b{display:block;font-size:15px}
.trust .it span{color:var(--ink-500);font-size:12.5px}

/* ---------- 品类宫格 ---------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 10px 14px;
  text-align:center;transition:.18s;cursor:pointer}
.cat:hover{border-color:var(--green-500);box-shadow:var(--sh-md);transform:translateY(-3px)}
.cat img{height:88px;width:100%;object-fit:contain;border-radius:var(--r-sm);
  margin-bottom:8px}
.cat b{display:block;font-size:14px;font-weight:700}
.cat span{font-size:11.5px;color:var(--ink-400)}

/* ---------- 产品卡 ---------- */
.grid-prod{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  display:flex;flex-direction:column;transition:.18s}
.card:hover{box-shadow:var(--sh-md);border-color:var(--line-strong);transform:translateY(-3px)}
.card .ph{position:relative;background:#fff;border-bottom:1px solid var(--line)}
.card .ph img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
/* 卡片角标：固定在图片右上角，可多枚竖向堆叠 */
.card .ph .tag{position:absolute;top:10px;right:10px;left:auto;z-index:2}
.card .ph .tags{position:absolute;top:10px;right:10px;left:auto;z-index:2;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}
.card .ph .tags .tag{position:static;top:auto;right:auto;left:auto}
.tag{font-size:11.5px;font-weight:700;padding:3px 9px;line-height:1.55;border-radius:var(--r-full);
  background:rgba(15,26,20,.74);color:#fff;backdrop-filter:blur(4px);white-space:nowrap;
  box-shadow:0 1px 3px rgba(12,22,17,.14)}
.tag--hot{background:linear-gradient(135deg,#FF9330,#F2620C);color:#fff}
.tag--gold{background:var(--gold-500);color:#3A2600}
.tag--green{background:var(--green-600);color:#fff}
.tag--stock{background:#fff;color:var(--green-700);border:1px solid var(--green-500)}
.tag--blue{background:#1D6FD0;color:#fff}
.tag--dark{background:rgba(15,26,20,.74);color:#fff}
.card .bd{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:16px;font-weight:700;line-height:1.4}
.card .spec{font-size:13px;color:var(--ink-500);line-height:1.6;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:12.5px;color:var(--ink-400);display:flex;gap:12px;flex-wrap:wrap}
.card .price{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:6px;
  border-top:1px dashed var(--line)}
.card .price b{color:var(--danger);font-size:19px;letter-spacing:-.3px}
.card .price s{color:var(--ink-400);font-size:12px;text-decoration:none}
.card .acts{display:flex;gap:8px;margin-top:10px}
.card .acts .btn{flex:1;padding:0 8px}

/* ---------- 四宫格卖点 ---------- */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.why .it{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.why .it i{color:var(--green-600);width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--green-050);margin-bottom:14px}
.why .it h4{font-size:17px;margin-bottom:6px}
.why .it p{font-size:14px;color:var(--ink-500)}

/* ---------- 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-size:34px;font-weight:800;
  color:var(--green-050);position:absolute;right:18px;top:12px;letter-spacing:-2px}
.step h4{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--ink-500)}

/* ---------- 首页横幅 CTA ---------- */
.banner{background:linear-gradient(120deg,#2E8266,#1F6B51);color:#fff;border-radius:var(--r-lg);
  padding:38px 40px;display:flex;align-items:center;gap:32px;justify-content:space-between;flex-wrap:wrap;
  box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.banner::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  border-radius:50%;background:rgba(251,159,22,.18)}
.banner h3{font-size:26px;letter-spacing:-.3px;position:relative}
.banner p{color:#C9E3D6;font-size:15px;margin-top:6px;position:relative}
.banner .b-cta{display:flex;gap:12px;position:relative;z-index:2}

/* ---------- 产品中心 ---------- */
.crumb{font-size:13px;color:var(--ink-400);padding:16px 0}
.crumb a:hover{color:var(--green-600)}
.plist{display:grid;grid-template-columns:224px minmax(0,1fr);gap:28px;align-items:start}
.plist>aside,.plist>div{min-width:0}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:8px;position:sticky;top:96px}
.filters h4{font-size:13px;color:var(--ink-400);padding:12px 12px 8px;letter-spacing:1px}
.filters a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;
  border-radius:var(--r-sm);font-size:14.5px;font-weight:600;color:var(--ink-700)}
.filters a:hover{background:var(--green-025);color:var(--green-600)}
.filters a.on{background:var(--green-050);color:var(--green-600)}
.filters a em{font-style:normal;font-size:12px;color:var(--ink-400)}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.chip{padding:7px 14px;border-radius:var(--r-full);border:1px solid var(--line-strong);
  font-size:13.5px;font-weight:600;color:var(--ink-700);background:#fff;cursor:pointer;
  transition:.16s}
.chip:hover{border-color:var(--green-500);color:var(--green-600)}
.chip.on:hover{color:#fff}
.chip.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.toolbar .count{margin-left:auto;font-size:13.5px;color:var(--ink-400)}
.grid-empty{grid-column:1/-1;padding:60px 20px;text-align:center;background:#fff;
  border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--ink-400);font-size:14.5px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:36px;min-height:0}
.pager button{min-width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--line-strong);
  font-weight:600;color:var(--ink-700);background:#fff}
.samelink:hover b{color:var(--green-600)}
.samelink img{width:64px;height:64px;border-radius:8px;object-fit:contain;background:#fff;
  border:1px solid var(--line);flex:0 0 auto}
.pager button{transition:.16s}
.pager button:hover:not(:disabled):not(.on){border-color:var(--green-500);color:var(--green-600)}
.pager button.on{background:var(--green-600);border-color:var(--green-600);color:#fff}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.filters a{cursor:pointer;transition:.16s}
.card .ph,.card h3{cursor:pointer}

/* ---------- 产品详情 ---------- */
.detail{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;padding-top:8px}
.gallery .big{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.gallery .thumbs{display:flex;gap:10px;margin-top:12px}
.gallery .thumbs img{width:78px;height:78px;object-fit:cover;border-radius:var(--r-sm);
  border:1.5px solid var(--line);cursor:pointer}
.gallery .thumbs img.on{border-color:var(--green-600)}
.info h1{font-size:28px;line-height:1.3;letter-spacing:-.4px}
.info .lead{color:var(--ink-500);font-size:15px;margin-top:10px}
.info .tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.info .tags span{font-size:12.5px;padding:4px 10px;border-radius:var(--r-full);
  background:var(--green-050);color:var(--green-700);font-weight:600}
.pricebox{background:var(--bg-page);border:1px solid var(--line);border-radius:var(--r-md);
  padding:18px;margin-top:20px}
.pricebox .p{display:flex;align-items:baseline;gap:8px}
.pricebox .p b{font-size:30px;color:var(--danger);letter-spacing:-.8px}
.pricebox .p span{color:var(--ink-500);font-size:13px}
.pricebox .lines{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px dashed var(--line-strong)}
.pricebox .lines div{font-size:13.5px;color:var(--ink-500)}
.pricebox .lines div b{color:var(--ink-900);font-size:14px}
.info .cta{display:flex;gap:12px;margin-top:20px}
.info .cta .btn{flex:1}
.info .assure{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;font-size:13px;color:var(--ink-500)}
.info .assure i{color:var(--green-600);font-style:normal;font-weight:700}
.spec-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.5px}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.spec-table th{background:var(--bg-page);width:150px;color:var(--ink-500);font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:52px 0 24px}
.tabs button{padding:12px 20px;font-weight:700;font-size:15px;color:var(--ink-500);
  border-bottom:2.5px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--green-600);border-color:var(--green-600)}

/* ---------- FAQ ---------- */
.faq{max-width:840px;margin:0 auto}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:12px;overflow:hidden}
.qa summary{padding:18px 20px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;
  gap:16px;align-items:center;list-style:none;font-size:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:22px;color:var(--green-600);font-weight:400;flex:0 0 auto}
.qa[open] summary::after{content:"–"}
.qa .a{padding:0 20px 20px;color:var(--ink-500);font-size:14.5px}

/* ---------- 关于我们 ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.about-grid h2{font-size:30px;line-height:1.3;letter-spacing:-.4px}
.about-grid p{color:var(--ink-500);margin-top:14px;font-size:15.5px}
.stat4{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.stat4 div strong{display:block;font-size:30px;color:var(--green-600);letter-spacing:-1px}
.stat4 div span{font-size:13.5px;color:var(--ink-500)}
.certs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cert{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.cert img{width:100%;aspect-ratio:16/10;object-fit:cover}
.cert .c-bd{padding:14px}
.cert h4{font-size:15.5px}
.cert p{font-size:13px;color:var(--ink-500);margin-top:4px}

/* ---------- 联系我们 ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.cbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.cbox h3{font-size:19px;margin-bottom:16px}
.crow{display:flex;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line)}
.crow:last-child{border:0}
.crow i{color:var(--green-600);width:38px;height:38px;border-radius:var(--r-sm);background:var(--green-050);
  display:grid;place-items:center;flex:0 0 auto;font-style:normal}
.crow b{display:block;font-size:12.5px;color:var(--ink-400);font-weight:600}
.crow span{font-size:15.5px;font-weight:700;word-break:break-all}
.qr{display:flex;gap:16px;align-items:center;margin-top:8px}
.qr .code{width:120px;height:120px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  display:grid;place-items:center;text-align:center;font-size:11.5px;color:var(--ink-400);
  background:var(--bg-page);padding:8px;flex:0 0 auto}
.qr p{font-size:13.5px;color:var(--ink-500)}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.form-row label em{color:var(--danger);font-style:normal}
.form-row input,.form-row select,.form-row textarea{width:100%;min-height:46px;padding:11px 13px;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);font-family:inherit;font-size:15px;
  background:#fff;outline:none;transition:.15s}
.form-row textarea{min-height:96px;resize:vertical}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--green-600);box-shadow:0 0 0 3px rgba(14,123,71,.12)}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-hint{font-size:12.5px;color:var(--ink-400);margin-top:10px}

/* ---------- 页脚 ---------- */
footer{background:#0F1A14;color:#9DB0A5;font-size:14px;margin-top:0}
footer .f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding:52px 20px 40px;
  max-width:var(--maxw);margin:0 auto}
footer h5{color:#fff;font-size:15px;margin-bottom:14px}
footer li{margin-bottom:9px}
footer a:hover{color:#fff}
footer .f-brand{display:flex;align-items:center;margin-bottom:18px}
footer .f-brand img{height:40px;width:auto;flex:0 0 auto}
footer .f-bt{position:relative;margin-left:11px;padding-left:14px;line-height:1}
footer .f-bt::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:36px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.34) 50%,rgba(255,255,255,0))}
footer .f-bt strong{display:block;font-size:19px;line-height:1;font-weight:800;letter-spacing:1.6px;color:#fff}
footer .f-bt .en{display:block;margin-top:6px;line-height:1;font-size:9px;font-weight:800;
  letter-spacing:1.9px;color:#8FA69C;white-space:nowrap}
footer .f-bt .en i{font-style:normal;font-weight:500;color:#647A6F;margin-left:5px;letter-spacing:1.6px}
footer .f-bot{border-top:1px solid #23332A;padding:18px 20px;max-width:var(--maxw);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#7A8C82}

/* ---------- 移动端吸底 CTA（关键：随时可谈） ---------- */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px}
.dock .btn{flex:1;min-height:48px}
.dock .ic{flex:0 0 auto;width:52px;min-height:48px;border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm);display:grid;place-items:center;background:#fff}


/* ---------- 解决方案 / 拿样 / FAQ 新增 ---------- */
.sol{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sol .s{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:22px;
  display:flex;flex-direction:column;gap:12px;transition:.18s}
.sol .s:hover{box-shadow:var(--sh-md);transform:translateY(-3px)}
.sol .s h4{font-size:17px}
.sol .s .scene{font-size:13.5px;color:var(--ink-500);margin:-4px 0 2px}
.sol .s ul{list-style:none}
.sol .s li{font-size:14px;color:var(--ink-700);padding-left:20px;position:relative;margin-bottom:6px}
.sol .s li::before{content:"\2713";position:absolute;left:0;color:var(--green-600);font-weight:800}
.sol .s .btn{margin-top:auto}
.sol .s .pt{font-size:12.5px;color:var(--ink-400);margin-top:2px}
.side-cta{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:65;
  background:#fff;border:1px solid var(--line);border-right:0;border-radius:12px 0 0 12px;
  box-shadow:var(--sh-md);overflow:hidden}
.side-cta a,.side-cta button{display:flex;flex-direction:column;align-items:center;gap:4px;width:66px;
  padding:13px 0;font-size:11.5px;font-weight:700;color:var(--ink-700);border-bottom:1px solid var(--line)}
.side-cta a:hover,.side-cta button:hover{background:var(--green-025);color:var(--green-600)}
.side-cta a:last-child,.side-cta button:last-child{border-bottom:0}
.side-cta .qx{background:var(--gold-500);color:#3A2600}
.side-cta .qx:hover{background:var(--gold-600);color:#3A2600}
.faqgroup{margin-bottom:26px}
.faqgroup>h3{margin-top:0}
.samplewrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start}
.slist{list-style:none}
.slist li{display:flex;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.slist li:last-child{border:0}
.slist li b{flex:0 0 auto;color:var(--green-600)}
@media (max-width:992px){.sol{grid-template-columns:1fr}.samplewrap{grid-template-columns:1fr;gap:24px}}
@media (min-width:993px){.side-cta{display:block}}

/* ---------- 询价弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal .mask{position:absolute;inset:0;background:rgba(15,26,20,.5);backdrop-filter:blur(3px)}
.modal .panel{position:relative;background:#fff;border-radius:var(--r-lg);width:100%;max-width:480px;
  padding:28px;box-shadow:var(--sh-lg);animation:pop .22s ease}
@keyframes pop{from{transform:translateY(12px) scale(.98);opacity:0}}
.modal h3{font-size:22px;letter-spacing:-.3px}
.modal .m-sub{color:var(--ink-500);font-size:14px;margin-top:6px}
.modal .x{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:var(--r-sm);
  font-size:22px;color:var(--ink-400);display:grid;place-items:center}
.modal .x:hover{background:var(--bg-page)}

/* ---------- 原型说明条 ---------- */

.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);background:var(--ink-900);
  color:#fff;padding:11px 18px;border-radius:var(--r-full);font-size:14px;opacity:0;pointer-events:none;
  transition:.25s;z-index:99}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ============ 响应式 ============ */
@media (max-width:1200px){
  .menu a{padding:9px 9px;font-size:14px}
  .nav{gap:12px}
  .search{width:164px}
  .tel-btn .t-lbl{display:none}
  .brand img{height:38px}
  .brand .bt strong{font-size:18px;letter-spacing:1.2px}
  .brand .bt::before{height:32px}
  .cats{grid-template-columns:repeat(4,1fr)}
  .grid-prod{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero h1{font-size:42px}
}
@media (max-width:1120px){
  .menu a[data-go="faq"]{display:none}
  .topbar .tb-r span:not(:last-child){display:none}
}
@media (max-width:992px){
  .menu,.search{display:none}
  .burger{display:grid}
  .brand .bt .en{display:none}
  .brand img{height:36px}
  .brand .bt strong{font-size:17px}
  .hero .wrap{grid-template-columns:1fr;gap:36px;padding-top:48px;padding-bottom:88px}
  .hero-shot .float{left:12px}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .why,.steps{grid-template-columns:1fr 1fr}
  .plist{grid-template-columns:minmax(0,1fr)}
  .plist>aside,.plist>div{min-width:0}
  .filters{position:static;display:flex;gap:8px;overflow-x:auto;padding:10px;
    min-width:0;max-width:100%;-webkit-overflow-scrolling:touch}
  .filters h4{display:none}
  .filters a{white-space:nowrap;padding:8px 14px;border-radius:var(--r-full);background:var(--bg-page)}
  .detail{grid-template-columns:1fr;gap:28px}
  .about-grid,.contact-grid{grid-template-columns:1fr;gap:32px}
  .certs{grid-template-columns:1fr 1fr}
  footer .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:576px){
  body{font-size:16px;padding-bottom:76px}
  .sec{padding:48px 0}
  .sec-head h2{font-size:24px}
  .topbar{display:none}
  .nav{height:60px;gap:12px}
  .brand img{height:32px;width:auto}
  .brand .bt{margin-left:8px;padding-left:10px}
  .brand .bt::before{height:28px}
  .brand .bt strong{font-size:16px}
  .nav-r .tel-btn .t-lbl{display:none}
  .nav-r .tel-btn .btn{display:none}
  .hero h1{font-size:30px;letter-spacing:-.4px}
  .hero .sub{font-size:15px}
  .hero .kpis{gap:22px}
  .hero .kpis div strong{font-size:22px}
  .hero .cta .btn{flex:1}
  .cats{grid-template-columns:repeat(3,1fr);gap:10px}
  .cat img{height:60px}
  .cat b{font-size:12.5px}
  .grid-prod{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card h3{font-size:14.5px}
  .card .spec{display:none}
  .card .bd{padding:11px;gap:6px}
  .card .acts .btn--ghost{display:none}
  .card .price b{font-size:17px}
  .card .meta{font-size:11.5px;gap:8px}
  .card .price span{font-size:11.5px}
  .tag{font-size:11px;padding:2px 8px}
  .why,.steps{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr;gap:12px}
  .banner{padding:26px 22px}
  .banner h3{font-size:20px}
  .banner .b-cta{width:100%;flex-direction:column;gap:10px}
  .banner .b-cta .btn{width:100%;justify-content:center}
  .dock{display:flex}
  .pricebox .lines{grid-template-columns:1fr}
  .info h1{font-size:22px}
  .info .cta{display:none}
  .form-2{grid-template-columns:1fr}
  .certs{grid-template-columns:1fr}
  footer .f-top{grid-template-columns:1fr;gap:24px}
  .spec-table th{width:104px;font-size:13.5px}
  .spec-table td{font-size:13.5px}
  .tabs{overflow-x:auto;margin-top:36px}
  .tabs button{padding:10px 14px;font-size:14px;white-space:nowrap}
}


/* ============================================================
   正式站点补充（多页版）
   原型是单文件 SPA，这里补的是"真实网站"才需要的东西：
   当前页高亮、手机抽屉菜单、搜索表单、表单提交反馈、静态页容器
   ============================================================ */

/* 产品卡：整卡包一层真实链接（SEO/中键新窗口/键盘可达都靠它）
   .card 原本是 flex-column，加了 <a> 之后要让 a 承接这套布局，否则
   .bd 的 flex:1 失效 → 卡片高度参差、"价格"不再贴底 */
.card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.card-link:focus-visible{outline:3px solid var(--green-500);outline-offset:-3px;border-radius:var(--r-md)}

/* 询价制：价格位改放「询价」。原型那里是红色数字（--danger），
   现在是行动词不是促销数字 —— 换品牌绿，语义从"便宜"变"来问"；
   汉字视觉重量大于数字，字号下调一档、去掉给数字用的负字距 */
.card .price b{color:var(--green-700);font-size:18px;letter-spacing:0}
.pricebox .p b{color:var(--green-700);font-size:28px;letter-spacing:0}
.pricebox .p{align-items:center}
/* 卡片上「询价」旁的计价口径，跟着收一点点，避免抢主词 */
.card .price span{color:var(--ink-500)}

/* 关于页主标题：语义上必须是 h1（每页唯一），视觉沿用原型 h2 的规格 */
.about-grid h1{font-size:30px;line-height:1.3;letter-spacing:-.4px}

/* 页面容器：多页站点每个 view 就是页面本身，不再有 display 切换 */
.page{display:block}

/* 导航当前页高亮：SEO/无障碍用 aria-current，样式沿用原型的 .on */
.menu a[aria-current="page"]{color:var(--green-600)}
.menu a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- 手机抽屉菜单（原型只画了按钮，这里接上功能） ---------- */
.drawer{position:fixed;inset:0;z-index:90;visibility:hidden;pointer-events:none}
.drawer.on{visibility:visible;pointer-events:auto}
.drawer .dmask{position:absolute;inset:0;background:rgba(10,20,15,.45);
  opacity:0;transition:opacity .28s ease}
.drawer.on .dmask{opacity:1}
.drawer .dpanel{position:absolute;top:0;right:0;bottom:0;width:min(320px,84vw);background:#fff;
  box-shadow:-18px 0 48px rgba(0,0,0,.18);transform:translateX(102%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column;padding:18px 0}
.drawer.on .dpanel{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:4px 20px 16px;
  border-bottom:1px solid var(--line)}
.drawer .dhead b{font-size:17px}
.drawer .dhead button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:#fff;font-size:20px;line-height:1;color:var(--ink-500);cursor:pointer}
.drawer .dnav{flex:1;overflow:auto;padding:8px 0}
.drawer .dnav a{display:block;padding:15px 20px;font-size:16px;font-weight:600;color:var(--ink-900);
  border-bottom:1px solid var(--line-2)}
.drawer .dnav a[aria-current="page"]{color:var(--green-600);background:var(--green-025)}
.drawer .dfoot{padding:16px 20px;border-top:1px solid var(--line);display:grid;gap:10px}
.drawer .dfoot .btn{width:100%}

/* ---------- 搜索：真正的表单，回车即跳产品中心 ---------- */
form.search{margin:0;padding:0}
form.search input{width:100%;border:0;background:none;outline:none;font:inherit;color:var(--ink-900)}
form.search input::placeholder{color:var(--ink-400)}
.search-hint{font-size:12px;color:var(--ink-400);margin-top:8px}

/* 列表页搜索状态提示 */
.filter-note{display:none;align-items:center;gap:10px;background:var(--green-025);
  border:1px solid var(--green-100,#CFE7DC);border-radius:var(--r-sm);padding:10px 14px;
  font-size:14px;color:var(--green-700);margin-bottom:16px}
.filter-note.on{display:flex}
.filter-note button{margin-left:auto;border:0;background:none;color:var(--green-600);
  font-size:13.5px;cursor:pointer;text-decoration:underline}

/* ---------- 表单提交反馈（静态站无后端，不假装已发送） ---------- */
.form-ok{background:var(--green-025);border:1px solid #CFE7DC;border-radius:var(--r-sm);
  padding:14px 16px;font-size:14px;color:var(--green-700);margin-top:14px;display:none}
.form-ok.on{display:block}
.form-ok b{display:block;margin-bottom:6px;font-size:15px}
.form-ok textarea{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;font:inherit;font-size:13px;line-height:1.6;color:var(--ink-700);
  background:#fff;resize:vertical;min-height:120px}
.form-ok .ok-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* ---------- 静态详情页：规格表补充 ---------- */
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.detail-note{font-size:12.5px;color:var(--ink-400);margin-top:10px}

/* 同类推荐：静态版补齐图片容器比例，避免无 JS 时跳动 */
.samelink img{aspect-ratio:1/1;object-fit:cover}

/* 面包屑当前项不可点 */
.crumb span{color:var(--ink-500)}

/* ---------- 图片灯箱 ---------- */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(15,23,19,.88);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  padding:28px 20px 40px;cursor:zoom-out}
.lightbox.on{display:flex}
.lightbox img{max-width:min(880px,94vw);max-height:88vh;width:auto;height:auto;
  object-fit:contain;border-radius:8px;box-shadow:0 24px 64px rgba(0,0,0,.45);
  background:#fff;cursor:default}
.lightbox .lb-x{position:absolute;top:14px;right:20px;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  font-size:26px;line-height:1;cursor:pointer}
.lightbox .lb-x:hover{background:rgba(255,255,255,.28)}
.lightbox .lb-cap{margin-top:14px;color:#fff;font-size:14px;opacity:.85}
/* 可点击卡片 */
.cert[data-full]{cursor:zoom-out;transition:box-shadow .18s,transform .18s}
.cert[data-full]:hover{box-shadow:0 10px 28px rgba(23,94,52,.16);transform:translateY(-2px)}

/* ---------- 线索提交成功确认（含微信二维码） ---------- */
.lead-ok{margin-top:14px;padding:16px;border:1px solid #cfe3d8;border-radius:12px;
  background:#f2faf5;color:#173226;font-size:14px;line-height:1.8}
.lead-ok b{display:block;font-size:15.5px;margin-bottom:4px;color:#1B5C44}
.lead-ok[hidden]{display:none}
.lead-qr{display:block;width:168px;height:168px;object-fit:contain;margin:12px auto 6px;
  padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;
  cursor:zoom-out}
.lead-ok .form-hint, .lead-ok small{display:block;text-align:center;color:var(--ink-500);font-size:12.5px}
.qr .code img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-sm);cursor:zoom-out;background:#fff}