/* =========================================================
   设计令牌：改这里 = 改全站配色与排版
   【新手提示】想换主题色，只改 --brand 和 --accent 两行即可
   ========================================================= */
:root{
  --bg: #ffffff;             /* 页面底色：纯白（对齐原站） */
  --bg-2: #f6f3fb;          /* 交替区块底色：淡紫灰 */
  --ink: #2a2724;           /* 主文字色 */
  --ink-2: #5c5550;         /* 次要文字 */
  --ink-3: #8b827a;         /* 弱化文字 */
  --line: #ece7f5;          /* 分割线 */
  --card: #ffffff;          /* 卡片底色 */
  --brand: #7c3aed;          /* 主色：品牌紫 */
  --brand-2: #5b21b6;
  --accent: #f59e0b;        /* 点缀色：柔珊瑚 */
  --radius: 20px;           /* 圆角（婴儿品类用更大圆角更亲和） */
  --radius-sm: 12px;
  --shadow-sm: 0 2px 12px rgba(42,39,36,.05);
  --shadow: 0 12px 34px rgba(42,39,36,.09);
  --shadow-lg: 0 26px 64px rgba(42,39,36,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
  --container: 1200px;
  --font-sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display: "Playfair Display",Georgia,"Times New Roman",serif;
}

/* ---------- 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--bg);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
ul{ list-style:none; padding:0; margin:0; }
h1,h2,h3,h4{ margin:0; line-height:1.2; font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- 工具 ---------- */
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
.section-head{ text-align:center; max-width:680px; margin:0 auto 48px; }
.section-head h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); margin-top:10px; }
.section-head p{ color:var(--ink-2); margin-top:14px; font-size:1.05rem; }
.section{ padding:88px 0; }
.section.alt{ background:var(--bg-2); }
@media(max-width:720px){ .section{ padding:60px 0; } .section-head{ margin-bottom:32px; } }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px;
  font-weight:600; font-size:.95rem; transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
  white-space:nowrap;
}
.btn-primary{ background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--brand-2); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--bg-2); transform:translateY(-2px); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.nav.scrolled{ background:rgba(255,255,255,.96); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(42,39,36,.06); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:20px; }

/* LOGO：图标 + 公司名 + 副标 */
.logo{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.15; white-space:nowrap; }
.logo-mark{
  width:38px; height:38px; border-radius:10px; background:var(--brand); color:#fff; flex:0 0 auto;
  display:grid; place-items:center; font-size:.82rem; font-family:var(--font-sans); font-weight:700; letter-spacing:0;
}
.logo-text{ display:flex; flex-direction:column; line-height:1.15; }
.logo small{ font-family:var(--font-sans); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:600; }

/* 导航链接组：胶囊容器 + 独立按钮，清晰分组 */
.nav-links{
  display:flex; align-items:center; gap:4px; flex:1 1 auto; min-width:0;
  background:var(--bg-2); border:1px solid var(--line);
  padding:5px; border-radius:999px;
}
.nav-links a{
  font-size:.9rem; font-weight:600; color:var(--ink-2);
  padding:8px 16px; border-radius:999px; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-links a:hover{ color:var(--brand); background:rgba(124,58,237,.07); }
.nav-links a.is-active{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm); }

/* 右侧操作区：电话 + CTA 按钮，用分隔线隔开 */
.nav-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nav-cta .nav-phone{
  font-size:.88rem; font-weight:600; display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px; border-radius:999px; color:var(--ink); transition:background .25s var(--ease);
}
.nav-cta .nav-phone:hover{ background:var(--bg-2); }
.nav-cta .nav-phone svg{ color:var(--brand); flex:0 0 auto; }
.nav-cta .btn{ padding:10px 20px; font-size:.9rem; }
.nav-divider{ width:1px; height:26px; background:var(--line); margin:0 2px; }
.nav-cta .nav-phone, .nav-cta .nav-divider{ display:none; }

.nav-toggle{ display:none; width:42px; height:42px; border-radius:10px; background:var(--bg-2); place-items:center; }

/* 移动端：汉堡菜单，链接竖向堆叠，带分隔线 */
@media(max-width:980px){
  .nav-inner{ height:66px; gap:12px; }
  .logo-text{ display:none; }
  .nav-toggle{ display:grid; }
  .nav-links{
    position:fixed; top:66px; left:12px; right:12px; flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; padding:12px; border-radius:16px; box-shadow:var(--shadow-lg);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:all .3s var(--ease);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:14px 16px; border-radius:12px; border-bottom:1px solid var(--line); }
  .nav-links a:last-child{ border-bottom:0; }
  .nav-links a.is-active{ background:var(--bg-2); }
  .nav-cta .nav-phone{ display:none; }
  .nav-divider{ display:none; }
}
@media(max-width:560px){
  .nav-cta .btn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; padding:96px 0 110px; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 500px at 85% -10%, rgba(217,139,122,.18), transparent 60%), radial-gradient(700px 400px at 10% 20%, rgba(111,155,139,.14), transparent 60%); pointer-events:none; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; position:relative; }
.hero h1{ font-size:clamp(2.2rem,5vw,4rem); margin:16px 0 18px; }
.hero h1 em{ font-style:normal; color:var(--brand); }
.hero-sub{ font-size:1.12rem; color:var(--ink-2); max-width:540px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:26px; margin-top:40px; }
.hero-trust div{ display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--ink-2); font-weight:500; }
.hero-trust svg{ color:var(--brand); flex:0 0 auto; }
.hero-card{ position:relative; aspect-ratio:4/3; background:var(--card); border-radius:26px; padding:0; overflow:hidden; box-shadow:var(--shadow-lg); transform:rotate(1.2deg); }
.hero-card-inner{ height:100%; border:0; border-radius:0; padding:0; transform:rotate(-1.2deg) scale(1.025); }
.hero-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.hc-row{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.hc-row:last-child{ border-bottom:0; }
.hc-row strong{ font-family:var(--font-display); font-size:1.15rem; }
.hc-tag{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:rgba(111,155,139,.12); color:var(--brand); }
.hc-total{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-weight:700; }
.hc-total span{ font-family:var(--font-display); font-size:1.6rem; color:var(--accent); }
@media(max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } .hero{ padding:56px 0 70px; } .hero-card{ max-width:440px; margin:0 auto; } }

/* ---------- 统计 ---------- */
.stats{ background:var(--ink); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.stat{ text-align:center; padding:12px; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); line-height:1; }
.stat span{ color:rgba(255,255,255,.7); font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; }
.stat small{ display:block; color:rgba(255,255,255,.55); font-size:.8rem; margin-top:8px; max-width:260px; margin-left:auto; margin-right:auto; }
@media(max-width:720px){ .stats-grid{ grid-template-columns:1fr; gap:8px; } }

/* ---------- 支柱 ---------- */
.pillars-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.pillar{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 20px; text-align:center; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.pillar:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(217,139,122,.4); }
.pillar-icon{ width:46px; height:46px; margin:0 auto 14px; border-radius:12px; background:rgba(111,155,139,.1); color:var(--brand); display:grid; place-items:center; }
.pillar h4{ font-family:var(--font-sans); font-size:.98rem; }
.pillar p{ font-size:.82rem; color:var(--ink-3); margin-top:6px; }
@media(max-width:1000px){ .pillars-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .pillars-grid{ grid-template-columns:1fr; } }

/* ---------- 产品筛选 ---------- */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:40px; }
.filter{
  padding:9px 20px; border-radius:999px; font-size:.9rem; font-weight:500; color:var(--ink-2);
  background:var(--card); border:1px solid var(--line); transition:all .25s var(--ease);
}
.filter:hover{ border-color:var(--accent); color:var(--ink); }
.filter.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.product{
  background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.prod-media{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); }
/* 产品图片：真实照片（优先）与 SVG 示意图（缺图时）共用同一容器 */
.prod-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); background:var(--bg-2); }
.prod-svg{ width:100%; height:100%; display:block; transition:transform .6s var(--ease); }
.product:hover .prod-img{ transform:scale(1.05); }
/* 图片缺失时的兜底样式，避免出现破碎图标 */
.prod-img.img-err{ opacity:0; }
.product:hover .prod-svg{ transform:scale(1.05); }
.prod-badge{ position:absolute; top:14px; left:14px; background:var(--brand); color:#fff; font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.04em; }
.prod-cat{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.92); color:var(--ink-2); font-size:.72rem; font-weight:600; padding:5px 11px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }
.prod-body{ padding:22px 22px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
.prod-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.prod-name{ font-size:1.15rem; }
.prod-price{ font-family:var(--font-display); font-size:1.2rem; color:var(--accent); white-space:nowrap; }
.prod-sku{ font-size:.76rem; color:var(--ink-3); font-weight:600; letter-spacing:.06em; }
.prod-tag{ font-size:.95rem; color:var(--ink-2); font-weight:500; }
.prod-desc{ font-size:.88rem; color:var(--ink-2); }
.prod-bullets{ display:flex; flex-wrap:wrap; gap:6px; }
.prod-bullets li{ font-size:.76rem; background:var(--bg); color:var(--ink-2); padding:5px 11px; border-radius:999px; }
.prod-sizes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }
.prod-sizes li{ font-size:.74rem; font-weight:600; color:var(--ink-2); border:1px solid var(--line); padding:4px 9px; border-radius:6px; }
@media(max-width:1000px){ .products{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .products{ grid-template-columns:1fr; } }

/* ---------- 关于 ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:10px 0 18px; }
.about-text p{ color:var(--ink-2); font-size:1.02rem; }
.about-points{ margin-top:24px; display:flex; flex-direction:column; gap:12px; }
.about-points li{ display:flex; gap:12px; align-items:flex-start; font-size:.96rem; }
.about-points svg{ color:var(--accent); flex:0 0 auto; margin-top:4px; }
.about-visual{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/5; background:var(--bg-2); box-shadow:var(--shadow); }
.about-visual img{ width:100%; height:100%; object-fit:cover; }
.about-note{
  position:absolute; left:20px; bottom:20px; right:20px; background:rgba(255,255,255,.96);
  border-radius:16px; padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow:var(--shadow-sm);
}
.about-note b{ font-family:var(--font-display); font-size:1.2rem; display:block; }
.about-note span{ font-size:.84rem; color:var(--ink-3); }
@media(max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }

/* ---------- 能力 ---------- */
.caps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cap{ background:var(--card); border-radius:var(--radius); padding:28px; border:1px solid var(--line); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.cap:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(111,155,139,.3); }
.cap-icon{ width:50px; height:50px; border-radius:13px; background:rgba(217,139,122,.12); color:var(--accent); display:grid; place-items:center; margin-bottom:16px; }
.cap h4{ font-family:var(--font-sans); font-size:1.08rem; }
.cap p{ font-size:.9rem; color:var(--ink-2); margin-top:8px; }
@media(max-width:900px){ .caps-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .caps-grid{ grid-template-columns:1fr; } }

/* ---------- 批发 / 表单 ---------- */
.wholesale-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.wholesale h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin:10px 0 16px; }
.wholesale p{ color:var(--ink-2); font-size:1.02rem; }
.wholesale-perks{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.wholesale-perks li{ display:flex; gap:12px; align-items:center; font-size:.96rem; }
.wholesale-perks b{ font-family:var(--font-display); font-size:1.05rem; }
.wholesale-perks svg{ color:var(--brand); flex:0 0 auto; }
.form-card{ background:var(--card); border-radius:24px; padding:32px; box-shadow:var(--shadow); border:1px solid var(--line); }
.form-card h3{ font-family:var(--font-sans); font-size:1.2rem; margin-bottom:6px; }
.form-card .note{ font-size:.85rem; color:var(--ink-3); margin-bottom:22px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.field label .req{ color:#c0392b; }
.field input,.field textarea,.field select{
  width:100%; font:inherit; font-size:.95rem; padding:12px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--bg); color:var(--ink); transition:border-color .2s, background .2s;
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--brand); background:#fff; }
.field.err input,.field.err textarea{ border-color:#c0392b; }
.err-msg{ color:#c0392b; font-size:.78rem; margin-top:5px; display:none; }
.field.err .err-msg{ display:block; }
.form-card button[type=submit]{ width:100%; justify-content:center; padding:15px; font-size:1rem; }
.form-success{ display:none; text-align:center; padding:20px 0; }
.form-success.show{ display:block; }
.form-success svg{ margin:0 auto 14px; color:var(--brand); }
.form-success h4{ font-family:var(--font-sans); font-size:1.15rem; }
@media(max-width:900px){ .wholesale-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:rgba(255,255,255,.75); padding:70px 0 0; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.12); }
.footer .logo{ color:#fff; }
.footer .logo small{ color:rgba(255,255,255,.5); }
.footer-desc{ font-size:.9rem; line-height:1.75; margin-top:18px; max-width:320px; color:rgba(255,255,255,.68); }
.foot-address{ margin-top:16px; max-width:300px; font-size:.82rem; line-height:1.6; color:rgba(255,255,255,.45); }
.footer h5{ font-family:var(--font-sans); color:#fff; font-size:.95rem; margin-bottom:16px; }
.footer ul li{ margin-bottom:10px; font-size:.9rem; }
.footer #js-foot-contact li{ display:flex; align-items:flex-start; gap:10px; line-height:1.5; color:rgba(255,255,255,.72); }
.footer #js-foot-contact svg{ flex:0 0 auto; margin-top:3px; color:var(--accent); }
.footer #js-foot-contact span{ overflow-wrap:anywhere; }
.footer ul a{ display:block; width:max-content; max-width:100%; margin-bottom:10px; font-size:.9rem; transition:color .2s var(--ease), transform .2s var(--ease); }
.footer ul a:hover{ transform:translateX(3px); }
.footer ul a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:.85rem; flex-wrap:wrap; gap:12px; }
.footer-bottom span{ color:rgba(255,255,255,.5); }
@media(max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- 回到顶部 ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background:var(--brand); color:#fff; z-index:90; display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:all .3s var(--ease);
}
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:hover{ background:var(--brand-2); }

/* ---------- 入场动画 ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } *{ animation:none !important; transition:none !important; } }