:root{--primary:#0a6cb8;--primary-light:#2b8ad0;--primary-dark:#073e6b;--brand-blue:#0a76c4;--accent:#dd7400;--accent-light:#ef9327;--brand-green:#1f8a46;--text:#2b323c;--text-light:#6c7683;--bg:#e6ebf2;--bg-white:#fff;--border:#ccd7e3;--radius:8px;--shadow:0 2px 15px rgba(7,62,107,0.09);--shadow-hover:0 10px 32px rgba(7,62,107,0.16);--transition:all 0.3s ease;--font:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;--mw:1440px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);line-height:1.7;background:var(--bg)}
a{text-decoration:none;color:var(--primary-light);transition:var(--transition)}
a:hover{color:var(--primary)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(246,129,0,0.35);outline-offset:3px}
img{max-width:100%;height:auto}
ul{list-style:none}
.container{width:min(100% - 40px,var(--mw));margin:0 auto;padding:0}
.header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--bg-white);box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:var(--transition)}
.header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:flex;align-items:center;gap:12px;color:var(--primary-dark);font-weight:700;font-size:1.1rem;letter-spacing:1px;flex-shrink:0}
.header .logo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:13px;row-gap:2px;min-width:430px}
.header .logo-brand-image{grid-row:1/3}
.header .logo::before{content:"淮安淮海测控技术有限公司";display:block;grid-column:2;grid-row:1;color:var(--primary-dark);font-size:1.02rem;line-height:1;font-weight:800;letter-spacing:0;white-space:nowrap}
.header .logo::after{content:"HUAIHAI MEASUREMENT & CONTROL";display:block;grid-column:2;grid-row:2;color:#7f8c8d;font-size:0.68rem;line-height:1;font-weight:600;letter-spacing:0}
.logo-brand{display:inline-flex;line-height:0}
.logo-brand-image{display:block;width:auto;height:44px;max-height:44px;object-fit:contain}
.logo-mark{width:44px;height:44px;object-fit:contain;display:block;flex-shrink:0}
.logo-brand-image{display:block;width:auto;height:44px;max-height:44px;object-fit:contain}
.logo-icon{width:42px;height:42px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;font-weight:800;flex-shrink:0}

.nav{display:flex;gap:2px}
.nav a{padding:8px 18px;color:var(--text);font-size:0.92rem;border-radius:6px;transition:var(--transition);position:relative}
.nav a:hover,.nav a.active{background:rgba(10,124,214,0.07);color:var(--primary)}
.nav a.active::after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--primary);border-radius:2px}
.header-tel{display:flex;flex-direction:column;align-items:flex-end;padding:6px 0 6px 18px;border-left:1px solid var(--border);line-height:1.2;color:var(--primary-dark)}
.header-tel span{font-size:0.72rem;color:var(--text-light)}
.header-tel strong{font-size:0.98rem;letter-spacing:0;color:var(--primary)}
.header-tel:hover strong{color:var(--accent)}
.header-tools{display:flex;align-items:center;gap:8px;margin-left:12px;padding-left:12px;border-left:1px solid var(--border)}
.site-tool-btn{height:34px;padding:0 11px;border:1px solid rgba(10,124,214,0.18);border-radius:7px;background:#f7fafc;color:var(--primary-dark);font-size:0.78rem;font-weight:800;line-height:1;cursor:pointer;transition:var(--transition);white-space:nowrap}
.site-tool-btn:hover,.site-tool-btn[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(10,124,214,0.16)}
.is-english .nav a{padding-left:14px;padding-right:14px}
.is-english .header-tel span{font-size:0.68rem}
.is-english .section-title p,.is-english .feature-card p,.is-english .highlight-card p,.is-english .industry-card p,.is-english .case-card p{line-height:1.65}
.menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}
/* HHCK-FLOAT-LEFT：微信咨询挪到左下角 */
.floating-contact{position:fixed;left:22px;bottom:94px;z-index:1100;font-family:var(--font)}
.floating-contact-toggle{width:58px;height:68px;border:0;border-radius:18px;background:linear-gradient(135deg,#148f52,#0a7038);color:#fff;box-shadow:0 14px 32px rgba(13,143,75,0.28);cursor:pointer;font-size:0.72rem;font-weight:800;line-height:1.12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 7px}
.floating-contact-toggle:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(13,143,75,0.35)}
.wechat-mark{position:relative;display:block;width:25px;height:20px;margin-bottom:1px}
.wechat-mark::before,.wechat-mark::after{content:"";position:absolute;border-radius:50%;background:#fff}
.wechat-mark::before{left:0;top:3px;width:17px;height:13px;box-shadow:inset 5px 4px 0 -3px #0d8f4b,inset 11px 4px 0 -3px #0d8f4b}
.wechat-mark::after{right:0;bottom:1px;width:15px;height:11px;box-shadow:inset 4px 3px 0 -3px #0d8f4b,inset 10px 3px 0 -3px #0d8f4b}
.wechat-label{display:flex;flex-direction:column;align-items:center;gap:1px;letter-spacing:0}
.wechat-label b{display:block;font-size:0.72rem;line-height:1;font-weight:800}
.floating-contact-panel{position:absolute;left:0;bottom:66px;width:238px;padding:16px;border:1px solid rgba(13,143,75,0.18);border-radius:8px;background:#fff;box-shadow:0 22px 55px rgba(10,79,138,0.18);opacity:0;pointer-events:none;transform:translateY(8px);transition:var(--transition)}
.floating-contact.open .floating-contact-panel{opacity:1;pointer-events:auto;transform:translateY(0)}
.floating-contact-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--primary-dark)}
.floating-contact-head strong{font-size:0.98rem}
.floating-contact-head button{width:28px;height:28px;border:0;border-radius:6px;background:#f0f5f8;color:var(--text-light);font-size:1.2rem;line-height:1;cursor:pointer}
.wechat-code{height:190px;border:1px solid rgba(13,143,75,0.18);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}
.wechat-code img{display:block;width:100%;height:100%;object-fit:contain;padding:6px}
.floating-contact p{margin:0 0 6px;color:var(--text);line-height:1.45}
.floating-contact p b{display:block;font-size:0.78rem;color:var(--text-light);font-weight:600}
.floating-contact p strong{display:block;color:var(--primary-dark);font-size:1.08rem;letter-spacing:0}
.floating-contact small{display:block;color:var(--text-light);font-size:0.76rem;line-height:1.6;margin-bottom:12px}
.floating-contact-actions{display:grid;grid-template-columns:1fr;gap:8px}
.floating-contact-actions button,.floating-contact-actions a{height:36px;border:0;border-radius:7px;background:var(--primary);color:#fff;font-size:0.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer}
.floating-contact-actions a{background:var(--accent)}
.hero{min-height:100vh;padding:120px 0 80px;background:linear-gradient(158deg,#02182b 0%,#052f52 38%,#08456e 68%,#0a5480 100%);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 34%,rgba(120,190,240,0.12),transparent 34%),radial-gradient(circle at 12% 78%,rgba(10,118,196,0.12),transparent 42%),linear-gradient(115deg,rgba(2,18,36,0.50),rgba(2,18,36,0.14));pointer-events:none;z-index:0}
.hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
.hero-tech-overlay{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.58}
.tech-ring{position:absolute;border:1px solid rgba(255,255,255,0.12);border-radius:50%;box-shadow:inset 0 0 0 18px rgba(255,255,255,0.018)}
.tech-ring::before,.tech-ring::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,0.08)}
.tech-ring::before{inset:18%}.tech-ring::after{inset:38%;background:rgba(255,255,255,0.05)}
.tech-ring-a{width:260px;height:260px;right:34%;bottom:11%;animation:techFloat 9s ease-in-out infinite}
.tech-ring-b{width:170px;height:170px;right:7%;top:18%;animation:techFloat 11s ease-in-out infinite reverse}
.tech-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent);transform-origin:center}
.tech-line::after{content:"";position:absolute;right:16%;top:-3px;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.38);box-shadow:0 0 16px rgba(255,255,255,0.35)}
.tech-line-a{width:360px;right:19%;bottom:24%;transform:rotate(-22deg)}
.tech-line-b{width:280px;right:4%;top:37%;transform:rotate(31deg)}
.tech-chip{position:absolute;padding:6px 10px;border:1px solid rgba(255,255,255,0.14);border-radius:4px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.28);font-size:0.7rem;font-weight:800;letter-spacing:1px}
.tech-chip-a{right:41%;bottom:29%}
.tech-chip-b{right:11%;top:48%}
.hero .container{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:minmax(0,680px) minmax(520px,660px);align-items:start;justify-content:space-between;gap:12px;min-height:calc(100vh - 200px)}
.hero-content{max-width:680px;min-height:744px;margin-left:5%;transform:translateY(2vh);display:flex;flex-direction:column}
.hero h1{font-size:3.25rem;line-height:1.18;margin-bottom:24px;font-weight:800;text-shadow:0 8px 26px rgba(0,0,0,0.18)}
.hero p{font-size:1.08rem;opacity:0.92;margin-bottom:34px;line-height:2;max-width:650px}
.hero-buttons{display:flex;gap:14px;flex-wrap:wrap}
.hero-hotline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding:12px 16px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:8px;width:max-content;max-width:100%;backdrop-filter:blur(8px)}
.hero-hotline span{font-size:0.82rem;color:rgba(255,255,255,0.72)}
.hero-hotline strong{font-size:1.08rem;color:#fff}
.hero-hotline em{font-style:normal;font-size:0.82rem;color:rgba(255,255,255,0.68)}
.hero-message-stats{width:min(100%,646px);margin-top:22px;margin-bottom:34px;padding:18px;border:1px solid rgba(255,255,255,0.15);border-radius:8px;background:rgba(255,255,255,0.075);box-shadow:0 18px 50px rgba(0,0,0,0.1);backdrop-filter:blur(10px)}
.message-stats-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.message-stats-head span{font-size:1rem;font-weight:800;color:#fff}
.message-stats-head em{font-style:normal;font-size:0.76rem;color:rgba(255,255,255,0.52)}
.message-stats-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:12px}
.message-stats-grid div{position:relative;padding:16px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;background:rgba(10,79,138,0.18);overflow:hidden}
.message-stats-grid div::after{content:"";position:absolute;right:-28px;bottom:-38px;width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,0.08)}
.message-stats-grid small{display:block;margin-bottom:4px;color:rgba(255,255,255,0.58);font-size:0.78rem}
.message-stats-grid strong{display:block;color:#fff;font-size:1.95rem;line-height:1.15;font-weight:800;letter-spacing:0}
.message-stats-grid .message-growth{color:#7ee2a8}
.hero-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:auto;max-width:660px}
.hero-process span{position:relative;display:flex;flex-direction:column;gap:2px;min-height:62px;padding:11px 12px;border:1px solid rgba(255,255,255,0.16);border-radius:8px;background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.86);font-size:0.82rem;backdrop-filter:blur(8px)}
.hero-process span::after{content:"";position:absolute;right:-11px;top:50%;width:12px;height:1px;background:rgba(255,255,255,0.26)}
.hero-process span:last-child::after{display:none}
.hero-process b{font-size:0.76rem;color:rgba(255,255,255,0.5);letter-spacing:0;font-weight:800}
.hero-products{width:min(100%,660px);justify-self:end;transform:translateY(2vh);padding:22px;border:1px solid rgba(255,255,255,0.16);border-radius:8px;background:rgba(255,255,255,0.07);box-shadow:0 24px 70px rgba(0,0,0,0.13);backdrop-filter:blur(10px)}
.hero-products-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.hero-products-head span{font-size:1.02rem;font-weight:800;color:#fff}
.hero-products-head a{font-size:0.82rem;font-weight:700;color:rgba(255,255,255,0.78)}
.hero-products-head a:hover{color:#fff}
.hero-products-window{height:560px;overflow:hidden;position:relative;mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
.hero-products-track{display:flex;flex-direction:column;gap:13px;animation:heroProductRoll 20s linear infinite;will-change:transform}
.hero-product{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:18px;padding:12px;border:1px solid rgba(255,255,255,0.13);border-radius:8px;background:rgba(255,255,255,0.095);color:#fff;transition:background 0.25s ease,transform 0.25s ease,border-color 0.25s ease}
.hero-product:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.28);color:#fff;transform:translateX(-4px)}
.hero-product img{width:112px;height:84px;object-fit:contain;background:rgba(255,255,255,0.9);border-radius:6px;padding:8px;display:block}
.hero-product span{min-width:0}
.hero-product strong{display:block;font-size:1.02rem;color:#fff;margin-bottom:3px}
.hero-product em{display:block;font-style:normal;font-size:0.84rem;color:rgba(255,255,255,0.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-capabilities{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.12)}
.hero-capabilities span{padding:5px 9px;border-radius:999px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.74);font-size:0.76rem;font-weight:700}
.hero-quick-select{position:absolute;right:0;bottom:0;width:min(660px,100%);display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;border:1px solid rgba(255,255,255,0.15);border-radius:8px;background:rgba(10,79,138,0.28);box-shadow:0 18px 50px rgba(0,0,0,0.12);backdrop-filter:blur(10px)}
.hero-quick-select span{display:block;margin-bottom:3px;color:rgba(255,255,255,0.58);font-size:0.76rem;font-weight:700}
.hero-quick-select strong{display:block;color:#fff;font-size:0.9rem;line-height:1.55;font-weight:700}
.hero-quick-select a{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:8px 14px;border-radius:6px;background:var(--accent);color:#fff;font-size:0.82rem;font-weight:800}
.hero-quick-select a:hover{background:var(--accent-light);color:#fff}
@keyframes heroProductRoll{0%{transform:translateY(0)}100%{transform:translateY(calc(-50% - 6px))}}
@keyframes techFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(7deg)}}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 32px;border-radius:6px;font-size:0.95rem;font-weight:600;border:none;cursor:pointer;transition:var(--transition)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-light);color:#fff;transform:translateY(-1px);box-shadow:0 4px 15px rgba(246,129,0,0.3)}
.btn:active,.btn-submit:active,.product-detail-link:active,.product-inquiry-link:active{transform:translateY(1px)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.4)}
.btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.08)}
.btn-light{background:var(--bg-white);color:var(--primary);border:1px solid var(--border)}
.btn-light:hover{border-color:var(--primary-light);box-shadow:var(--shadow)}
.page-banner{padding:140px 0 60px;background:linear-gradient(135deg,#052a49,#084f80);color:#fff;text-align:center}
.page-banner h1{font-size:2.2rem;margin-bottom:10px}
.page-banner p{font-size:1rem;opacity:0.85;max-width:600px;margin:0 auto}
.breadcrumb{color:rgba(255,255,255,0.6);font-size:0.85rem;margin-top:12px}
.breadcrumb a{color:rgba(255,255,255,0.7)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{margin:0 6px;color:rgba(255,255,255,0.3)}
.section{padding:80px 0}
.section-alt{background:var(--bg-white)}
.section-title{text-align:center;margin-bottom:50px}
.section-title h2{font-size:2rem;color:var(--primary-dark);margin-bottom:10px;position:relative;display:inline-block}
.section-title h2::after{content:"";display:block;width:50px;height:3px;background:var(--accent);margin:10px auto 0;border-radius:2px}
.section-title p{color:var(--text-light);font-size:0.95rem;max-width:600px;margin:10px auto 0}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.feature-card{background:var(--bg-white);padding:36px 28px;border-radius:var(--radius);box-shadow:var(--shadow);transition:var(--transition);border:1px solid var(--border);text-align:center}
.feature-card,.highlight-card,.product-card,.industry-card,.faq-item,.case-card,.capability-card{position:relative}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--primary-light)}
.feature-icon{width:64px;height:64px;margin:0 auto 18px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.feature-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--primary-dark)}
.feature-card p{font-size:0.9rem;color:var(--text-light);line-height:1.7}
.highlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.highlight-card{background:var(--bg-white);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden;transition:var(--transition);display:flex;flex-direction:column}
.highlight-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(54,163,239,0.35)}
.highlight-image{height:210px;background:#eaf0f6;display:flex;align-items:center;justify-content:center}
.product-img[role="link"]{cursor:pointer}
.product-img[role="link"]:focus-visible{outline:3px solid rgba(246,129,0,0.38);outline-offset:3px}
.highlight-image img{width:100%;height:100%;object-fit:contain;padding:20px;display:block}
.highlight-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.highlight-body span{width:max-content;padding:3px 10px;background:rgba(246,129,0,0.1);color:var(--accent);border-radius:4px;font-size:0.75rem;font-weight:600}
.highlight-body h3{font-size:1.2rem;color:var(--primary-dark)}
.highlight-body p{font-size:0.9rem;color:var(--text-light);line-height:1.75;flex:1}
.highlight-body a{font-size:0.88rem;font-weight:600;color:var(--primary)}
.company-scenes{position:relative;overflow:hidden}
.scene-grid{display:grid;grid-template-columns:1.15fr 0.85fr;grid-template-rows:repeat(2,260px);gap:24px}
.scene-card{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);background:var(--primary-dark);min-height:0}
.scene-card-large{grid-row:span 2}
.scene-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.65s ease}
.scene-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,79,138,0.04),rgba(10,79,138,0.82));pointer-events:none}
.scene-card:hover img{transform:scale(1.035)}
.scene-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:24px;color:#fff}
.scene-body span{display:inline-flex;margin-bottom:8px;padding:3px 10px;border-radius:4px;background:rgba(255,255,255,0.16);font-size:0.76rem;font-weight:700;color:rgba(255,255,255,0.86)}
.scene-body h3{font-size:1.18rem;margin-bottom:8px}
.scene-body p{max-width:620px;font-size:0.9rem;line-height:1.75;color:rgba(255,255,255,0.78)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.product-card{background:var(--bg-white);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:var(--transition);display:flex;flex-direction:column;height:100%}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.product-card:hover .product-img img{transform:scale(1.045)}
.product-img img{transition:transform 0.45s ease}
.product-card.filter-hidden{display:none}
.product-card-visible{animation:cardIn 0.34s ease both;animation-delay:calc(var(--stagger,0) * 18ms)}
.product-empty{display:none;text-align:center;background:var(--bg-white);border:1px dashed rgba(10,124,214,0.22);border-radius:var(--radius);padding:32px;color:var(--text-light);margin-top:24px}
.product-empty.show{display:block}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.product-card-returned{outline:2px solid var(--accent);box-shadow:0 0 0 6px rgba(246,129,0,0.14),var(--shadow-hover)}
.product-img{height:200px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:700;letter-spacing:2px;position:relative}

.product-img img{width:100%;height:100%;object-fit:contain;padding:18px;background:#eaf0f6;display:block}
.product-img-cat{color:rgba(255,255,255,0.95);text-shadow:0 1px 3px rgba(0,0,0,0.2);z-index:1;text-align:center;padding:10px}
.product-img-cat span{display:block;font-size:0.75rem;font-weight:400;opacity:0.85;margin-top:4px}
.product-img.flow{background:linear-gradient(135deg,#0a6cb8,#2b8ad0)}
.product-img.pressure{background:linear-gradient(135deg,#186b3c,#1f8a46)}
.product-img.temp{background:linear-gradient(135deg,#9e3024,#bd3c30)}
.product-img.level{background:linear-gradient(135deg,#0b5446,#15957c)}
.product-img.display{background:linear-gradient(135deg,#572a68,#75388f)}
.product-img.calibrate{background:linear-gradient(135deg,#2a3c4d,#4a5866)}
.product-body{padding:24px;display:flex;flex-direction:column;flex:1}
.product-body h3{font-size:1.1rem;margin-bottom:8px;color:var(--primary-dark)}
.product-body .tag{display:inline-block;padding:3px 10px;background:rgba(10,124,214,0.08);color:var(--primary);border-radius:4px;font-size:0.75rem;margin-bottom:10px}
.product-body p{font-size:0.9rem;color:var(--text-light);line-height:1.7;margin-bottom:12px;flex:1}
.product-key-badges{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 14px}
.product-key-badges span{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:4px 9px;border-radius:5px;background:rgba(14,102,85,0.09);border:1px solid rgba(14,102,85,0.16);color:#0e6655;font-size:0.76rem;font-weight:800;line-height:1}
.product-detail-badges{margin:0 0 22px}
.product-detail-badges span{min-height:30px;padding:6px 12px;font-size:0.82rem}
.product-more{font-size:0.85rem;font-weight:500;color:var(--primary-light)}
.product-more:hover{color:var(--primary)}
.product-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:18px}
.product-detail-link,.product-inquiry-link{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:6px;font-size:0.82rem;font-weight:600}
.product-detail-link{background:var(--primary);color:#fff}
.product-detail-link:hover{background:var(--primary-light);color:#fff}
.product-inquiry-link{background:rgba(10,124,214,0.08);color:var(--primary)}
.product-inquiry-link:hover{background:rgba(10,124,214,0.14);color:var(--primary-dark)}
.product-detail{max-width:1060px;margin:0 auto}
.product-detail-layout{display:grid;grid-template-columns:420px 1fr;gap:38px;align-items:center;background:var(--bg-white);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius);padding:34px;margin-bottom:26px}
.product-detail-media{height:320px;background:#eaf0f6;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}

.product-detail-media img{width:100%;height:100%;object-fit:contain;padding:22px}
.product-detail-summary .tag{display:inline-block;padding:4px 12px;background:rgba(10,124,214,0.08);color:var(--primary);border-radius:4px;font-size:0.78rem;margin-bottom:12px}
.product-detail-summary h2{font-size:1.8rem;color:var(--primary-dark);margin-bottom:12px}
.product-detail-summary p{color:var(--text-light);line-height:1.9;margin-bottom:22px}
.product-detail-cta{display:flex;gap:12px;flex-wrap:wrap}
.detail-anchor-nav{position:sticky;top:82px;z-index:20;display:flex;gap:10px;flex-wrap:wrap;background:rgba(245,247,250,0.92);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:22px;box-shadow:var(--shadow)}
.detail-anchor-nav a{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:6px;background:var(--bg-white);color:var(--primary);font-size:0.86rem;font-weight:700;border:1px solid var(--border)}
.detail-anchor-nav a:hover{background:var(--primary);color:#fff}
.detail-section{background:var(--bg-white);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:var(--radius);padding:30px;margin-bottom:22px}
.detail-section h3{font-size:1.2rem;color:var(--primary-dark);margin-bottom:16px}
.detail-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0}
.detail-list li{list-style:none;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:14px;color:var(--text-light);font-size:0.9rem;line-height:1.7}
.detail-table-wrap{overflow-x:auto}
.detail-table{width:100%;border-collapse:collapse;font-size:0.9rem}
.detail-table th,.detail-table td{border:1px solid var(--border);padding:13px 16px;text-align:left;vertical-align:top}
.detail-table th{width:180px;background:#eaf0f6;color:var(--primary-dark);font-weight:700}
.detail-table td{color:var(--text-light)}
.application-tags{display:flex;flex-wrap:wrap;gap:10px}
.application-tags span{padding:9px 16px;background:rgba(10,124,214,0.08);color:var(--primary);border-radius:20px;font-size:0.88rem;font-weight:600}
.detail-tip{border-left:4px solid var(--accent)}
.detail-tip p{color:var(--text-light);line-height:1.8}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-image{height:400px;background:var(--bg-white);border-radius:var(--radius);display:block;overflow:hidden}
.about-image img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.about-text h2{font-size:1.8rem;color:var(--primary-dark);margin-bottom:18px}
.about-text p{color:var(--text-light);margin-bottom:16px;line-height:1.8}
.company-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.company-gallery figure{position:relative;overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);background:var(--bg-white);height:250px}
.company-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.6s ease}
.company-gallery figure:hover img{transform:scale(1.04)}
.company-gallery figcaption{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:4px;background:rgba(10,79,138,0.82);color:#fff;font-size:0.86rem;font-weight:700}
.capability-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.capability-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;transition:var(--transition)}
.capability-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(54,163,239,0.35)}
.capability-card span{display:inline-flex;margin-bottom:14px;padding:4px 10px;border-radius:4px;background:rgba(10,124,214,0.08);color:var(--primary);font-size:0.78rem;font-weight:800}
.capability-card h3{font-size:1.05rem;color:var(--primary-dark);margin-bottom:8px}
.capability-card p{font-size:0.88rem;color:var(--text-light);line-height:1.75}
.timeline{max-width:960px;margin:0 auto;position:relative}
.timeline::before{content:"";position:absolute;left:88px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--primary-light),rgba(54,163,239,0.08))}
.timeline-item{display:grid;grid-template-columns:150px 1fr;gap:24px;position:relative;margin-bottom:22px}
.timeline-item:last-child{margin-bottom:0}
.timeline-item time{font-weight:800;color:var(--primary);padding-top:3px}
.timeline-item div{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;transition:var(--transition)}
.timeline-item div:hover{transform:translateX(4px);box-shadow:var(--shadow-hover)}
.timeline-item h3{font-size:1.05rem;color:var(--primary-dark);margin-bottom:6px}
.timeline-item p{font-size:0.9rem;color:var(--text-light);line-height:1.75}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.case-card{position:relative;overflow:hidden;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;transition:var(--transition)}
.case-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.case-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(54,163,239,0.35)}
.case-card span{display:inline-flex;margin-bottom:14px;padding:4px 10px;border-radius:4px;background:rgba(246,129,0,0.1);color:var(--accent);font-size:0.76rem;font-weight:800}
.case-card h3{font-size:1.12rem;color:var(--primary-dark);margin-bottom:10px}
.case-card p{font-size:0.9rem;color:var(--text-light);line-height:1.75;margin-bottom:16px}
.case-card ul{display:flex;flex-wrap:wrap;gap:8px}
.case-card li{padding:6px 10px;border-radius:999px;background:rgba(10,124,214,0.08);color:var(--primary);font-size:0.78rem;font-weight:700}
.stats{background:var(--primary-dark);color:#fff;padding:60px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat-item h3{font-size:2.4rem;font-weight:800;margin-bottom:4px}
.stat-item p{opacity:0.7;font-size:0.9rem}
.footer{background:var(--primary-dark);color:rgba(255,255,255,0.75);padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer h3,.footer h4{color:#fff;margin-bottom:18px}
.footer h4{font-size:1rem}
.footer-about .logo{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;justify-content:start;column-gap:12px;row-gap:3px;color:#fff;margin-bottom:16px;min-width:0;width:max-content;max-width:100%;padding:0}
.footer-about .logo::before{content:"淮安淮海测控技术有限公司";display:block;grid-column:2;grid-row:1;color:rgba(255,255,255,0.92);font-size:0.98rem;line-height:1;font-weight:800;letter-spacing:0;white-space:nowrap}
.footer-about .logo::after{content:"HUAIHAI MEASUREMENT & CONTROL";display:block;grid-column:2;grid-row:2;color:rgba(255,255,255,0.46);font-size:0.62rem;line-height:1;font-weight:600;letter-spacing:0}
.footer-about .logo-mark{background:transparent;border-radius:0;padding:0}
.footer-about .logo-brand{width:max-content;background:transparent;border-radius:0;padding:0}
/* HHCK-FOOTER-LOGO：页脚 logo 换成白色透明底版；
   原来放的是蓝色渐变 logo，在深蓝底上又叠了 opacity:0.88 + saturate(0.85) + brightness(1.22)，
   蓝压蓝几乎看不清（用户反馈"太丑了"）。白色版在 #073e6b 上对比度足够，
   再加一点点 drop-shadow 让白字边缘不发飘。 */
.footer-about .logo-brand-image{grid-row:1/3;display:block;width:auto;height:38px;max-height:38px;background:transparent;border-radius:0;padding:0;opacity:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.28))}
.footer-about p{font-size:0.88rem;line-height:1.8;color:rgba(255,255,255,0.55)}
.footer-links li{margin-bottom:10px}
.footer-links a{color:rgba(255,255,255,0.5);font-size:0.88rem}
.footer-links a:hover{color:#fff}
.footer-contact li{margin-bottom:10px;font-size:0.88rem;display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;color:rgba(255,255,255,0.55)}
.footer-contact .icon{width:22px;text-align:center;line-height:1.6;flex-shrink:0}
.footer-contact strong{color:rgba(255,255,255,0.78);font-weight:600}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:0.82rem;color:rgba(255,255,255,0.35);flex-wrap:wrap;gap:10px}
.footer-bottom a{color:rgba(255,255,255,0.45)}
.footer-bottom a:hover{color:#fff}
.footer-records{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.gongan-link{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.gongan-link img{width:16px;height:16px;object-fit:contain;display:block}
.product-img img,.product-detail-media img,.highlight-image img,.hero-product-card img{cursor:zoom-in}
.image-lightbox{position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;padding:38px 24px;background:rgba(6,21,32,0.86);backdrop-filter:blur(8px)}
.image-lightbox.open{display:flex}
.image-lightbox img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain;background:#fff;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,0.35)}
.image-lightbox p{position:absolute;left:24px;right:24px;bottom:18px;text-align:center;color:rgba(255,255,255,0.82);font-size:0.92rem}
.image-lightbox-close{position:absolute;right:24px;top:20px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,0.14);color:#fff;font-size:28px;line-height:42px;cursor:pointer;transition:var(--transition)}
.image-lightbox-close:hover{background:rgba(255,255,255,0.25)}
.lightbox-open{overflow:hidden}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}
.contact-info h3{font-size:1.3rem;color:var(--primary-dark);margin-bottom:20px}
.contact-item{display:flex;gap:14px;margin-bottom:24px}
.contact-item-icon{width:44px;height:44px;background:rgba(10,124,214,0.08);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.contact-item h4{font-size:0.95rem;margin-bottom:2px;color:var(--primary-dark)}
.contact-item p{font-size:0.9rem;color:var(--text-light)}
.selection-tips{margin-top:30px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.selection-tips h3{font-size:1.08rem;color:var(--primary-dark);margin-bottom:14px}
.selection-tips li{padding:10px 0;border-bottom:1px solid var(--border);font-size:0.9rem;color:var(--text-light)}
.selection-tips li:last-child{border-bottom:none}
.selection-tips strong{color:var(--primary-dark)}
.contact-form{background:var(--bg-white);padding:36px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.contact-form h3{font-size:1.2rem;color:var(--primary-dark);margin-bottom:20px}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-size:0.9rem;font-weight:500;color:var(--text)}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:6px;font-size:0.95rem;font-family:var(--font);transition:var(--transition);background:var(--bg)}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(54,163,239,0.12)}
.form-group textarea{min-height:120px;resize:vertical}
.form-note{margin:-4px 0 14px;color:var(--text-light);font-size:0.82rem;line-height:1.7}
.btn-submit{background:var(--primary);color:#fff;padding:12px 36px;border:none;border-radius:6px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:var(--transition)}
.btn-submit:hover{background:var(--primary-light);transform:translateY(-1px)}
.map-placeholder{width:100%;height:350px;background:#e8ecf1;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text-light);font-size:0.95rem;margin-top:40px}
.map-card{margin-top:40px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.map-toolbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);background:#fff}
.map-toolbar strong{display:block;color:var(--primary-dark);font-size:1rem}
.map-kicker{display:block;color:var(--text-light);font-size:0.78rem;margin-bottom:2px}
.map-compass{display:flex;align-items:center;gap:7px;color:var(--primary);font-size:0.82rem;font-weight:700}
.map-compass i{display:block;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:22px solid var(--accent);filter:drop-shadow(0 3px 5px rgba(246,129,0,0.28))}
.map-canvas{height:390px;position:relative;overflow:hidden;background:linear-gradient(135deg,#c7d8e9,#dfe8f2)}
.map-canvas::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(10,124,214,0.08) 1px,transparent 1px),linear-gradient(90deg,rgba(10,124,214,0.08) 1px,transparent 1px);background-size:46px 46px;opacity:0.55}
.map-water{position:absolute;border-radius:999px;background:rgba(66,153,225,0.22);filter:blur(0.2px)}
.map-water-a{width:420px;height:92px;left:-90px;top:38px;transform:rotate(-11deg)}
.map-water-b{width:520px;height:118px;right:-110px;bottom:36px;transform:rotate(9deg)}
.map-green{position:absolute;padding:11px 16px;background:rgba(39,174,96,0.12);border:1px solid rgba(39,174,96,0.2);border-radius:8px;color:rgba(30,132,73,0.72);font-size:0.82rem}
.map-green-a{right:9%;bottom:18%;transform:rotate(7deg)}
.map-green-b{left:15%;top:19%}
.map-road{position:absolute;background:#fff;border:1px solid rgba(105,127,145,0.18);box-shadow:0 3px 12px rgba(10,124,214,0.08)}
.map-road-main{width:72%;height:24px;left:14%;top:50%;transform:rotate(-5deg);border-radius:999px}
.map-road-ring{width:46%;height:24px;left:27%;top:43%;transform:rotate(24deg);border-radius:999px}
.map-road-east{width:24px;height:86%;right:20%;top:6%;transform:rotate(8deg);border-radius:999px;background:#fff7ed;border-color:rgba(246,129,0,0.2)}
.map-road-west{width:24px;height:82%;left:22%;top:9%;transform:rotate(-8deg);border-radius:999px;background:#d8e6f5;border-color:rgba(54,163,239,0.2)}
.map-road-branch{width:30%;height:16px;left:39%;top:41%;transform:rotate(-16deg);border-radius:999px;background:#fefefe}
.map-road-label{position:absolute;padding:4px 9px;background:rgba(255,255,255,0.86);border:1px solid rgba(10,124,214,0.12);border-radius:4px;color:var(--text-light);font-size:0.78rem}
.label-main{left:43%;top:56%;transform:rotate(-5deg)}
.label-east{right:14%;top:28%;transform:rotate(8deg);color:#b86012}
.label-west{left:15%;top:64%;transform:rotate(-8deg);color:#0a6cb8}
.label-branch{left:52%;top:35%;transform:rotate(-16deg)}
.map-area{position:absolute;left:39%;top:28%;padding:18px 24px;border:1px dashed rgba(10,124,214,0.26);border-radius:10px;background:rgba(255,255,255,0.5);color:rgba(10,79,138,0.62);font-size:0.88rem;font-weight:600}
.map-direction{position:absolute;padding:5px 10px;background:rgba(10,79,138,0.08);border-radius:999px;color:rgba(10,79,138,0.62);font-size:0.76rem}
.dir-huaian{left:8%;top:48%}
.dir-nanjing{right:12%;bottom:10%}
.dir-baoying{right:7%;top:12%}
.map-pin{position:absolute;left:51%;top:43%;transform:translate(-50%,-100%);display:flex;align-items:flex-end;gap:12px;z-index:2}
.pin-dot{position:relative;width:34px;height:34px;background:var(--accent);border:4px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 10px 24px rgba(246,129,0,0.35)}
.pin-dot::before{content:"";position:absolute;inset:8px;background:#fff;border-radius:50%}
.pin-dot::after{content:"";position:absolute;inset:-15px;border:2px solid rgba(246,129,0,0.35);border-radius:50%;animation:mapPulse 1.8s ease-out infinite}
.pin-label{min-width:142px;padding:10px 12px;background:var(--primary-dark);color:#fff;border-radius:6px;font-size:0.86rem;line-height:1.5;box-shadow:0 10px 26px rgba(10,79,138,0.22)}
.pin-label strong{font-size:0.92rem;color:#fff}
.map-scale{position:absolute;left:22px;bottom:18px;display:flex;align-items:center;gap:8px;color:rgba(10,79,138,0.55);font-size:0.76rem}
.map-scale span{display:block;width:64px;height:5px;border-left:2px solid rgba(10,79,138,0.45);border-right:2px solid rgba(10,79,138,0.45);border-bottom:2px solid rgba(10,79,138,0.45)}
.map-info{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 24px;border-top:1px solid var(--border);background:#fff}
.map-info h3{font-size:1rem;color:var(--primary-dark)}
.map-info p{font-size:0.9rem;color:var(--text-light)}
@keyframes mapPulse{0%{transform:scale(0.4);opacity:0.8}100%{transform:scale(1.6);opacity:0}}
.news-list{max-width:800px;margin:0 auto}
.news-item{display:block;background:var(--bg-white);border-radius:var(--radius);padding:28px;margin-bottom:20px;box-shadow:var(--shadow);border:1px solid var(--border);transition:var(--transition)}
.news-item:hover{transform:translateX(4px);box-shadow:var(--shadow-hover)}
.news-date{font-size:0.8rem;color:var(--text-light);margin-bottom:6px}
.news-item h3{font-size:1.1rem;color:var(--primary-dark);margin-bottom:10px}
.news-item:hover h3{color:var(--primary-light)}
.news-item p{font-size:0.9rem;color:var(--text-light);line-height:1.7}
.page-content{padding:60px 0}
.content-rich{max-width:850px;margin:0 auto;background:var(--bg-white);padding:50px;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border)}
.content-rich h2{font-size:1.5rem;color:var(--primary-dark);margin:30px 0 16px}
.content-rich h3{font-size:1.2rem;color:var(--primary-dark);margin:24px 0 12px}
.content-rich p{color:var(--text-light);margin-bottom:14px;line-height:1.9}
.content-rich ul{padding-left:20px;margin-bottom:14px}
.content-rich ul li{list-style:disc;color:var(--text-light);margin-bottom:8px}
.partners{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.partner-item{padding:16px 28px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);font-size:0.9rem;color:var(--text-light);font-weight:500}
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.industry-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:var(--transition)}
.industry-card::after,.faq-item::after,.case-card::after,.capability-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);transform:translateX(-120%);transition:transform 0.7s ease;pointer-events:none}
.industry-card:hover::after,.faq-item:hover::after,.case-card:hover::after,.capability-card:hover::after{transform:translateX(120%)}
.industry-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:rgba(54,163,239,0.35)}
.industry-card h3{font-size:1.05rem;color:var(--primary-dark);margin-bottom:8px}
.industry-card p{font-size:0.88rem;color:var(--text-light);line-height:1.75}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.faq-item{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.faq-item h3{font-size:1rem;color:var(--primary-dark);margin-bottom:10px}
.faq-item p{font-size:0.88rem;color:var(--text-light);line-height:1.8}
.section-action{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}
.product-search-panel{max-width:820px;margin:0 auto 28px;text-align:left;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.product-guide-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;margin-bottom:24px}
.product-guide-panel span{display:inline-flex;margin-bottom:6px;padding:4px 10px;border-radius:4px;background:rgba(246,129,0,0.1);color:var(--accent);font-size:0.76rem;font-weight:800}
.product-guide-panel h2{font-size:1.18rem;color:var(--primary-dark)}
.product-guide-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.product-guide-actions button{border:1px solid rgba(10,124,214,0.12);border-radius:999px;background:rgba(10,124,214,0.08);color:var(--primary);padding:9px 14px;font-weight:800;cursor:pointer;transition:var(--transition)}
.product-guide-actions button:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.product-search-panel label{display:block;font-weight:700;color:var(--primary-dark);margin-bottom:10px}
.product-search-box{display:grid;grid-template-columns:1fr auto;gap:10px}
.product-search-box input{width:100%;height:46px;border:1px solid var(--border);border-radius:6px;background:var(--bg);padding:0 14px;font-family:var(--font);font-size:0.95rem;transition:var(--transition)}
.product-search-box input:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px rgba(54,163,239,0.12)}
.product-search-box button{border:none;border-radius:6px;background:rgba(10,124,214,0.08);color:var(--primary);font-weight:700;padding:0 18px;cursor:pointer;transition:var(--transition)}
.product-search-box button:hover{background:var(--primary);color:#fff}
.product-search-panel p{margin-top:10px;font-size:0.84rem;color:var(--text-light)}
.category-filter{text-align:center;margin-bottom:36px}
.category-filter button{padding:8px 20px;margin:0 4px 8px;border:1px solid var(--border);background:var(--bg-white);border-radius:20px;cursor:pointer;font-size:0.88rem;transition:var(--transition)}
.category-filter button.active,.category-filter button:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.news-feature-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,0.7fr);gap:24px;margin-bottom:28px}
.news-feature,.news-side{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px}
.news-feature span{display:inline-flex;margin-bottom:14px;padding:4px 10px;border-radius:4px;background:rgba(246,129,0,0.1);color:var(--accent);font-size:0.78rem;font-weight:800}
.news-feature h2{font-size:1.45rem;color:var(--primary-dark);line-height:1.45;margin-bottom:12px}
.news-feature p{color:var(--text-light);line-height:1.85;margin-bottom:16px}
.news-feature a{font-weight:800;color:var(--primary)}
.news-side h3{font-size:1.05rem;color:var(--primary-dark);margin-bottom:14px}
.news-side a{display:block;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text);font-size:0.9rem}
.news-side a:last-child{border-bottom:none;color:var(--primary);font-weight:800}
.knowledge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.knowledge-grid article{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.knowledge-grid h3{font-size:1rem;color:var(--primary-dark);margin-bottom:8px}
.knowledge-grid p{font-size:0.86rem;color:var(--text-light);line-height:1.7}
@media(min-width:1600px){:root{--mw:calc(100vw - 160px)}.hero .container{grid-template-columns:minmax(0,760px) minmax(560px,720px);gap:24px}.hero-content{max-width:760px}.hero-products{width:min(100%,720px)}.hero-quick-select{width:min(720px,100%)}.products-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.features-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.highlight-grid,.industry-grid,.faq-grid{gap:30px}.contact-grid{grid-template-columns:minmax(460px,0.9fr) minmax(560px,1.1fr);gap:64px}.product-detail{max-width:1280px}.footer-grid{grid-template-columns:2.2fr 1fr 1fr 1.2fr}}
@media(min-width:2200px){:root{--mw:1920px}}
.reveal-item{opacity:0;transform:translateY(18px);transition:opacity 0.55s ease,transform 0.55s ease}
.reveal-item.is-visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal-item{opacity:1;transform:none;transition:none}.product-card-visible,.tech-ring{animation:none}}
@media(max-width:1280px){.header .logo{min-width:360px}.header .logo::before{font-size:0.88rem}.header .logo::after{font-size:0.54rem}.nav a{padding-left:12px;padding-right:12px}}
@media(max-width:1180px){.header .logo{min-width:310px}.header .logo::before{font-size:0.76rem}.header .logo::after{font-size:0.48rem}.nav a{padding-left:10px;padding-right:10px}}
@media(max-width:1100px){.header-tel{display:none}.highlight-grid,.industry-grid,.faq-grid,.case-grid,.capability-grid,.knowledge-grid{grid-template-columns:repeat(2,1fr)}.company-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:992px){.hero .container{grid-template-columns:1fr;gap:28px}.hero-content{min-height:auto;margin-left:0;display:block}.hero-products,.hero-quick-select,.hero-tech-overlay{display:none}.hero h1{font-size:2.4rem}.about-grid,.contact-grid,.footer-grid,.product-detail-layout,.news-feature-grid{grid-template-columns:1fr}.product-guide-panel{align-items:flex-start;flex-direction:column}.product-guide-actions{justify-content:flex-start}.scene-grid{grid-template-columns:1fr;grid-template-rows:none}.scene-card,.scene-card-large{height:280px;grid-row:auto}.stats-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{gap:30px}.content-rich{padding:30px}.detail-list{grid-template-columns:1fr 1fr}.product-detail-media{height:260px}}
@media(max-width:768px){.container{width:min(100% - 32px,var(--mw))}.product-search-box{grid-template-columns:1fr}.product-search-box button{height:42px}.detail-anchor-nav{position:static}.menu-toggle{display:flex}.nav{position:fixed;top:72px;left:0;right:0;background:var(--bg-white);flex-direction:column;padding:16px;box-shadow:var(--shadow);display:none;z-index:999}.nav.open{display:flex}.nav a{padding:12px 16px}.nav a.active::after{display:none}.hero{min-height:100vh;padding:100px 0 60px}.hero .container{min-height:calc(100vh - 160px)}.hero-content{transform:none}.hero h1{font-size:1.75rem}.hero p{font-size:0.9rem;line-height:1.8}.hero-hotline{width:100%;align-items:flex-start;flex-direction:column;gap:4px}.message-stats-grid{grid-template-columns:1fr 1fr}.message-stats-grid strong{font-size:1.5rem}.hero-process{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}.hero-process span::after{display:none}.section{padding:50px 0}.section-title h2{font-size:1.4rem}.page-banner{padding:110px 0 40px}.page-banner h1{font-size:1.5rem}.features-grid,.products-grid,.highlight-grid,.industry-grid,.faq-grid,.case-grid,.capability-grid,.knowledge-grid,.detail-list,.company-gallery{grid-template-columns:1fr}.timeline::before{left:11px}.timeline-item{grid-template-columns:1fr;gap:10px;padding-left:30px}.highlight-image{height:190px}.scene-card,.scene-card-large{height:240px}.scene-body{padding:18px}.scene-body h3{font-size:1rem}.scene-body p{font-size:0.84rem}.about-image{height:220px}.company-gallery figure{height:220px}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-item h3{font-size:1.8rem}.contact-form{padding:24px}.product-detail-layout,.detail-section{padding:22px}.detail-table th{width:120px}.product-actions a{flex:1}.map-canvas{height:300px}.map-info{align-items:flex-start;flex-direction:column;gap:6px}.map-pin{left:52%;top:44%}.pin-label{min-width:128px;font-size:0.8rem}}
@media(max-width:768px){.container{width:min(100% - 48px,var(--mw))}.hero{padding:112px 0 58px;align-items:flex-start}.hero .container{min-height:calc(100vh - 170px);padding-top:12px}.hero-content{width:calc(100% - 40px);margin-left:auto;margin-right:auto;padding:0}.hero h1{font-size:1.68rem;line-height:1.28;margin-bottom:18px}.hero p{font-size:0.92rem;line-height:1.9;margin-bottom:26px;max-width:none}.hero-buttons,.hero-hotline,.hero-message-stats,.hero-process{width:100%;margin-left:0;margin-right:0}.hero-buttons{gap:10px}.btn{padding:12px 20px}.hero-hotline{margin-top:18px;padding:14px 16px}.hero-message-stats{margin-top:20px;margin-bottom:30px;padding:16px}.message-stats-grid{gap:10px}.message-stats-grid div{padding:13px}.message-stats-grid strong{font-size:1.42rem}.hero-process{gap:12px}.hero-process span{padding:12px;min-height:66px}.floating-contact{left:18px;bottom:22px}.floating-contact-toggle{width:56px;height:66px;font-size:0.68rem}.floating-contact-panel{left:0;bottom:76px;width:min(252px,calc(100vw - 48px))}}
@media(max-width:768px){.header-inner{gap:8px}.header-tools{order:3;margin-left:auto;padding-left:0;border-left:0;gap:6px}.menu-toggle{order:4;flex-shrink:0}.site-tool-btn{height:32px;padding:0 9px;font-size:0.72rem}.logo{gap:8px}.header .logo{min-width:0;max-width:calc(100vw - 108px);column-gap:10px;row-gap:5px;align-items:center}.header .logo::before{font-size:0.68rem;line-height:1.08;font-weight:800;white-space:nowrap;max-width:168px;overflow:hidden;text-overflow:ellipsis;align-self:end}.header .logo::after{font-size:0.4rem;line-height:1;color:#8d9aa3;font-weight:700;white-space:nowrap;max-width:168px;overflow:hidden;text-overflow:ellipsis;align-self:start}.logo-brand-image{height:36px;max-height:36px}.force-desktop-view .header-tools{margin-left:12px;padding-left:12px;border-left:1px solid var(--border)}}
@media(max-width:768px){.footer-about .logo{column-gap:10px}.footer-about .logo::before{font-size:0.84rem}.footer-about .logo::after{font-size:0.52rem}.footer-about .logo-brand-image{height:32px;max-height:32px}}
@media(max-width:480px){.container{width:min(100% - 52px,var(--mw))}.hero h1{font-size:1.5rem}.hero p{font-size:0.9rem}.hero-buttons{flex-direction:column}.btn{width:100%;justify-content:center}.logo{font-size:0.95rem}.header .logo{max-width:calc(100vw - 104px);column-gap:9px}.header .logo::before{font-size:0.64rem;max-width:164px;overflow:hidden;text-overflow:ellipsis}.header .logo::after{font-size:0.37rem;max-width:164px;overflow:hidden}.logo-brand-image{height:34px;max-height:34px}.content-rich{padding:20px}.hero-message-stats{padding:14px}.message-stats-grid small{font-size:0.72rem}.message-stats-grid strong{font-size:1.28rem}}
@media(max-width:480px){.footer-about .logo::before{font-size:0.72rem;white-space:normal;line-height:1.15}.footer-about .logo::after{font-size:0.44rem}.footer-about .logo-brand-image{height:30px;max-height:30px}}

/* ============================================================
   HHCK 资质/案例 区块（素材来自老站）
   ============================================================ */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.cert-card{margin:0;background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition)}
.cert-card:hover{box-shadow:var(--shadow-hover);border-color:var(--brand-blue);transform:translateY(-3px)}
.cert-card img{width:100%;height:230px;object-fit:contain;background:#eaf0f6;padding:10px;display:block}
.cert-card figcaption{padding:10px 12px;text-align:center;font-size:0.86rem;color:var(--text);border-top:1px solid var(--border)}
.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.case-card{background:var(--bg-white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column}
.case-card:hover{box-shadow:var(--shadow-hover);border-color:var(--brand-blue);transform:translateY(-3px)}
.case-card-img{height:190px;background:#eaf0f6;display:flex;align-items:center;justify-content:center}
.case-card-img img{width:100%;height:100%;object-fit:contain;padding:10px}
.case-card-body{padding:14px 16px 18px}
.case-card-body h3{font-size:1rem;color:var(--primary-dark);margin-bottom:8px;line-height:1.5}
.case-card-body p{font-size:0.86rem;color:var(--text-light);line-height:1.75}
@media(max-width:768px){.cert-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.cert-card img{height:170px}.case-grid{grid-template-columns:1fr}}

/* HHCK-CERT-NOTE：资质卡片文字与说明 */
.cert-card figcaption{display:grid;gap:4px;padding:12px 12px 14px;text-align:center;border-top:1px solid var(--border)}
.cert-card figcaption strong{font-size:0.86rem;color:var(--primary-dark);font-weight:700}
.cert-card figcaption span{font-size:0.74rem;color:var(--text-light);line-height:1.5}
.cert-note{margin-top:18px;font-size:0.82rem;color:var(--text-light);text-align:center}
.cert-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* HHCK-INDUSTRY-PHOTOS：行业现场实景（素材来自老站） */
.industry-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:26px}
.industry-photo{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;background:#0b2b47;box-shadow:var(--shadow);transition:var(--transition)}
.industry-photo:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.industry-photo img{width:100%;height:200px;object-fit:cover;display:block;opacity:0.92;transition:transform .4s ease}
.industry-photo:hover img{transform:scale(1.05)}
.industry-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;color:#fff;font-size:0.86rem;font-weight:700;line-height:1.4;background:linear-gradient(180deg,transparent,rgba(3,25,45,0.86))}
.industry-photo figcaption span{display:block;font-size:0.72rem;font-weight:400;color:rgba(255,255,255,0.72);margin-bottom:3px}
@media(max-width:900px){.industry-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.industry-photo img{height:150px}}
@media(max-width:560px){.industry-photos{grid-template-columns:1fr}.industry-photo img{height:170px}}

/* HHCK-HERO-TUNE：首屏观感（鲜亮深蓝 + 克制的冷光晕，面板保持半透明以便阅读） */
.hero-tech-overlay{opacity:0.5}
.hero-products{background:rgba(255,255,255,0.10);backdrop-filter:blur(2px)}
.hero-product{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18)}
.hero-product:hover{background:rgba(255,255,255,0.2);border-color:rgba(0,141,255,0.65)}
.hero-products-head span{color:#fff}
.hero-products-head a{color:rgba(255,255,255,0.85)}
.hero-product span strong{color:#fff}
.hero-product span em{color:rgba(255,255,255,0.78)}
.hero-message-stats{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.16)}
.hero-process span{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.16);color:#fff}
.hero-hotline{background:rgba(255,255,255,0.10);color:#fff}
.hero-hotline strong{color:#fff}
.hero-hotline em{color:rgba(255,255,255,0.8)}

/* ============================================================
   2026-09-17 UI 改造：融入老站(jshhck.cn)视觉识别 + 新产品字段样式
   ============================================================ */

/* 页头：底部加一条品牌蓝渐变细线，呼应老站蓝色主导 */
.header{border-bottom:1px solid rgba(10,79,138,0.06)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--primary-dark),var(--brand-blue) 45%,var(--accent));opacity:0.9}

/* 产品型号标签（卡片与详情页共用） */
.tag-sub{background:rgba(123,132,143,0.13);color:#5d6773}
.tag-model{background:rgba(246,129,0,0.13);color:#c05f00;font-weight:700}
.product-model{display:block;font-style:normal;font-size:0.78rem;font-weight:700;letter-spacing:0.04em;color:#c05f00;margin:-2px 0 8px;font-family:"Consolas","Courier New",monospace}
.product-body h3{font-size:1.02rem;line-height:1.45}

/* 产品卡片：老站那种切角感与更明显的悬停反馈 */
.product-card{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.product-card:hover{border-color:var(--brand-blue)}
.product-card:hover .product-img img{transform:scale(1.04)}
.product-img img{transition:transform .35s ease}

/* 分类筛选按钮：激活态用老站亮蓝 */
.category-filter button.active{background:var(--brand-blue);border-color:var(--brand-blue)}
.category-filter button:hover{border-color:var(--brand-blue);color:var(--brand-blue)}

/* 详情页图集 */
.product-detail-layout{align-items:start}
.product-detail-media{height:auto;display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:18px}
.product-detail-media > img{width:100%;height:320px;object-fit:contain;border-radius:var(--radius);background:#eaf0f6;padding:14px}
.product-detail-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.product-detail-thumb{padding:0;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;overflow:hidden;aspect-ratio:1/1;transition:var(--transition)}
.product-detail-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:4px}
.product-detail-thumb:hover,.product-detail-thumb.active{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,141,255,0.14)}
body.lightbox-open .product-detail-thumbs{pointer-events:none}

/* 详情页「详细说明」折叠块（承载老站原文：原理、参数表、选型表等） */
#detail-notes .detail-note{border:1px solid var(--border);border-radius:6px;background:#fff;margin-bottom:10px;overflow:hidden}
#detail-notes .detail-note summary{padding:12px 42px 12px 16px;cursor:pointer;font-weight:700;color:var(--primary-dark);background:#f7fafd;list-style:none;position:relative}
#detail-notes .detail-note summary::-webkit-details-marker{display:none}
#detail-notes .detail-note summary::after{content:"展开";position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:0.75rem;font-weight:400;color:var(--brand-blue)}
#detail-notes .detail-note[open] summary::after{content:"收起"}
#detail-notes .detail-note[open] summary{border-bottom:1px solid var(--border)}
#detail-notes .detail-note-body{padding:14px 16px;font-size:0.88rem;line-height:1.95;color:var(--text-light);white-space:pre-wrap;word-break:break-word;max-height:460px;overflow:auto}

/* 老站风格：分区标题左侧竖条 + 绿色小标识 */
.section-title h2::before{content:"";display:inline-block;width:4px;height:0.82em;background:var(--brand-blue);border-radius:2px;margin-right:10px;vertical-align:-2px}
.section-title h2::after{background:var(--accent)}

/* 按钮：主按钮沿用老站橙，次按钮用亮蓝描边 */
.btn-primary{background:var(--accent);box-shadow:0 3px 12px rgba(246,129,0,0.22)}
.btn-primary:hover{background:var(--accent-light);box-shadow:0 6px 20px rgba(246,129,0,0.3)}
.btn-outline{border-color:rgba(255,255,255,0.55)}
.btn-outline:hover{background:#fff;color:var(--primary-dark);border-color:#fff}

/* 页脚：顶部一条品牌色渐变线 */
.footer{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--primary-dark),var(--brand-blue) 45%,var(--accent)) 1}

@media(max-width:768px){
  .product-detail-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .product-detail-media > img{height:230px}
  .product-detail-media{padding:12px}
}

/* ============================================================
   HHCK-SELECTOR：产品详情页的快速选型器
   ============================================================ */
.selector-hint{margin:0 0 16px;font-size:0.88rem;color:var(--text-light);line-height:1.7}
.selector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.selector-field{display:grid;gap:6px;font-size:0.85rem;color:var(--text)}
.selector-field span{font-weight:700;color:var(--primary-dark)}
.selector-field select{width:100%;height:42px;padding:0 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);font-size:0.86rem;outline:0}
.selector-field select:focus{border-color:var(--brand-blue);box-shadow:0 0 0 3px rgba(0,141,255,0.12)}
.selector-result{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;padding:16px 18px;background:#dbe7f3;border:1px solid rgba(0,141,255,0.22);border-radius:8px}
.selector-result span{font-size:0.85rem;color:var(--text-light)}
.selector-result strong{flex:1;min-width:200px;font-family:Consolas,"Courier New",monospace;font-size:1.02rem;font-weight:700;color:var(--primary-dark);word-break:break-all;letter-spacing:0.02em}
.selector-result .btn{flex-shrink:0}
.selector-note{margin:10px 0 0;font-size:0.78rem;color:var(--text-light);line-height:1.7}
@media(max-width:768px){
  .selector-grid{grid-template-columns:1fr;gap:10px}
  .selector-result{flex-direction:column;align-items:stretch;gap:10px}
  .selector-result strong{text-align:center}
  .selector-result .btn{width:100%;text-align:center}
}
/* 询价页：带入的选型信息提示 */
.prefill-note{margin:0 0 14px;padding:12px 14px;background:#d8e6f5;border-left:3px solid var(--brand-blue);border-radius:0 6px 6px 0;font-size:0.84rem;color:var(--primary-dark);line-height:1.7}
.prefill-note strong{display:block;margin-bottom:4px}

/* ============================================================
   HHCK-RICH-DETAIL：产品详情页富内容（对齐老站的详细程度）
   ============================================================ */

/* 关键参数速览：简介下方的紧凑网格 */
.quick-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:18px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.quick-spec{display:flex;flex-direction:column;gap:3px;padding:10px 13px;background:#fff}
.quick-spec span{font-size:0.74rem;color:var(--text-light)}
.quick-spec strong{font-size:0.88rem;color:var(--primary-dark);font-weight:700;line-height:1.5;word-break:break-word}
@media(max-width:560px){.quick-specs{grid-template-columns:1fr}}

/* 产品概述段落 */
.detail-paragraph{margin:0 0 12px;font-size:0.94rem;line-height:2;color:var(--text);text-align:justify}
.detail-paragraph:last-child{margin-bottom:0}

/* 正式表格（技术参数 / 测量范围 / 产品分类）——照老站那种蓝底表头 */
.detail-table-wrap.rich-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rich-table .detail-table{width:100%;min-width:520px;border-collapse:collapse;font-size:0.88rem}
.rich-table .detail-table th,
.rich-table .detail-table td{border:1px solid #d8e3ef;padding:9px 12px;line-height:1.7;vertical-align:middle;text-align:center}
.rich-table .detail-table th{background:#5b9bd5;color:#fff;font-weight:700;white-space:nowrap}
.rich-table .detail-table td{background:#fff;color:var(--text);word-break:break-word}
.rich-table .detail-table tr:nth-child(even) td{background:#e9eff6}
.rich-table .detail-table tr:hover td{background:#dce8f3}
/* 键值表（详细参数）：首列淡蓝底、左对齐 */
.rich-table .detail-table th:first-child{text-align:left;white-space:normal}
.detail-table-wrap:not(.rich-table) .detail-table th{background:#dde7f1;color:var(--primary-dark);text-align:left;font-weight:700}
.detail-table-wrap:not(.rich-table) .detail-table td{text-align:left}
/* 表格区块标题下留点空隙 */
#detail-table-0,#detail-table-1,#detail-table-2,#detail-table-3{margin-top:0}
.detail-section h3 + .detail-table-wrap{margin-top:4px}
/* 选型要点：明确区别于"技术参数"，用提示语与中性底色 */
.params-guide-note{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--accent);border-radius:0 6px 6px 0;background:#f7ecdb;font-size:0.84rem;color:#8a5a12;line-height:1.7}
.guide-table .detail-table th{background:#f4e2c9;color:#8a5a12;font-weight:700;text-align:left}
.guide-table .detail-table td{text-align:left;color:var(--text)}
.guide-table .detail-table tr:nth-child(even) td{background:#f7f1e8}

/* ============================================================
   HHCK-WHITE-SURFACES：导航栏、卡片、产品图区域一律纯白
   —— 用户反馈"导航栏底色和产品底色都应该是白色，不然很怪"。
   压暗改由"更深的页面底色 + 更深的品牌蓝"实现，而不是把白面涂灰。
   另外：**不要**再对图片用 mix-blend-mode:multiply。
   那条 trick 在深色底的容器上会把照片整片乘黑（行业应用/案例图一度全黑）。
   ============================================================ */
.product-img,
.product-img.flow,
.product-img.pressure,
.product-img.temp,
.product-img.level,
.product-img.display,
.product-img.calibrate,
.product-detail-media{background:#fff}
.product-img img,
.product-detail-media img,
.product-detail-thumbs img,
.product-detail-thumbs,
.highlight-image img,
.hero-product-card img{mix-blend-mode:normal;background:#fff}
.cert-card img{background:#fff}
.product-img,.product-detail-media{border-color:var(--border)}

/* ============================================================
   HHCK-HERO-PHOTO：首页首屏放「关于我们」的门头实景
   方案 ③（可见度 30%）—— 建筑轮廓与门头字隐约可见，文字完全不受影响。
   层级：本层 z-index:0 且是 .hero 的第一个子元素，
        因此绘制顺序为 本层 -> 粒子(z-index:0，文档序在后) -> .hero::after 辉光 -> 内容(z-index:1)。
        不需要改动任何既有 z-index。
   ============================================================ */
.hero-photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../images/hero/hero-exterior.jpg') center 34%/125% auto no-repeat;
  opacity:.30;filter:grayscale(.15)}
/* 叠一层极淡的深蓝，保证与下方渐变自然衔接、不显脏 */
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(158deg,rgba(2,18,36,.45),rgba(9,73,110,.28))}
/* 说明：为什么是 125% 而不是 cover ——
   给用户看的预览容器是扁的，cover 会把照片裁到"建筑那一段"，看着比较明显；
   而真实首屏接近满屏，cover 会把整张图（含大片天空与路面）都露出来，建筑因此变小变淡。
   放大 125% 把取景拉回建筑一带，还原用户确认过的那份可见度；可见度仍保持 30%。 */
/* 手机端：首屏隐藏右侧产品栏与装饰，整屏只有文字，背景纹理可稍明显 */
@media(max-width:768px){
  .hero-photo{opacity:.32;background-position:center 30%;background-size:auto 118%}
}
/* 尊重"减少动态效果"偏好时也不影响；纯静态层无事可做，此处仅作说明 */

/* ============================================================
   HHCK-NAV-SUB：二级导航（桌面悬停展开，手机端手风琴）
   ============================================================ */
.nav{align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{white-space:nowrap}
.nav-caret{display:none;width:22px;height:22px;margin-left:-4px;padding:0;border:0;background:transparent;cursor:pointer;position:relative;flex-shrink:0}
.nav-caret::before{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translate(-50%,-65%) rotate(45deg);color:rgba(51,58,69,0.55)}
.nav-sub{position:absolute;top:100%;left:0;min-width:190px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 16px 40px rgba(10,79,138,0.14);display:none;flex-direction:column;gap:2px;z-index:1200}
.nav-sub a{display:block;padding:9px 14px;border-radius:6px;color:var(--text);font-size:0.88rem;white-space:nowrap}
.nav-sub a:hover{background:rgba(0,141,255,0.09);color:var(--primary)}
.nav-sub a.active{background:rgba(0,141,255,0.13);color:var(--primary);font-weight:700}
/* 桌面：悬停 / 键盘聚焦 / 手动展开 */
@media(min-width:769px){
  .nav-caret{display:block}
  .nav-item:hover .nav-sub,
  .nav-item:focus-within .nav-sub,
  .nav-item.open .nav-sub{display:flex}
  .nav-item:hover > .nav-caret::before,
  .nav-item.open > .nav-caret::before{transform:translate(-50%,-35%) rotate(-135deg)}
  .nav-sub::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
}
/* 手机：手风琴 */
@media(max-width:768px){
  /* 桌面用的 align-items:center 会把直属链接居中，这里改回拉伸并左对齐 */
  .nav.open{align-items:stretch}
  .nav > .nav-link,
  .nav-item > .nav-link{display:block;width:100%;text-align:left;padding:14px 16px;border-radius:8px;font-size:0.96rem}
  .nav-item{display:block;width:100%;position:relative}
  .nav-item.has-sub > .nav-link{padding-right:54px}
  .nav > .nav-link + .nav-item,
  .nav-item + .nav-link,
  .nav-item + .nav-item{border-top:1px solid rgba(10,79,138,0.07)}
  .nav-caret{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:10px;top:7px;width:36px;height:36px;color:var(--text)}
  .nav-sub{position:static;display:none;box-shadow:none;border:0;border-radius:8px;background:rgba(0,141,255,0.06);margin:2px 0 10px;padding:6px;min-width:0}
  .nav-item.open .nav-sub{display:flex}
  .nav-item.open > .nav-caret::before{transform:translate(-50%,-35%) rotate(-135deg)}
  .nav-sub a{padding:11px 14px;font-size:0.9rem}
}
/* 筛选状态提示条（从导航带 ?cat= / ?app= 进来时显示） */
.filter-hint{display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:12px 16px;border-radius:8px;background:#eef7ff;border-left:3px solid var(--brand-blue);font-size:0.86rem;color:var(--primary-dark)}
.filter-hint.show{display:flex}
.filter-hint button{margin-left:auto;padding:6px 12px;border:1px solid rgba(0,141,255,0.3);border-radius:6px;background:#fff;color:var(--primary);cursor:pointer;font-size:0.8rem}