/* ========================================
   Jinan Silk Pet - Global Styles
   ======================================== */

:root {
  --bg: #FAF8F3;
  --bg-card: #FFFFFF;
  --bg-dark: #1C1915;
  --text: #1C1915;
  --text-muted: #4E4438;
  --text-light: #FFFFFF;
  --accent: #C4823E;
  --accent-hover: #A66D32;
  --accent-soft: #F5EDE1;
  --accent-cool: #3D6F94;
  --border: #E8E0D5;
  --green: #5B7F4C;
  --blue: #3D6F94;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(28,25,21,0.06);
  --shadow-hover: 0 6px 24px rgba(28,25,21,0.10);
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; }

.container { max-width:1100px; margin:0 auto; padding:0 24px; }
.row { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }
.col-2 { flex:1; min-width:280px; max-width:calc(50% - 12px); }
.col-3 { flex:1; min-width:250px; max-width:calc(33.333% - 16px); }
.col-4 { flex:1; min-width:220px; max-width:calc(50% - 12px); }
.col-5 { flex:1; min-width:180px; max-width:calc(20% - 20px); }

.section { padding:70px 0; }
.section-light { background:#fff; }

.label { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.title { font-size:clamp(26px,4vw,36px); font-weight:800; letter-spacing:-0.4px; line-height:1.25; margin-bottom:12px; }
.sub { font-size:15px; color:var(--text-muted); max-width:560px; line-height:1.6; }
.text-center { text-align:center; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:8px; font-weight:600; font-size:15px; text-decoration:none; transition:all 0.2s; cursor:pointer; border:none; font-family:var(--font); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 20px rgba(196,130,62,0.35); }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 6px 28px rgba(196,130,62,0.45); }
.btn-outline { background:transparent; color:var(--accent); border:2px solid var(--accent); }
.btn-outline:hover { background:var(--accent-soft); transform:translateY(-2px); }
.btn-wa { background:#25D366; color:#fff; }
.btn-wa:hover { background:#1ea853; transform:translateY(-2px); }
.btn-dark { background:var(--bg-dark); color:#fff; }
.btn-dark:hover { background:#3D362C; transform:translateY(-2px); }

.hero { position:relative; padding:80px 0 50px; text-align:center; overflow:hidden; }
.hero.has-bg { background:linear-gradient(180deg,rgba(255,255,255,0.88) 0%,rgba(251,248,244,0.92) 100%); }
.hero-bg { position:absolute; inset:0; z-index:-1; width:100%; height:100%; object-fit:cover; }
/* 纯文字Hero（无背景图时的默认渐变） */
.hero:not(.has-bg) { background:linear-gradient(180deg,#fff 0%,var(--bg) 100%); }
.hero h1 { font-size:clamp(28px,5vw,44px); font-weight:800; line-height:1.15; letter-spacing:-0.5px; margin:0 auto 12px; color:var(--text); max-width:680px; }
.hero h1 .accent { color:var(--accent); }
.hero .sub { font-size:17px; color:var(--text-muted); max-width:580px; margin:0 auto 24px; line-height:1.7; }
.hero .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }

.trust-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 22px; font-size:13px; color:#4E4438; font-weight:600; }
.trust-bar span { display:flex; align-items:center; gap:4px; }

.metrics { background:var(--bg-dark); color:#fff; padding:48px 0; }
.metrics .row { text-align:center; justify-content:center; }
.metrics .num { font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.1; }
.metrics .num.c { color:var(--accent); }
.metrics .mlabel { text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; opacity:0.7; margin-top:4px; }

.cert-item { text-align:center; }
.cert-item .cert-badge {
  width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px; font-size:15px; font-weight:800; color:#fff; letter-spacing:1px;
  position:relative; box-shadow:0 4px 20px rgba(0,0,0,0.12), inset 0 0 0 3px rgba(255,255,255,0.4);
}
/* 印章双层边框 */
.cert-item .cert-badge::before {
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px dashed rgba(255,255,255,0.5); pointer-events:none;
}
.cert-item .cert-badge::after {
  content:''; position:absolute; inset:4px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.25); pointer-events:none;
}
/* 印章光晕 */
.cert-badge-iso  { background:linear-gradient(135deg,#1a3a5c,#2d6a9f); }
.cert-badge-halal { background:linear-gradient(135deg,#1a6b3c,#2d9f5a); }
.cert-badge-haccp { background:linear-gradient(135deg,#6b1a1a,#a33); }
.cert-badge-smds  { background:linear-gradient(135deg,#5a1a6b,#7b2d9b); }
/* 真实扫描件样式（上传后用这个替换 cert-badge） */
.cert-item .cert-img { width:auto; height:90px; max-width:140px; border-radius:6px; box-shadow:var(--shadow); border:1px solid var(--border); display:block; margin:0 auto 10px; object-fit:contain; }
.cert-item .cert-name { font-size:13px; font-weight:700; }
.cert-item .cert-desc { font-size:11px; color:var(--text-muted); }

.card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:all 0.25s; text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card:hover { box-shadow:var(--shadow-hover); border-color:var(--accent); transform:translateY(-3px); }
.card-img { height:220px; background-size:cover; background-position:center; position:relative; }
.card-tag { position:absolute; top:12px; left:12px; padding:5px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:0.5px; color:#fff; }
.card-metrics { display:flex; background:var(--bg-dark); color:#fff; border-bottom:1px solid rgba(255,255,255,0.1); }
.card-metric { flex:1; text-align:center; padding:12px 6px; border-right:1px solid rgba(255,255,255,0.1); }
.card-metric:last-child { border-right:none; }
.card-metric .val { font-size:14px; font-weight:700; color:var(--accent); }
.card-metric .lbl { font-size:10px; text-transform:uppercase; opacity:0.7; font-weight:600; margin-top:2px; }
.card-body { padding:18px; flex-grow:1; }
.card-body h3 { font-size:17px; font-weight:700; margin-bottom:4px; }
.card-body .desc { font-size:13px; color:#4E4438; line-height:1.55; margin-bottom:10px; }
.card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.card-tags span { padding:3px 8px; border-radius:4px; font-size:11px; font-weight:600; background:var(--accent-soft); color:var(--accent); }

.sol-card { background:#fff; border-radius:var(--radius); padding:24px 20px; box-shadow:var(--shadow); border:1px solid var(--border); }
.sol-card .icon { margin-bottom:8px; }
.sol-card .icon svg { width:28px; height:28px; display:block; }
.sol-card h3 { font-size:16px; font-weight:700; margin-bottom:4px; }
.sol-card p { font-size:13px; color:#4E4438; line-height:1.6; }

.testimonial { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); border:1px solid var(--border); }
.testimonial .stars { color:#E8B44F; font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.testimonial .quote { font-size:14px; font-style:italic; line-height:1.7; margin-bottom:12px; }
.testimonial .author { font-size:13px; color:var(--text-muted); }
.testimonial .author strong { color:var(--text); }

.factory-img { display:grid; grid-template-columns:1fr 1fr; gap:10px; background:#fff; border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); border:1px solid var(--border); }
.factory-img img { width:100%; border-radius:6px; }

.cta-section { background:var(--bg-dark); color:#fff; text-align:center; padding:60px 0; }
.cta-section h2 { font-size:clamp(24px,4vw,32px); font-weight:800; margin-bottom:8px; }
.cta-section p { color:rgba(255,255,255,0.7); font-size:15px; margin-bottom:24px; }

.country-strip { display:flex; justify-content:center; flex-wrap:wrap; gap:24px 36px; margin-top:20px; opacity:0.6; font-size:14px; font-weight:600; }

.site-header { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; padding:12px 0; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.site-header .logo-img { height:56px; width:auto; }
.site-header .nav { display:flex; gap:24px; align-items:center; font-size:15px; font-weight:600; flex-wrap:wrap; }
.site-header .nav a { color:var(--text); text-decoration:none; transition:color 0.2s; position:relative; }
.site-header .nav a:hover { color:var(--accent); }
.site-header .nav a[aria-current="page"] { color:var(--accent); }
.site-header .nav a[aria-current="page"]::after { content:''; position:absolute; bottom:-4px; left:0; width:100%; height:2px; background:var(--accent); border-radius:2px; }
.site-header .lang-switch { display:flex; gap:6px; font-size:13px; font-weight:700; flex-wrap:wrap; }
.site-header .lang-switch a { padding:5px 10px; border-radius:6px; text-decoration:none; color:var(--text-muted); transition:all 0.2s; cursor:pointer; border:2px solid transparent; white-space:nowrap; }
.site-header .lang-switch a.active { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.site-header .lang-switch a:hover { color:var(--accent); }

.hamburger { display:none; flex-direction:column; gap:4px; cursor:pointer; background:none; border:none; padding:4px; }
.hamburger span { display:block; width:26px; height:3px; background:var(--text); border-radius:2px; transition:all 0.3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.floating-contact { position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:999; display:flex; flex-direction:column; gap:10px; }
.floating-contact a { display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--bg-dark); color:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.15); transition:all 0.25s; text-decoration:none; position:relative; }
.floating-contact a:hover { transform:scale(1.12); background:var(--accent); }
.floating-contact a svg { width:20px; height:20px; fill:#fff; }
.floating-contact a .tooltip { position:absolute; right:58px; background:var(--bg-dark); color:#fff; padding:6px 12px; border-radius:6px; font-size:12px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.floating-contact a:hover .tooltip { opacity:1; }
.floating-contact .wa-btn { background:#25D366; }
.floating-contact .wa-btn:hover { background:#1ea853; }

.footer { background:var(--bg-dark); color:rgba(255,255,255,0.65); padding:44px 0 32px; font-size:13px; }
.footer .f-col h4 { color:#fff; font-size:14px; font-weight:700; margin-bottom:12px; }
.footer .f-col a { color:rgba(255,255,255,0.6); text-decoration:none; display:block; margin-bottom:6px; transition:color 0.2s; }
.footer .f-col a:hover { color:#fff; }
.footer .f-col p { margin-bottom:6px; line-height:1.8; }
.footer hr { border:none; border-top:1px solid rgba(255,255,255,0.1); margin:24px 0 16px; }
.footer .bottom { text-align:center; font-size:12px; opacity:0.5; }

.social-icon { display:inline-flex; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.12); align-items:center; justify-content:center; transition:all 0.2s; text-decoration:none; }
.social-icon:hover { background:var(--accent); transform:translateY(-2px); }
.social-icon svg { width:18px; height:18px; fill:#fff; }

/* ---- Inquiry Form ---- */
.inquiry-form { max-width:620px; margin:0 auto; background:#fff; border-radius:14px; padding:36px 32px; box-shadow:0 4px 32px rgba(28,25,21,0.10); border:2px solid var(--accent); }
.inquiry-row { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.inquiry-field { flex:1; min-width:200px; }
.inquiry-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.inquiry-field .req { color:#BF5A54; }
.inquiry-field input, .inquiry-field select, .inquiry-field textarea {
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:8px;
  font-size:14px; font-family:var(--font); background:#FAF8F5; transition:border-color 0.2s;
}
.inquiry-field input:focus, .inquiry-field select:focus, .inquiry-field textarea:focus { outline:none; border-color:var(--accent); background:#fff; }
.inquiry-field textarea { resize:vertical; min-height:90px; }

/* ---- Cookie Consent ---- */
.cookie-bar { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#fff; border-top:2px solid var(--accent); padding:16px 24px; display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; box-shadow:0 -4px 24px rgba(0,0,0,0.10); font-size:13px; color:var(--text-muted); line-height:1.5; display:none; }
.cookie-bar.show { display:flex; }
.cookie-bar p { max-width:600px; margin:0; }
.cookie-bar .cookie-btns { display:flex; gap:10px; flex-shrink:0; }
.cookie-bar .cookie-btns button { padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all 0.2s; }
.cookie-bar .cookie-accept { background:var(--accent); color:#fff; border:none; }
.cookie-bar .cookie-accept:hover { background:var(--accent-hover); }
.cookie-bar .cookie-decline { background:transparent; color:var(--text-muted); border:1.5px solid var(--border); }
.cookie-bar .cookie-decline:hover { border-color:var(--text-muted); }

/* ---- Product Demo Video (产品试验/演示视频) ---- */
.demo-video { width:100%; max-width:720px; border-radius:var(--radius); box-shadow:var(--shadow); display:block; margin:0 auto; }
.demo-video-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
.demo-video-item { background:#fff; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); border:1px solid var(--border); }
.demo-video-item h4 { font-size:15px; font-weight:700; margin-bottom:10px; }
.demo-video-item video { width:100%; border-radius:6px; display:block; }

/* ---- Production Process (生产流程) ---- */
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px; }
.process-step { text-align:center; }
.process-step .step-num { width:48px; height:48px; border-radius:50%; background:var(--accent); color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.process-step .step-img { width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:10px; }
.process-step h4 { font-size:15px; font-weight:700; margin-bottom:4px; }
.process-step p { font-size:13px; color:var(--text-muted); line-height:1.5; }

/* ---- Responsive ---- */
@media (max-width:768px) {
  .site-header .nav { display:none; flex-direction:column; width:100%; gap:12px; padding:12px 0; border-top:1px solid var(--border); }
  .site-header .nav.open { display:flex; }
  .site-header .nav a { font-size:16px; }
  .hamburger { display:flex; }
  .site-header .container { flex-wrap:wrap; }
  .site-header .lang-switch { margin-left:auto; }
  .col-2,.col-3,.col-4,.col-5 { min-width:100%; max-width:100%; }
  .hero { padding:48px 0 36px; }
  .hero .actions { flex-direction:column; align-items:center; }
  .hero .actions .btn { width:85%; justify-content:center; }
  .floating-contact { right:8px; }
  .floating-contact a { width:40px; height:40px; }
  .floating-contact a .tooltip { display:none; }
  .factory-img { grid-template-columns:1fr; }
  .row { gap:16px; }
}

@media (max-width:480px) {
  .site-header .logo-img { height:40px; }
  .site-header .lang-switch a { padding:3px 6px; font-size:11px; }
  .site-header .nav a { font-size:15px; }
  .btn { padding:12px 20px; font-size:14px; }
  .hero h1 { font-size:26px; }
}