/* =========================================================
   浦北陈皮官网 · 样式表
   广西浦香食品有限公司
   风格：东方暖色系（陈皮橙 / 宣纸米白 / 墨绿）
   ========================================================= */

:root{
  --paper:#FAF6EF;
  --paper-2:#F4EBDE;
  --paper-3:#EFE1CB;
  --card:#FFFDF8;
  --ink:#2A2118;
  --ink-2:#6E5F4C;
  --ink-3:#9C8D78;
  --amber:#B9741A;
  --amber-2:#E2A032;
  --amber-soft:#F7E6C7;
  --green:#3E6B1A;
  --seal:#B0392E;
  --line:rgba(110,95,76,.15);
  --line-2:rgba(110,95,76,.30);
  --radius:12px;
  --radius-lg:20px;
  --shadow:0 18px 44px rgba(96,64,22,.10);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,SimSun,serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:700;line-height:1.35;margin:0;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
[id]{scroll-margin-top:88px;}
.container{width:min(var(--maxw),92%);margin:0 auto;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
.center{text-align:center;}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(250,246,239,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s;
}
.site-header.scrolled{box-shadow:0 8px 26px rgba(42,33,24,.07);}
.nav{display:flex;align-items:center;gap:26px;height:72px;}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.brand__mark{width:42px;height:42px;flex-shrink:0;}
.brand__text{display:flex;flex-direction:column;line-height:1.15;}
.brand__text strong{font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:.04em;}
.brand__text em{font-style:normal;font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;}
.brand__logo{height:44px;width:auto;display:block;}
.nav__links{display:flex;gap:26px;margin-left:auto;}
.nav__links a{font-size:15px;color:var(--ink-2);position:relative;padding:4px 0;transition:color .2s;}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--amber-2);transform:scaleX(0);transform-origin:center;transition:transform .25s;
}
.nav__links a:hover,.nav__links a.active{color:var(--amber);}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1);}
.nav__cta{flex-shrink:0;}
.lang{flex-shrink:0;font-size:13.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;transition:.2s;}
.lang:hover{color:var(--amber);border-color:var(--amber);}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;}
.nav__toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__toggle.open span:nth-child(2){opacity:0;}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mnav{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--card);}
.mnav.open{display:flex;}
.mnav a{padding:15px 5%;font-size:15.5px;border-bottom:1px solid var(--line);color:var(--ink-2);}
.mnav a.active{color:var(--amber);background:var(--amber-soft);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:.22s;white-space:nowrap;
}
.btn--primary{background:linear-gradient(135deg,#C9801C,#E2A032);color:#fff;box-shadow:0 10px 24px rgba(185,116,26,.26);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(185,116,26,.34);}
.btn--ghost{background:rgba(255,255,255,.7);border-color:var(--line-2);color:var(--ink);}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber);}
.btn--small{padding:10px 20px;font-size:14px;}
.btn--block{width:100%;justify-content:center;}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;overflow:hidden;padding:92px 0 118px;text-align:center;
  background:linear-gradient(168deg,#FDFAF4 0%,#F6ECDA 56%,#F0E2CA 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(185,116,26,.11) 1px,transparent 0);
  background-size:26px 26px;
}
.hero .container{position:relative;z-index:2;}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.14em;
  color:var(--amber);border:1px solid rgba(185,116,26,.3);background:rgba(255,255,255,.66);
  padding:7px 18px;border-radius:999px;
}
.hero h1{font-size:clamp(30px,5vw,56px);letter-spacing:.02em;margin:24px 0 18px;}
.hero__lead{font-size:clamp(15px,1.6vw,17.5px);color:var(--ink-2);max-width:660px;margin:0 auto 32px;line-height:1.9;}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.hero__chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:34px;}
.chip{
  font-size:13px;color:var(--ink-2);background:rgba(255,255,255,.74);
  border:1px solid var(--line);padding:7px 15px;border-radius:999px;
  display:inline-flex;align-items:center;gap:7px;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber-2);}

/* ---------- 数据条 ---------- */
.stats{margin-top:-58px;position:relative;z-index:5;}
.stats__card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;
}
.stat{padding:30px 18px;text-align:center;border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat b{display:block;font-family:var(--serif);font-size:33px;color:var(--amber);line-height:1.1;}
.stat span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-2);}
.stat b .stat__unit{display:inline;margin:0;font-size:18px;font-weight:inherit;}

/* ---------- 区块 ---------- */
.sec{padding:86px 0;}
.sec--tint{background:var(--paper-2);}
.sec-head{text-align:center;max-width:760px;margin:0 auto 52px;}
.eyebrow{font-size:12.5px;letter-spacing:.24em;color:var(--amber);font-weight:600;}
.sec-head h2{font-size:clamp(24px,3.2vw,36px);margin:14px 0 16px;}
.sec-head p{color:var(--ink-2);line-height:1.9;font-size:15.5px;}

/* ---------- 栅格 ---------- */
.grid{display:grid;gap:22px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

/* ---------- 图片占位 ---------- */
.ph{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#F4E8D4,#EBD9BB);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(160,110,40,.17) 1px,transparent 0);
  background-size:20px 20px;
}
.ph span{
  position:relative;z-index:2;font-size:13px;color:#9A7A46;letter-spacing:.05em;
  background:rgba(255,255,255,.6);padding:6px 15px;border-radius:999px;
}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- 图表容器 ---------- */
.chart{width:100%;height:360px;}
.chart--map{height:420px;}
.ph--4x3{aspect-ratio:4/3;}
.ph--3x2{aspect-ratio:3/2;}
.ph--1x1{aspect-ratio:1/1;}
.ph--16x9{aspect-ratio:16/9;}
.ph--tall{aspect-ratio:3/4;}

/* ---------- 产品卡 ---------- */
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;transition:.25s;
}
.pcard:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(96,64,22,.13);border-color:var(--line-2);}
.pcard__body{padding:22px;}
.pcard__body h3{font-size:19px;margin-bottom:10px;}
.pcard__body p{font-size:14px;color:var(--ink-2);line-height:1.75;margin-bottom:14px;}
.tags{display:flex;gap:8px;flex-wrap:wrap;}
.tag{font-size:12px;color:var(--amber);background:var(--amber-soft);padding:4px 11px;border-radius:6px;}

/* ---------- 左右图文 ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;}
.split--rev .split__media{order:2;}
.split h3{font-size:clamp(22px,2.7vw,30px);margin-bottom:16px;}
.split p{color:var(--ink-2);line-height:1.9;font-size:15px;}
.checklist{margin:20px 0 0;}
.checklist li{position:relative;padding-left:28px;margin-bottom:13px;font-size:14.5px;}
.checklist li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg);
}

/* ---------- 四大主张 ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 22px;transition:.25s;}
.pillar:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.pillar__no{font-family:var(--serif);font-size:30px;color:rgba(185,116,26,.4);line-height:1;}
.pillar h4{font-size:17px;margin:12px 0 9px;}
.pillar p{font-size:14px;color:var(--ink-2);line-height:1.8;margin:0;}

/* ---------- 资讯列表 ---------- */
.nlist{border-top:1px solid var(--line);}
.nitem{display:flex;align-items:center;gap:22px;padding:22px 8px;border-bottom:1px solid var(--line);transition:.2s;}
.nitem:hover{background:rgba(255,255,255,.62);}
.nitem__date{font-family:var(--serif);color:var(--amber);font-size:15px;min-width:84px;flex-shrink:0;}
.nitem__title{font-size:16px;font-weight:600;}
.nitem__more{margin-left:auto;color:var(--ink-3);font-size:14px;flex-shrink:0;}
.nitem:hover .nitem__more{color:var(--amber);}

/* ---------- 页头（内页） ---------- */
.pagehead{background:linear-gradient(160deg,#F7EEDD,#EFDFC6);padding:62px 0 56px;text-align:center;}
.pagehead h1{font-size:clamp(26px,3.6vw,40px);margin-bottom:14px;}
.pagehead p{color:var(--ink-2);max-width:660px;margin:0 auto;line-height:1.85;font-size:15.5px;}
.crumb{font-size:13px;color:var(--ink-3);margin-bottom:14px;}
.crumb a:hover{color:var(--amber);}

/* ---------- 时间轴 ---------- */
.timeline{position:relative;padding-left:36px;}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:10px;width:1px;background:var(--line-2);}
.tl{position:relative;padding-bottom:34px;}
.tl:last-child{padding-bottom:0;}
.tl::before{
  content:"";position:absolute;left:-35px;top:6px;width:13px;height:13px;border-radius:50%;
  background:var(--amber-2);border:3px solid var(--paper);
}
.tl b{font-family:var(--serif);color:var(--amber);font-size:17px;display:block;margin-bottom:6px;}
.tl p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.85;}

/* ---------- 表单 ---------- */
.form{display:grid;gap:16px;}
.field label{display:block;font-size:14px;margin-bottom:7px;}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--card);font-size:16px;font-family:inherit;color:var(--ink);transition:.2s;
}
.field textarea{min-height:130px;resize:vertical;}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(185,116,26,.13);
}
.form-ok{
  display:none;background:#EAF3DE;border:1px solid #C0DD97;color:#3B6D11;
  padding:13px 16px;border-radius:10px;font-size:14.5px;
}
.form-err{
  display:none;background:#FBE9E7;border:1px solid #E5A79D;color:#B0392E;
  padding:13px 16px;border-radius:10px;font-size:14.5px;
}

/* ---------- 信息卡 ---------- */
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;}
.icard h4{font-size:16px;margin-bottom:10px;}
.icard p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.8;}

/* ---------- CTA 横幅 ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#332617,#5A4224);padding:58px 40px;text-align:center;
}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(226,160,50,.16) 1px,transparent 0);
  background-size:24px 24px;
}
.cta>*{position:relative;z-index:2;}
.cta h2{color:#FBF1E0;font-size:clamp(22px,3vw,32px);margin-bottom:14px;}
.cta p{color:rgba(245,233,214,.76);max-width:620px;margin:0 auto 28px;line-height:1.85;}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.cta .btn--ghost{background:rgba(255,255,255,.08);border-color:rgba(245,233,214,.35);color:#F5E9D6;}
.cta .btn--ghost:hover{border-color:var(--amber-2);color:#FBF1E0;}

/* ---------- 印章 ---------- */
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:2px solid var(--seal);color:var(--seal);
  font-family:var(--serif);font-size:15px;font-weight:700;line-height:1.05;
  border-radius:7px;letter-spacing:2px;text-align:center;flex-shrink:0;
}

/* ---------- 页脚 ---------- */
.footer{background:#241C13;color:#B8A88E;padding:64px 0 28px;}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:36px;}
.footer h5{font-family:var(--serif);color:#F2E6D2;font-size:16px;margin-bottom:16px;}
.footer p{font-size:14px;line-height:1.85;color:#A2937A;}
.footer li{margin-bottom:10px;font-size:14px;}
.footer a:hover{color:var(--amber-2);}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.footer__brand strong{font-family:var(--serif);color:#F2E6D2;font-size:17px;}
.footer__bottom{
  border-top:1px solid rgba(184,168,142,.18);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:#8E7F68;
}

/* ---------- 回到顶部 ---------- */
.backtop{
  position:fixed;right:24px;bottom:calc(26px + env(safe-area-inset-bottom));z-index:70;width:46px;height:46px;border-radius:50%;
  background:var(--amber);color:#fff;border:none;cursor:pointer;font-size:18px;
  box-shadow:0 10px 24px rgba(185,116,26,.36);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s;
}
.backtop.show{opacity:1;visibility:visible;transform:none;}

/* ---------- 微信悬浮窗 ---------- */
.wx-float{
  position:fixed;right:24px;bottom:82px;z-index:69;width:46px;height:46px;border-radius:50%;
  background:#07C160;color:#fff;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(7,193,96,.38);transition:.25s;
}
.wx-float:hover{transform:translateY(-2px);}
.wx-float svg{width:26px;height:26px;}
.wx-pop{
  position:fixed;right:24px;bottom:138px;z-index:68;width:236px;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.18);padding:22px 20px 18px;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.28s;
}
.wx-pop.open{opacity:1;visibility:visible;transform:none;}
.wx-pop img{width:168px;height:168px;margin:0 auto 12px;border-radius:8px;display:block;}
.wx-pop h5{font-size:15px;margin-bottom:6px;color:var(--ink);}
.wx-pop p{font-size:12.5px;color:var(--ink-2);margin:0;line-height:1.6;}
.wx-pop .wx-num{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;background:var(--amber-soft);color:var(--amber);font-size:12.5px;font-weight:600;}
.wx-pop__close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--ink-3);font-size:20px;line-height:1;cursor:pointer;padding:0;}
.wx-pop__close:hover{color:var(--ink);}
@media (max-width:640px){
  .wx-float{right:16px;bottom:calc(74px + env(safe-area-inset-bottom));}
  .wx-pop{right:16px;bottom:calc(130px + env(safe-area-inset-bottom));}
}

/* ---------- 滚动动效 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .nav{gap:14px;}
  .nav__links{display:none;}
  .nav__cta{margin-left:auto;}
  .nav__toggle{display:flex;margin-left:0;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .pillars{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;gap:32px;}
  .split--rev .split__media{order:0;}
  .stats__card{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2){border-right:none;}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line);}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  body{font-size:15.5px;}
  .sec{padding:58px 0;}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .hero{padding:64px 0 96px;}
  .stats{margin-top:-44px;}
  .stat b{font-size:26px;}
  .cta{padding:38px 22px;}
  .footer__grid{grid-template-columns:1fr;gap:28px;}
  .nitem{flex-wrap:wrap;gap:8px;}
  .nitem__more{margin-left:0;}
  .nav__cta{display:none;}
  .backtop{right:16px;bottom:calc(18px + env(safe-area-inset-bottom));}
  .brand__logo{height:38px;}
  .chart{height:300px;}
  .chart--map{height:340px;}
}