/* ====================================================
   XILIAN · 119xl.com redesign — pure static CSS
   Theme: industrial fire-protection · red + dark navy
==================================================== */

:root{
  --red:#dd2122;
  --red-deep:#a5141a;
  --red-soft:#fdecee;
  --ink:#0e1726;
  --ink-2:#1a253b;
  --ink-3:#5a6373;
  --line:#e6e9ef;
  --bg:#ffffff;
  --bg-soft:#f6f7fa;
  --shadow:0 18px 40px -22px rgba(13,22,38,.18);
  --shadow-strong:0 30px 60px -20px rgba(221,33,34,.25);
  --radius:14px;
  --maxw:1200px;
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* 锚点跳转时让开吸顶导航高度 */
section[id]{scroll-margin-top:92px}
@media (max-width:768px){
  section[id]{scroll-margin-top:70px}
}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
ul{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ====== Top Bar ====== */
.topbar{
  background:var(--ink);
  color:#cfd6e3;
  font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:38px;flex-wrap:wrap;gap:6px;
}
.topbar strong{color:#fff;font-weight:600}
.topbar a{color:#cfd6e3}
.topbar a:hover{color:var(--red)}
.dot{margin:0 10px;color:#3a455a}

/* ====== Header ====== */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:84px;gap:24px;
}
.brand{display:flex;align-items:center;gap:13px;min-width:0}
.brand-logo{
  height:48px;width:auto;
  border:none;outline:none;box-shadow:none;background:none;
  filter:drop-shadow(0 2px 6px rgba(221,33,34,.14));
}
.brand-text strong{
  display:block;font-size:17px;letter-spacing:.5px;line-height:1.25;
  color:var(--ink);font-weight:800;white-space:nowrap;
}
.brand-text span{
  display:block;font-size:10px;letter-spacing:2.6px;color:var(--red);
  font-weight:600;margin-top:2px;
}

/* 一级菜单变 5 项后加大间距 */
.nav{display:flex;align-items:center;gap:10px}
.nav > a,.nav .nav-link{
  position:relative;padding:10px 14px;font-size:15px;font-weight:600;
  color:var(--ink);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;line-height:1.1;white-space:nowrap;
}
.nav > a > span,.nav .nav-link > span{
  font-size:9px;color:#9aa3b3;letter-spacing:1.6px;font-weight:500;margin-top:2px;
}
.nav > a:hover,.nav > a.active,
.nav .nav-link:hover,.nav .nav-link.active{color:var(--red)}
.nav > a.active::after,.nav .nav-link.active::after{
  content:"";position:absolute;left:50%;bottom:-28px;
  transform:translateX(-50%);
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:7px solid var(--red);
}
.nav > a.active > span,.nav .nav-link.active > span{color:var(--red)}

/* ====== 关于我们 下拉二级菜单 ====== */
.nav-item.has-drop{position:relative;display:flex;align-items:center}
.nav .drop-toggle{
  width:22px;height:26px;margin-left:-3px;margin-right:4px;padding:0;
  background:none;border:0;cursor:pointer;color:#8b94a6;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:color .2s ease,background .2s ease;
}
.nav .drop-toggle:hover{color:var(--red);background:rgba(221,33,34,.08)}
.nav .drop-toggle svg{display:block;transition:transform .25s ease}
.nav-item.has-drop:hover .drop-toggle svg,
.nav-item.has-drop.open .drop-toggle svg{transform:rotate(180deg)}
.nav-item.has-drop .drop{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(10px);
  background:#fff;border:1px solid var(--line);border-radius:12px;min-width:172px;padding:8px;
  box-shadow:0 18px 40px -16px rgba(14,23,38,.30);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease;
  z-index:120;
}
/* 悬停桥接缝，鼠标从「关于我们」平滑滑入下拉不消失 */
.nav-item.has-drop::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:16px;z-index:119;
}
.nav-item.has-drop:hover .drop,
.nav-item.has-drop.open .drop,
.nav-item.has-drop:focus-within .drop{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.nav .drop a{
  position:static;display:flex;align-items:center;padding:9px 14px;font-size:14px;
  font-weight:600;color:var(--ink);border-radius:8px;white-space:nowrap;line-height:1.35;
}
.nav .drop a:hover{background:rgba(221,33,34,.07);color:var(--red)}
.nav .drop a.active{color:var(--red)}

.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:40px;height:40px;flex-direction:column;gap:6px;
  align-items:center;justify-content:center;
}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink)}

/* ====== Hero ====== */
.hero{
  position:relative;height:680px;color:#fff;
  display:flex;align-items:center;overflow:hidden;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slides .slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.4s ease,transform 8s linear;
  transform:scale(1.05);
}
.hero-slides .slide.active{opacity:1;transform:scale(1)}
.hero-mask{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(120deg, rgba(14,23,38,.85) 0%, rgba(14,23,38,.5) 55%, rgba(221,33,34,.35) 100%);
}
.hero-content{
  position:relative;z-index:2;
  padding:60px 24px;
}
.hero-eyebrow{
  display:inline-block;padding:6px 14px;font-size:12px;letter-spacing:4px;
  border:1px solid rgba(255,255,255,.4);border-radius:999px;
  margin-bottom:20px;font-weight:500;
}
.hero-title{
  font-size:54px;line-height:1.18;font-weight:800;
  letter-spacing:1px;margin-bottom:22px;
  text-shadow:0 2px 14px rgba(0,0,0,.25);
}
.hero-title .accent{
  color:#ffd84d;
  background:linear-gradient(180deg,transparent 65%,rgba(255,216,77,.3) 65%);
}
.hero-sub{
  font-size:17px;color:rgba(255,255,255,.85);
  margin-bottom:34px;max-width:780px;line-height:1.8;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:60px}

.btn{
  display:inline-block;padding:14px 28px;border-radius:999px;
  font-weight:700;font-size:15px;letter-spacing:1px;
  transition:all .25s ease;cursor:pointer;border:0;
}
.btn-primary{
  background:var(--red);color:#fff;
  box-shadow:0 12px 28px -8px rgba(221,33,34,.55);
}
.btn-primary:hover{
  background:var(--red-deep);
  transform:translateY(-2px);
  box-shadow:0 18px 36px -8px rgba(221,33,34,.7);
}
.btn-ghost{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.6);
}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-block{display:block;width:100%;text-align:center}
.btn-link{color:var(--red);font-weight:700;font-size:15px}
.btn-link:hover{color:var(--red-deep)}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;max-width:780px;
}
.hero-stats li{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:18px 16px;text-align:center;
  backdrop-filter:blur(6px);
}
.hero-stats strong{
  display:block;font-size:36px;color:#ffd84d;font-weight:800;letter-spacing:1px;
}
.hero-stats strong small{font-size:14px;color:#fff;font-weight:500;margin-left:2px}
.hero-stats span{font-size:13px;color:rgba(255,255,255,.8)}

.hero-thumbs{
  position:absolute;right:40px;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;gap:14px;
}
.thumb{
  width:14px;height:14px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.4);transition:all .3s ease;
  border:2px solid transparent;
}
.thumb.active{background:var(--red);transform:scale(1.3);border-color:#fff}

/* ====== Sections ====== */
.section{padding:96px 0;position:relative}
.section-head{text-align:center;margin-bottom:60px;max-width:780px;margin-left:auto;margin-right:auto}
.section-head.left{text-align:left;margin-left:0;margin-right:auto}
.kicker{
  display:inline-block;font-size:12px;letter-spacing:4px;
  color:var(--red);font-weight:700;
  padding:5px 0;border-top:2px solid var(--red);margin-bottom:18px;
}
.kicker.light{color:#ffd84d;border-color:#ffd84d}
.section-title{
  font-size:40px;font-weight:800;line-height:1.25;color:var(--ink);
  margin-bottom:16px;letter-spacing:.5px;
}
.section-title em{
  font-style:normal;color:var(--red);
  background:linear-gradient(180deg,transparent 70%,rgba(221,33,34,.12) 70%);
}
.section-title.white{color:#fff}
.section-sub{
  font-size:16px;color:var(--ink-3);max-width:680px;margin:0 auto;
}

/* ====== About ====== */
.about{background:#fff}
.about-grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;
}
.about-left .kicker{margin-bottom:18px}
.about-lead{font-size:17px;color:var(--ink);margin-bottom:18px;font-weight:500;line-height:1.8}
.about-lead strong{color:var(--red)}
.about-text{font-size:15px;color:var(--ink-3);margin-bottom:14px}
.about-right{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.about-card{
  padding:24px 22px;border-radius:var(--radius);
  background:#fff;border:1px solid var(--line);
  position:relative;overflow:hidden;transition:all .35s ease;
}
.about-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:transparent;
}
.about-card .num{
  font-size:44px;font-weight:800;color:var(--red);
  line-height:1;margin-bottom:8px;letter-spacing:1px;
}
.about-card .num small{
  font-size:14px;color:var(--ink-3);font-weight:500;margin-left:4px;letter-spacing:2px;
}
.about-card h4{font-size:16px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.about-card p{font-size:13px;color:var(--ink-3);line-height:1.65}
.about-card.card-1{background:linear-gradient(135deg,#fff,#fef3f4)}
.about-card.card-2{background:linear-gradient(135deg,#fff,#f4f6fb)}
.about-card.card-3{background:linear-gradient(135deg,#fff,#f4f6fb)}
.about-card.card-4{background:linear-gradient(135deg,#fff,#fef3f4)}
.about-card::after{
  content:"";position:absolute;right:-30px;bottom:-30px;
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,rgba(221,33,34,.08),transparent 70%);
}

/* ====== Products ====== */
.products{
  background:
    radial-gradient(circle at 90% 10%,rgba(221,33,34,.12),transparent 50%),
    linear-gradient(180deg,#0e1726 0%, #1a253b 100%);
  color:#fff;
}
.prod-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
}
.prod-card{
  background:#fff;color:var(--ink);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  transition:all .35s ease;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.06);
}
.prod-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-strong);
}
.prod-img{
  aspect-ratio:1/1;background:#f6f7fa;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.prod-img img{
  width:100%;height:100%;object-fit:cover;transition:transform .5s ease;
}
.prod-card:hover .prod-img img{transform:scale(1.06)}
.prod-meta{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.prod-meta h3{font-size:18px;font-weight:700;margin-bottom:8px}
.prod-meta p{
  font-size:13px;color:var(--ink-3);line-height:1.65;flex:1;margin-bottom:12px;
}
.prod-more{
  font-size:13px;font-weight:700;color:var(--red);
  letter-spacing:.5px;
}
.prod-more:hover{color:var(--red-deep)}

/* ====== Categories Strip ====== */
.cats{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:60px 0;
}
.cats-head{margin-bottom:30px}
.cats-head h3{font-size:24px;font-weight:800;color:var(--ink)}
.cats-head em{
  font-style:normal;font-size:14px;color:var(--ink-3);
  font-weight:500;letter-spacing:3px;margin-left:8px;
}
.cats-list{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;
}
.cats-list a{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border:1px solid var(--line);border-radius:10px;
  font-weight:600;color:var(--ink);font-size:14px;
  transition:all .25s ease;background:#fff;
}
.cats-list a small{color:#c5cad6;font-size:12px;font-weight:500}
.cats-list a:hover{
  background:var(--red);color:#fff;border-color:var(--red);
  transform:translateY(-2px);box-shadow:var(--shadow-strong);
}
.cats-list a:hover small{color:rgba(255,255,255,.85)}

/* ====== Solutions ====== */
.solutions{background:var(--bg-soft)}
.sol-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
}
.sol-card{
  padding:36px 28px;background:#fff;border-radius:var(--radius);
  text-align:center;border:1px solid var(--line);
  transition:all .35s ease;position:relative;overflow:hidden;
}
.sol-card:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
  transform:translateY(-6px);box-shadow:var(--shadow);
}
.sol-card:hover h3,.sol-card:hover p{color:#fff}
.sol-icon{
  width:64px;height:64px;border-radius:50%;
  background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;margin:0 auto 18px;transition:all .35s ease;
}
.sol-card:hover .sol-icon{
  background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.06);
}
.sol-card h3{font-size:19px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.sol-card p{font-size:13px;color:var(--ink-3);line-height:1.65}

/* ====== Cases ====== */
.cases{background:#fff}
.case-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
.case-item{
  border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  transition:all .35s ease;display:block;
}
.case-item:hover{
  transform:translateY(-6px);box-shadow:var(--shadow);
  border-color:transparent;
}
.case-img{
  aspect-ratio:16/10;background-size:cover;background-position:center;
  transition:transform .6s ease;position:relative;
}
.case-item:hover .case-img{transform:scale(1.05)}
.case-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45));
}
.case-meta{padding:22px 24px}
.case-tag{
  display:inline-block;padding:3px 10px;font-size:12px;
  background:var(--red-soft);color:var(--red);
  border-radius:4px;font-weight:600;margin-bottom:10px;
}
.case-meta h4{font-size:17px;font-weight:700;margin-bottom:8px;color:var(--ink)}
.case-meta p{font-size:13px;color:var(--ink-3);line-height:1.65}

/* ====== Honor ====== */
.honor{
  background:
    linear-gradient(180deg,#fafbfd 0%,#fff 100%);
}
.honor-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
.honor-card{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);transition:all .35s ease;
  margin:0;
}
.honor-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.honor-img{
  aspect-ratio:4/3;background:#f6f7fa;
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.honor-img img{width:100%;height:100%;object-fit:contain}
.honor-card figcaption{
  padding:14px 18px;font-size:13px;color:var(--ink-3);
  text-align:center;border-top:1px solid var(--line);font-weight:500;
}
.honor-text{
  background:linear-gradient(135deg,var(--red),var(--red-deep));
  color:#fff;padding:36px 30px;display:flex;flex-direction:column;justify-content:center;
  border-color:transparent;
}
.honor-text h3{font-size:22px;font-weight:800;margin-bottom:14px;color:#fff}
.honor-text p{font-size:14px;line-height:1.8;margin-bottom:20px;color:rgba(255,255,255,.9)}
.honor-text .btn{background:#fff;color:var(--red);align-self:flex-start}
.honor-text .btn:hover{background:var(--ink);color:#fff}

/* ====== News ====== */
.news{background:var(--bg-soft)}
.news-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
.news-item{
  display:flex;gap:20px;align-items:flex-start;
  background:#fff;padding:24px 26px;border-radius:var(--radius);
  border:1px solid var(--line);transition:all .25s ease;
}
.news-item:hover{
  border-color:var(--red);transform:translateX(4px);
  box-shadow:var(--shadow);
}
.news-date{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:64px;height:64px;border-radius:10px;
  background:linear-gradient(135deg,var(--red),var(--red-deep));
  color:#fff;font-weight:700;line-height:1;
}
.news-date{font-size:18px}
.news-item h4{
  font-size:17px;font-weight:700;color:var(--ink);
  margin-bottom:8px;transition:color .25s ease;
}
.news-item:hover h4{color:var(--red)}
.news-item p{font-size:13px;color:var(--ink-3);line-height:1.65}

/* ====== Contact ====== */
.contact{
  background:
    radial-gradient(circle at 20% 80%,rgba(221,33,34,.18),transparent 50%),
    linear-gradient(135deg,#0e1726 0%, #1a253b 60%, #2a1b1f 100%);
  color:#fff;
}
.contact-wrap{
  display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:start;
}
.contact-info .kicker{margin-bottom:18px}
.contact-info .section-title{margin-bottom:20px}
.contact-lead{font-size:16px;color:rgba(255,255,255,.85);margin-bottom:36px;line-height:1.85}
.contact-list{display:flex;flex-direction:column;gap:20px}
.contact-list li{display:flex;align-items:center;gap:18px}
.ci-ico{
  flex:0 0 auto;width:48px;height:48px;border-radius:12px;
  background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;border:1px solid rgba(255,255,255,.16);
}
.contact-list strong{
  display:block;font-size:13px;color:rgba(255,255,255,.6);font-weight:500;
  letter-spacing:1px;margin-bottom:4px;
}
.contact-list span{font-size:15px;color:#fff;font-weight:600}

.contact-form{
  background:#fff;color:var(--ink);
  border-radius:18px;padding:36px 36px 32px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.4);
}
.contact-form h3{
  font-size:22px;font-weight:800;color:var(--ink);margin-bottom:24px;
  padding-bottom:14px;border-bottom:2px solid var(--red);
  display:inline-block;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.contact-form label{display:block;margin-bottom:14px}
.contact-form label.full{margin-bottom:14px}
.contact-form span{
  display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;padding:11px 14px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:inherit;
  transition:border-color .2s ease;background:#fff;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:0;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(221,33,34,.1);
}

/* ====== Footer ====== */
.footer{
  background:
    radial-gradient(circle at 15% 0%,rgba(221,33,34,.10),transparent 45%),
    linear-gradient(180deg,#131e33 0%, #0a111e 55%);
  color:#cfd6e3;padding:70px 0 0;
  border-top:3px solid var(--red);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.08);
}
.f-logo{
  height:44px;width:auto;margin-bottom:14px;
  filter:brightness(1.15) saturate(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.f-col p{font-size:13px;line-height:1.85;margin-bottom:12px;color:#a3acc1}
.f-motto{color:#fff;font-weight:600}
.f-col h5{
  color:#fff;font-size:16px;font-weight:700;
  margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--red);
  display:inline-block;
}
.f-col a{
  display:block;font-size:13px;color:#a3acc1;margin-bottom:10px;
}
.f-col a:hover{color:var(--red)}
.footer-bottom{padding:22px 0;text-align:center;font-size:12px;color:#7a8499}

/* ====== To Top ====== */
.to-top{
  position:fixed;right:24px;bottom:24px;width:48px;height:48px;
  border-radius:50%;border:0;background:var(--red);color:#fff;
  font-size:22px;font-weight:700;cursor:pointer;
  box-shadow:0 12px 30px -6px rgba(221,33,34,.5);
  opacity:0;visibility:hidden;transform:translateY(20px);
  transition:all .3s ease;z-index:60;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--red-deep);transform:translateY(-3px)}

/* ====== Responsive ====== */
@media (max-width:1024px){
  .hero-title{font-size:42px}
  .section-title{font-size:32px}
  .about-grid,.contact-wrap{grid-template-columns:1fr;gap:40px}
  .prod-grid,.case-grid,.honor-grid,.sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:30px}
  .hero-thumbs{display:none}
  /* 让开更长的公司名 */
  .brand{flex:0 1 auto}
  .brand-logo{height:42px}
  .brand-text strong{font-size:15px;letter-spacing:.3px}
  .brand-text span{letter-spacing:1.8px}
  .nav{gap:4px}
  .nav > a,.nav .nav-link{padding:10px 8px;font-size:13.5px}
  .nav > a > span,.nav .nav-link > span{letter-spacing:1px}
  .nav .drop-toggle{margin-left:-3px;margin-right:2px}
}
@media (max-width:768px){
  .topbar{display:none}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;padding:8px 20px 16px;gap:0;
    box-shadow:0 14px 30px -10px rgba(0,0,0,.18);max-height:calc(100vh - 62px);overflow-y:auto;
  }
  body.nav-open .nav{display:flex}
  .nav > a,.nav .nav-link{
    padding:12px 2px;border-bottom:1px solid var(--line);
    flex-direction:row;align-items:center;gap:8px;border-radius:0;
    font-size:15px;width:100%;
  }
  .nav > a > span,.nav .nav-link > span{font-size:10px;letter-spacing:1px;margin-top:0}
  .nav > a.active::after,.nav .nav-link.active::after{display:none}
  .nav-item.has-drop{width:100%;flex-wrap:wrap;border-bottom:1px solid var(--line)}
  .nav-item.has-drop > .nav-link{flex:1;width:auto;border-bottom:0}
  .nav .drop-toggle{width:32px;height:32px;margin:0 2px 0 0}
  .nav-item.has-drop .drop{
    position:static;transform:none;min-width:0;width:100%;border:0;
    border-radius:0;box-shadow:none;padding:2px 0 6px 10px;gap:0;
    opacity:1;visibility:visible;display:none;
  }
  /* 修复：移动端展开子菜单时，需覆盖桌面端 :hover/:focus-within 规则里的
     transform:translateX(-50%)，否则二级菜单会被整体左移出屏（显示不出来） */
  .nav-item.has-drop.open .drop{
    display:flex;transform:none;top:auto;left:auto;
  }
  .nav .drop a{padding:10px 6px;font-size:14px;color:var(--ink-2);border-radius:8px}
  .nav-item.has-drop::after{display:none}
  .nav-toggle{display:flex;flex:0 0 auto}
  /* 移动端头部：只留 LOGO + 汉堡按钮，公司名文字整块隐藏（PC 端保持完整显示） */
  .header-inner{height:62px;gap:10px}
  .brand-text{display:none}
  .brand-logo{height:38px;flex:0 0 auto}
  .hero{height:auto;min-height:560px;padding:40px 0 60px}
  .hero-title{font-size:30px}
  .hero-sub{font-size:15px}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-stats strong{font-size:26px}
  .section{padding:64px 0}
  .section-title{font-size:26px}
  .prod-grid,.case-grid,.honor-grid,.sol-grid,.news-grid{grid-template-columns:1fr}
  .cats-list{grid-template-columns:repeat(2,1fr)}
  /* ====== 移动端页脚：重排为「横向品牌条 + 双栏链接 + 通栏联系」压缩长度
     （仅 ≤768px 生效，PC 端页脚保持原样） ====== */
  .footer{padding:34px 0 0}
  .footer-grid{
    grid-template-columns:1fr 1fr;   /* 产品中心 / 关于西联 并排，省掉一半高度 */
    gap:16px 14px;
    padding-bottom:16px;
  }
  .footer-grid > .f-col:first-child,
  .footer-grid > .f-col:last-child{grid-column:1 / -1}
  /* 品牌块：LOGO 在左、公司名与口号在右，两行对齐 */
  .footer-grid > .f-col:first-child{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"flogo fname" "flogo fmotto";
    align-items:center;column-gap:12px;padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .f-logo{grid-area:flogo;height:40px;margin-bottom:0}
  .footer-grid > .f-col:first-child p:first-of-type{grid-area:fname;margin-bottom:0}
  .footer-grid > .f-col:first-child p:last-of-type{grid-area:fmotto}
  .f-col h5{font-size:14px;margin-bottom:10px;padding-bottom:6px}
  .f-col p{font-size:12.5px;line-height:1.7;margin-bottom:5px}
  .f-col a{font-size:12.5px;margin-bottom:7px}
  .f-col a:last-child{margin-bottom:0}
  .footer-bottom{padding:13px 0;font-size:11.5px;line-height:1.6}
  .form-row{grid-template-columns:1fr}
  .contact-form{padding:24px}
  .to-top{right:16px;bottom:16px;width:42px;height:42px;font-size:18px}
}
/* ==========================================================
   Inner pages (关于/产品/案例/荣誉/新闻/联系 + 详情)
========================================================== */
.page-hero{
  position:relative;color:#fff;padding:74px 0 66px;
  background:
    radial-gradient(circle at 82% 0%,rgba(221,33,34,.32),transparent 46%),
    linear-gradient(120deg,#0e1726 0%,#16233c 58%,#232a3d 100%);
  overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 100%;
  opacity:.55;
}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.25}
.page-hero h1 em{font-style:normal;color:#ffd84d}
.page-hero .ph-en{
  display:block;margin-top:8px;font-size:12px;letter-spacing:5px;color:rgba(255,255,255,.55);
  font-weight:500;text-transform:uppercase;
}
.crumb{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.66);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:7px 16px;
}
.crumb a{color:rgba(255,255,255,.82)}
.crumb a:hover{color:#ffd84d}
.crumb i{font-style:normal;color:#ffd84d;font-size:11px}
.crumb b{font-weight:500;color:#fff}

.page-body{padding:70px 0 90px;min-height:420px}

/* inner content generic */
.prose h3{font-size:22px;color:var(--ink);margin:30px 0 14px;font-weight:800}
.prose p{color:var(--ink-3);margin-bottom:16px;line-height:1.95;font-size:15px}
.prose strong{color:var(--ink)}

/* two-column layout */
.in-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;align-items:start}
.side{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;position:sticky;top:104px;box-shadow:0 10px 30px -24px rgba(14,23,38,.4);
}
.side-title{
  background:linear-gradient(120deg,#0e1726,#1a253b);color:#fff;
  padding:16px 20px;font-size:16px;font-weight:800;letter-spacing:1px;
  display:flex;align-items:center;gap:10px;
}
.side-title small{font-size:10px;font-weight:500;color:rgba(255,255,255,.5);letter-spacing:2px;margin-left:auto}
.side ul{padding:8px 0}
.side a{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;font-size:14.5px;color:var(--ink);font-weight:500;
  border-left:3px solid transparent;
}
.side a:hover{color:var(--red);background:var(--bg-soft);border-left-color:var(--red)}
.side a.cur{color:var(--red);background:#fff4f4;font-weight:700;border-left-color:var(--red)}
.side a span{font-size:12px;color:#9aa3b3;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:0 9px;line-height:20px}
.side a.cur span{color:#fff;background:var(--red);border-color:var(--red)}
.side .side-empty{padding:20px;font-size:13px;color:var(--ink-3);background:#fafbfd}

.main-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 36px;box-shadow:0 10px 34px -26px rgba(14,23,38,.25);
}

/* category section on products.html */
.cat-sec{margin-bottom:22px;scroll-margin-top:104px}
.cat-sec-head{
  display:flex;align-items:center;gap:14px;
  border-bottom:2px solid var(--red);
  padding-bottom:12px;margin-bottom:26px;
}
.cat-sec-head .idx{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--red),var(--red-deep));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;box-shadow:0 8px 18px -6px rgba(221,33,34,.5);
}
.cat-sec-head h3{font-size:24px;font-weight:800;color:var(--ink)}
.cat-sec-head p{font-size:12px;color:#9aa3b3;letter-spacing:2px;margin-top:2px}

/* product row in list */
.prod-row{
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-bottom:22px;background:#fff;transition:box-shadow .3s ease;
}
.prod-row:hover{box-shadow:var(--shadow)}
.prod-row .thumb{
  width:100%;min-height:220px;border-radius:12px;overflow:hidden;
  background:#f6f7fa;position:relative;display:flex;align-items:center;justify-content:center;
}
.prod-row .thumb img{
  width:100%;height:100%;min-height:220px;aspect-ratio:4/3;object-fit:cover;
  transition:transform .5s ease;display:block;
}
.prod-row:hover .thumb img{transform:scale(1.04)}
.prod-row .tag{
  display:inline-block;font-size:12px;color:var(--red);background:var(--red-soft);
  padding:3px 12px;border-radius:999px;margin-bottom:10px;font-weight:600;
}
.prod-row h4{font-size:22px;font-weight:800;color:var(--ink);margin-bottom:10px}
.prod-row .pintro{color:var(--ink-3);font-size:14px;line-height:1.9;margin-bottom:16px}
.prod-row .more{color:var(--red);font-weight:700;font-size:14px;letter-spacing:.5px}
.prod-row .more:hover{color:var(--red-deep)}
.cat-empty{
  border:1px dashed #d3d9e2;background:#fafbfd;border-radius:12px;
  padding:26px;color:var(--ink-3);text-align:center;font-size:14px;
}

/* extended product grid */
.extra-sec h2{font-size:26px;color:#fff;display:flex;align-items:center;gap:12px}
.extra-sec{
  background:linear-gradient(120deg,#0e1726,#1a253b);
  border-radius:var(--radius);padding:30px 30px 10px;margin-top:40px;
  color:#fff;position:relative;overflow:hidden;
}
.extra-sec::after{
  content:"EXTENDED";position:absolute;right:-6px;bottom:-18px;font-size:90px;
  color:rgba(255,255,255,.05);font-weight:900;letter-spacing:4px;line-height:1;
}
.extra-sec .sub{color:rgba(255,255,255,.6);font-size:13px;margin:6px 0 24px}
.extra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative;z-index:2}
.extra-card{
  background:#fff;color:var(--ink);border-radius:12px;overflow:hidden;margin-bottom:20px;
  transition:transform .3s ease,box-shadow .3s ease;
}
.extra-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(0,0,0,.45)}
.extra-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#f2f4f8}
.extra-card .ec-meta{padding:16px 18px}
.extra-card h4{font-size:16px;font-weight:700;margin-bottom:6px}
.extra-card p{font-size:12.5px;color:var(--ink-3);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.extra-card .lnk{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--red)}

/* product detail page */
.pd-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.pd-main .title{font-size:30px;font-weight:800;color:var(--ink);line-height:1.3;margin-bottom:8px}
.pd-meta{font-size:13px;color:#9aa3b3;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap}
.pd-intro{
  background:linear-gradient(120deg,#fff7f7,#ffffff);border:1px solid #f3d7d8;border-left:4px solid var(--red);
  border-radius:10px;padding:20px 22px;color:var(--ink-3);font-size:14.5px;line-height:2;margin-bottom:28px;
}
.pd-gallery{margin-bottom:26px}
.pd-gallery .big{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f6f7fa;
  display:flex;align-items:center;justify-content:center;min-height:320px;padding:12px;
}
.pd-gallery .big img{max-height:520px;object-fit:contain}
.pd-gallery .thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pd-gallery .thumbs img{
  width:74px;height:74px;object-fit:cover;border-radius:8px;cursor:pointer;
  border:2px solid transparent;opacity:.75;transition:all .25s ease;
}
.pd-gallery .thumbs img:hover{opacity:1}
.pd-gallery .thumbs img.on{border-color:var(--red);opacity:1;box-shadow:0 4px 12px -4px rgba(221,33,34,.5)}
.pd-sec-title{font-size:20px;font-weight:800;color:var(--ink);margin:34px 0 18px;display:flex;align-items:center;gap:10px}
.pd-sec-title::before{content:"";width:5px;height:20px;background:var(--red);border-radius:3px;display:inline-block}
.pd-detail-imgs img{width:100%;margin:0 auto 18px;border-radius:12px}
.pd-detail-imgs{display:grid;gap:6px}
.pd-aside .side{margin-bottom:22px;position:static}
.pd-prevnext{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;
  border-top:1px solid var(--line);padding-top:26px;
}
.pd-prevnext a{
  border:1px solid var(--line);border-radius:12px;padding:14px 18px;
  font-size:13.5px;color:var(--ink-3);transition:all .25s ease;background:#fff;
}
.pd-prevnext a:hover{border-color:var(--red);color:var(--red);box-shadow:var(--shadow)}
.pd-prevnext a small{display:block;color:#9aa3b3;font-size:11px;margin-bottom:4px}
.pd-prevnext .next{text-align:right}

/* contact page */
.contact-info-extra{background:#fff}
/* contact inner page: 把首页 .contact 深色版块样式在浅色内页上换成白色卡片 + 深色文字 + 红色图标方块 */
.contact-wrap.contact-inner .contact-info{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:36px;color:var(--ink);
  box-shadow:0 10px 34px -26px rgba(14,23,38,.25);
}
.contact-wrap.contact-inner .contact-lead{color:var(--ink-3);font-weight:500;letter-spacing:0;margin-bottom:28px}
.contact-wrap.contact-inner .contact-list{gap:22px}
.contact-wrap.contact-inner .contact-list li{align-items:center}
.contact-wrap.contact-inner .contact-list strong{color:var(--ink-3);font-weight:600}
.contact-wrap.contact-inner .contact-list span{color:var(--ink)}
.contact-wrap.contact-inner .ci-ico{
  background:rgba(221,33,34,.10);border-color:rgba(221,33,34,.25);
}
.ct-way{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.ct-way .w{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff}
.ct-way .w h4{font-size:15px;font-weight:800;margin-bottom:6px;color:var(--ink);display:flex;gap:8px;align-items:center}
.ct-way .w p{font-size:13.5px;color:var(--ink-3);line-height:1.9}
.ct-way .w p a{color:var(--red);font-weight:600}

/* news page */
.news-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.chip{
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;
  padding:9px 22px;font-size:14px;font-weight:600;cursor:default;
}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.chip small{font-weight:500;opacity:.7;margin-left:4px}
.news-list{border-top:1px solid var(--line)}
.news-list .row{
  display:grid;grid-template-columns:90px minmax(0,1fr) auto;gap:22px;align-items:center;
  padding:22px 6px;border-bottom:1px solid var(--line);
}
.news-list .date{
  text-align:center;border-radius:12px;background:#fff5f5;border:1px solid #f5d7d8;
  padding:10px 4px;color:var(--red);
}
.news-list .date b{display:block;font-size:24px;font-weight:800;line-height:1}
.news-list .date i{font-style:normal;font-size:12px}
.news-list h4{font-size:17px;font-weight:700;color:var(--ink);line-height:1.5}
.news-list .row:hover h4{color:var(--red)}
.news-list .desc{font-size:13px;color:var(--ink-3);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.8}
.news-list .cat-tag{
  font-size:12px;color:#fff;background:var(--ink-2);border-radius:999px;padding:5px 14px;font-weight:600;
}
.news-empty{background:#fafbfd;border:1px dashed #d3d9e2;border-radius:12px;padding:48px;text-align:center;color:var(--ink-3);font-size:15px}

/* ==========================================================
   「新闻资讯」列表页 & 资讯详情页 —— 去掉「新闻分类」侧栏后的单栏重排
   （仅作用于 news.html 与 news-37/38/39/40/65，不影响产品等其它 .side 页面）
========================================================== */
.in-layout.in-full{grid-template-columns:minmax(0,1fr)}
/* width:100% 必须保留：grid 子项一旦有 auto 外边距就不再 stretch，
   会退化为 fit-content 宽度，遇到长段落时反而溢出容器 */
.in-article .main-card{max-width:920px;width:100%;margin:0 auto;padding:40px 44px}

/* 列表页：全部资讯 + 日期 / 标题+摘要 / 箭头 */
.news-main{padding:28px 32px 32px}
.news-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:2px solid var(--red);margin-bottom:0;
}
.news-head h2{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:.5px}
.news-head h2 em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:2px;color:#9aa3b3;margin-left:10px}
.news-count{font-size:13px;color:var(--ink-3)}
.news-main .news-list{border-top:0}
.news-main .news-list .row{
  grid-template-columns:96px minmax(0,1fr) auto;gap:26px;align-items:center;
  padding:24px 6px;border-radius:10px;transition:background .2s ease;
}
.news-main .news-list .row:hover{background:#fafbfd}
.news-txt{min-width:0}
.news-main .news-list h4{font-size:17.5px}
.news-main .news-list .row-go{
  color:#c3cad6;font-size:20px;font-weight:700;line-height:1;
  transition:color .2s ease,transform .2s ease;
}
.news-main .news-list .row:hover .row-go{color:var(--red);transform:translateX(4px)}

/* 详情页：正文加大字号与行距，标题更醒目 */
.in-article .art-head{padding-bottom:24px;margin-bottom:28px}
.in-article .art-head h1{font-size:30px}
.in-article .art-body{font-size:16px;line-height:2.05}
.in-article .art-body p{margin-bottom:18px}

@media (max-width:768px){
  .in-article .main-card{padding:24px 18px}
  .in-article .art-head h1{font-size:22px}
  .in-article .art-body{font-size:15.5px;line-height:2}
  .news-main{padding:20px 16px 22px}
  .news-head{flex-wrap:wrap;gap:6px}
  .news-head h2{font-size:18px}
  .news-head h2 em{display:none}
  .news-count{font-size:12.5px}
  .news-main .news-list .row{
    grid-template-columns:62px minmax(0,1fr);gap:14px;padding:18px 2px;
  }
  .news-main .news-list .row-go{display:none}
  .news-main .news-list h4{font-size:15.5px}
  .news-main .news-list .desc{font-size:12.5px;line-height:1.75}
}

/* honors */
.honor-intro{max-width:860px;margin:0 auto 46px;text-align:center;color:var(--ink-3);font-size:16px;line-height:2}
.honor-grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.honor-item{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  transition:transform .3s ease,box-shadow .3s ease;padding:14px 14px 18px;text-align:center;
}
.honor-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.honor-item img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#f8f9fb;border-radius:8px;margin-bottom:12px;border:1px solid var(--line)}
.honor-item figcaption{font-size:13.5px;color:var(--ink);font-weight:600}
/* honors 证书点击放大 */
.honor-item{position:relative;cursor:zoom-in}
.honor-item::after{
  content:'点击放大';position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:600;letter-spacing:3px;text-indent:3px;
  background:rgba(10,16,28,.40);opacity:0;transition:opacity .22s ease;pointer-events:none;
}
.honor-item:hover::after{opacity:1}
.honor-item img{transition:transform .35s ease}
.honor-item:hover img{transform:scale(1.04)}

/* cases */
.case-lead{max-width:840px;margin:0 auto 46px;text-align:center;font-size:16px;color:var(--ink-3);line-height:2}
.case-grid2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-grid2 .citem{
  border-radius:var(--radius);overflow:hidden;position:relative;display:block;height:300px;
  background:#0e1726;
}
.case-grid2 .citem img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:transform .6s ease,opacity .4s ease}
.case-grid2 .citem:hover img{transform:scale(1.07);opacity:1}
.case-grid2 .cap{
  position:absolute;inset:auto 0 0 0;padding:46px 20px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(9,14,24,.92));
}
.case-grid2 .cap h4{font-size:17px;font-weight:800}
.case-grid2 .cap p{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.7;margin-top:4px}
.case-grid2 .cap span{font-size:11px;color:#ffd84d;letter-spacing:2px;display:block;margin-bottom:4px}

/* about page */
.about-page-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:start}
.about-page-grid .a-img{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.about-page-grid .a-img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;display:block;transition:transform .35s ease}
.about-page-grid .a-img:hover img{transform:scale(1.03)}
.about-page-grid .a-img::after{content:"🔍 点击放大查看原图";position:absolute;left:0;right:0;bottom:0;padding:14px 0 12px;text-align:center;font-size:13.5px;font-weight:600;color:#fff;letter-spacing:.5px;background:linear-gradient(180deg,rgba(10,16,28,0) 0%,rgba(10,16,28,.55) 100%);opacity:0;transition:opacity .25s ease;pointer-events:none}
.about-page-grid .a-img:hover::after{opacity:1}
.feat-band{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px;
}
.feat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;text-align:center}
.feat .num{font-size:38px;font-weight:800;color:var(--red);line-height:1}
.feat .num small{font-size:13px;color:var(--ink-3)}
.feat h4{font-size:14.5px;margin-top:10px;font-weight:700;color:var(--ink)}
.feat p{font-size:12.5px;color:var(--ink-3);margin-top:6px;line-height:1.7}

/* responsive for inner pages */
@media (max-width:1024px){
  .in-layout,.pd-wrap{grid-template-columns:1fr}
  .side{position:static}
  .prod-row{grid-template-columns:220px minmax(0,1fr);gap:22px}
  .extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .honor-grid2,.case-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-page-grid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:768px){
  .page-hero{padding:54px 0 46px}
  .page-hero h1{font-size:28px}
  .page-body{padding:46px 0 66px}
  .main-card{padding:22px 18px}
  .prod-row{grid-template-columns:1fr;padding:18px}
  .prod-row .thumb img{aspect-ratio:16/10}
  .extra-grid{grid-template-columns:1fr}
  .honor-grid2,.case-grid2,.ct-way{grid-template-columns:1fr}
  .feat-band{grid-template-columns:1fr 1fr}
  .news-list .row{grid-template-columns:70px minmax(0,1fr);gap:14px}
  .news-list .cat-tag{display:none}
  .pd-prevnext{grid-template-columns:1fr}
  .pd-main .title{font-size:24px}
}

/* ====== 图片灯箱 Lightbox ====== */
.lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.lb.open{display:flex}
.lb-bg{position:absolute;inset:0;background:rgba(7,11,20,.9);animation:lbFade .2s ease}
.lb-fig{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;max-width:94vw;max-height:88vh;animation:lbPop .28s cubic-bezier(.2,.9,.3,1.15)}
.lb-fig img{display:block;width:auto;height:auto;max-width:100%;max-height:80vh;object-fit:contain;background:#fff;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55);border:2px solid rgba(255,255,255,.12)}
.lb-fig figcaption{margin-top:16px;color:#dbe2ee;font-size:15px;font-weight:600;letter-spacing:2px}
.lb-close{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.lb-close:hover{background:var(--red);border-color:var(--red)}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:52px;height:80px;border:0;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;font-size:40px;line-height:1;cursor:pointer;transition:background .2s ease}
.lb-arrow:hover{background:rgba(221,33,34,.85)}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.62);font-size:13.5px;letter-spacing:3px;pointer-events:none}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:768px){
  .lb-arrow{width:38px;height:60px;font-size:28px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
  .lb-close{top:10px;right:10px;width:40px;height:40px;font-size:24px}
}

/* ====== 新闻详情页 ====== */
.art-head{padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line);text-align:center}
.art-head h1{font-size:27px;color:var(--ink);line-height:1.5;margin-bottom:14px;font-weight:800}
.art-meta{display:flex;gap:10px 24px;justify-content:center;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}
.art-meta span{display:inline-flex;align-items:center;gap:6px}
.art-body{font-size:15.5px;line-height:2.05;color:#39445a}
.art-body h4{font-size:16.5px;color:var(--red);margin:28px 0 12px;padding-left:12px;border-left:3px solid var(--red);line-height:1.6}
.art-body p{margin:0 0 16px;text-align:justify}
.art-pn{display:flex;gap:14px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.art-pn a{flex:1;min-width:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fafbfd;transition:border-color .2s ease,color .2s ease,background .2s ease}
.art-pn a:hover{border-color:var(--red);color:var(--red);background:#fff4f4}
.art-pn .pn-empty{flex:1;min-width:0;padding:14px 16px;border:1px dashed #dde2ea;border-radius:12px;color:#b6becd;background:#fbfcfd;text-align:center;font-size:13px}
.art-pn .pn-label{display:block;font-size:12px;color:var(--ink-3);margin-bottom:3px}
.art-pn a .pn-title{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art-back{text-align:center;margin-top:22px}
.art-back a{display:inline-block;font-size:13.5px;color:var(--ink-3);border:1px solid var(--line);padding:8px 22px;border-radius:999px;transition:color .2s ease,border-color .2s ease,background .2s ease}
.art-back a:hover{color:var(--red);border-color:var(--red);background:#fff4f4}
.side .side-links a{line-height:1.4}
@media (max-width:768px){
  .art-head h1{font-size:22px}
  .art-pn{flex-direction:column}
}

/* ---------- 产品系列分类条 · 移动端优化 ---------- */
@media (max-width:768px){
  .cats-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cats-list a{padding:12px 14px;font-size:13.5px;gap:8px}
  .cats-list a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cats-list a small{flex:0 0 auto;font-size:11px;letter-spacing:0}
  .cats-head h3{font-size:19px}
  .cats-head em{font-size:12px;letter-spacing:2px;margin-left:6px}
  .cat-sec{margin-bottom:16px;scroll-margin-top:80px}
  .cat-sec-head{gap:10px;padding-bottom:10px;margin-bottom:18px}
  .cat-sec-head .idx{width:36px;height:36px;border-radius:10px;font-size:15px}
  .cat-sec-head h3{font-size:19px}
  .cat-sec-head p{font-size:11px;letter-spacing:1px}
}
@media (max-width:400px){
  .cats-list{grid-template-columns:1fr;gap:8px}
  .cats-list a{padding:12px 14px;font-size:14px}
  .cats-list a small{font-size:11px}
}

/* ---------- 产品卡片：图片 / 标题可点击 ---------- */
.prod-row .thumb{text-decoration:none}
.prod-row h4 a{color:inherit;text-decoration:none;transition:color .25s ease}
.prod-row h4 a:hover{color:var(--red)}
.prod-row .thumb:focus-visible,.prod-row h4 a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- 首页产品卡：图片 / 标题可点击 ---------- */
.prod-card .prod-img{text-decoration:none}
.prod-card h3 a{color:inherit;text-decoration:none;transition:color .25s ease}
.prod-card h3 a:hover{color:var(--red)}
.prod-card .prod-img:focus-visible,.prod-card h3 a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- SEO：详情页横幅标题改为非标题元素（视觉与 h1 保持一致） ---------- */
.page-hero .ph-title{font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.25}
@media (max-width:768px){.page-hero .ph-title{font-size:28px}}

/* ====================================================
   XILIAN · 全站动效增强（配套 animations.js）
   ----------------------------------------------------
   内容：页面淡入淡出 / 阅读进度条 / 导航吸顶态 / 滚动揭示 /
        卡片光标光晕 / 按钮涟漪 / 图片渐显 / 补充悬停微动效
==================================================== */

/* ---------- ① 页面进入淡入 · 离开淡出 ---------- */
@keyframes xPageIn{from{opacity:0}to{opacity:1}}
@keyframes xPageOut{from{opacity:1}to{opacity:0}}
body{animation:xPageIn .5s ease both}
body.page-leave{animation:xPageOut .25s ease both}

/* ---------- ② 顶部阅读进度条 ---------- */
.scroll-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:300;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--red) 0%,#ff7a3d 62%,#ffc046 100%);
  box-shadow:0 0 14px rgba(221,33,34,.5);
  will-change:transform;
}

/* ---------- ③ 导航吸顶态（滚动后收紧 + 投影） ---------- */
.header{transition:box-shadow .35s ease}
.header-inner{transition:height .35s ease}
.header.is-scrolled{box-shadow:0 12px 32px -20px rgba(14,23,38,.45)}
.header.is-scrolled .header-inner{height:70px}
@media (max-width:768px){.header.is-scrolled .header-inner{height:64px}}

/* ---------- ④ 滚动揭示（.rv → .rv-in） ---------- */
.rv{
  opacity:0;
  transition:opacity .72s cubic-bezier(.22,.61,.36,1) var(--rv-d,0ms),
             transform .88s cubic-bezier(.22,.61,.36,1) var(--rv-d,0ms);
}
.rv-up{transform:translateY(32px)}
.rv-down{transform:translateY(-26px)}
.rv-left{transform:translateX(-36px)}
.rv-right{transform:translateX(36px)}
.rv-zoom{transform:scale(.92)}
.rv.rv-in{opacity:1;transform:none}

/* ---------- ⑤ 卡片光标光晕（跟随鼠标的柔光） ---------- */
.spot{position:relative}
.spot::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(221,33,34,.11),rgba(221,33,34,0) 62%);
}
.spot:hover::after{opacity:1}

/* ---------- ⑥ 按钮点击涟漪 ---------- */
.btn{position:relative;overflow:hidden}
@keyframes xRipple{from{transform:scale(0);opacity:.55}to{transform:scale(1);opacity:0}}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(221,33,34,.18);
  animation:xRipple .7s cubic-bezier(.22,.61,.36,1) forwards;
}
.btn-primary .ripple,.btn-block .ripple{background:rgba(255,255,255,.5)}

/* ---------- ⑦ 图片渐显 ---------- */
.img-fade{opacity:0;transition:opacity .8s ease}
.img-fade.img-in{opacity:1}

/* ---------- ⑧ 补充微动效 ---------- */
.feat{transition:transform .38s cubic-bezier(.22,.61,.36,1),box-shadow .38s ease}
.feat:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.feat .num{transition:transform .38s ease}
.feat:hover .num{transform:scale(1.08)}
@keyframes xToTopGlow{
  0%,100%{box-shadow:0 12px 26px -12px rgba(221,33,34,.5)}
  50%{box-shadow:0 14px 34px -8px rgba(221,33,34,.8)}
}
.to-top.show{animation:xToTopGlow 2.8s ease-in-out infinite}
@keyframes xEmGlow{
  0%,100%{text-shadow:0 0 0 rgba(221,33,34,0)}
  50%{text-shadow:0 0 22px rgba(221,33,34,.5)}
}
.section-title em{animation:xEmGlow 3.6s ease-in-out infinite}

/* ---------- ⑨ 无障碍：系统开启「减少动态效果」时全部关闭 ---------- */
@media (prefers-reduced-motion:reduce){
  body,body.page-leave{animation:none}
  .rv,.rv-up,.rv-down,.rv-left,.rv-right,.rv-zoom{opacity:1!important;transform:none!important}
  .img-fade{opacity:1!important}
  .spot::after,.scroll-progress{display:none}
  .to-top.show,.section-title em{animation:none}
}

/* ---------- ⑩ 移除「在线留言」表单后的布局协调 ---------- */
/* 首页联系区：单列铺满，4 项联系信息改为等宽玻璃卡片 */
.contact-wrap.contact-solo{grid-template-columns:1fr;gap:0}
.contact .contact-solo .contact-info{text-align:center}
.contact .contact-solo .contact-lead{max-width:720px;margin-left:auto;margin-right:auto}
.contact .contact-solo .contact-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;margin-top:8px;text-align:left;
}
.contact .contact-solo .contact-list li{
  flex-direction:column;align-items:flex-start;gap:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:26px 24px;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background .4s ease,border-color .4s ease;
}
.contact .contact-solo .contact-list li:hover{
  transform:translateY(-6px);background:rgba(255,255,255,.1);border-color:rgba(221,33,34,.55);
}
/* 联系页：白色信息卡满宽 + 4 个联系方式一行铺开 */
.contact-wrap.contact-inner.contact-solo .contact-info{padding:40px}
.contact-wrap.contact-inner.contact-solo .contact-lead{max-width:820px}
.contact-wrap.contact-inner.contact-solo .ct-way{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}

@media (max-width:1024px){
  .contact .contact-solo .contact-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-wrap.contact-inner.contact-solo .ct-way{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:768px){
  .contact .contact-solo .contact-list{grid-template-columns:1fr;gap:14px}
  .contact-wrap.contact-inner.contact-solo .contact-info{padding:26px}
  .contact-wrap.contact-inner.contact-solo .ct-way{grid-template-columns:1fr}
}