/* 青岛龙山木工机械有限公司 — 改版演示站
   深蓝/钢灰工业配色，移动优先响应式，纯静态无框架 */
:root{
  --ink:#14334d;          /* 深钢蓝 */
  --ink-2:#1d4a6b;
  --steel:#5a6d7a;        /* 钢灰 */
  --steel-dark:#37474f;
  --accent:#e07b24;       /* 工业橙，仅用于电话与行动按钮 */
  --accent-dark:#c56415;
  --bg:#f4f6f8;
  --card:#ffffff;
  --line:#dde4ea;
  --text:#26333c;
  --muted:#6b7a85;
  --radius:10px;
  --shadow:0 2px 10px rgba(20,51,77,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC",sans-serif;
  color:var(--text);background:var(--bg);line-height:1.7;font-size:16px;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block}
@keyframes img-in{from{opacity:0}to{opacity:1}}
.card-img img,.pd-photo img,.hero-photo img{animation:img-in .7s ease both}
a{color:var(--ink-2);text-decoration:none;transition:color .25s ease}
a:hover{text-decoration:underline}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* ---------- 顶部电话条 ---------- */
.topbar{background:var(--steel-dark);color:#cfd9de;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:5px;padding-bottom:5px;flex-wrap:wrap}
.topbar a{color:#ffb066;font-weight:600;white-space:nowrap}
.topbar .tb-left{letter-spacing:.02em}

/* ---------- 页眉导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:3px solid var(--ink);box-shadow:0 1px 6px rgba(20,51,77,.08);
}
.header-in{display:flex;align-items:center;gap:14px;padding:10px 0}
.brand{display:flex;flex-direction:column;line-height:1.25}
.brand .brand-name{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:.03em}
.brand .brand-en{font-size:10.5px;color:var(--steel);letter-spacing:.12em;text-transform:uppercase}
.header-tel{margin-left:auto;text-align:right;display:none}
.header-tel .ht-label{font-size:12px;color:var(--muted)}
.header-tel .ht-num{font-size:21px;font-weight:800;color:var(--accent);letter-spacing:.02em}
.header-tel a:hover{text-decoration:none;color:var(--accent-dark)}
.nav-toggle{
  margin-left:auto;background:var(--ink);color:#fff;border:0;border-radius:6px;
  font-size:15px;padding:9px 14px;cursor:pointer;
}
.main-nav{display:none;border-top:1px solid var(--line)}
.main-nav.open{display:block}
.main-nav ul{list-style:none}
.main-nav li a{
  display:block;padding:12px 16px;color:var(--text);font-weight:600;
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease,color .25s ease;
}
.main-nav li a:hover{background:var(--bg);text-decoration:none;color:var(--ink)}
.main-nav li a.active{color:var(--accent-dark)}
@media(min-width:900px){
  .nav-toggle{display:none}
  .header-tel{display:block}
  .main-nav{display:block;border-top:0}
  .main-nav .wrap{display:flex;justify-content:flex-end}
  .main-nav ul{display:flex;gap:2px}
  .main-nav li a{border-bottom:0;padding:14px 15px}
  .header-in{padding-bottom:0}
  .site-header .header-row{display:flex;align-items:flex-start}
}

/* ---------- 通用区块 ---------- */
.section{padding:38px 0}
.section.alt{background:#fff}
.sec-head{margin-bottom:22px}
.sec-head h2{
  font-size:24px;color:var(--ink);font-weight:800;line-height:1.3;
  padding-left:12px;border-left:5px solid var(--accent);
}
.sec-head p{color:var(--muted);margin-top:6px;padding-left:17px;font-size:14.5px}
.btn{
  display:inline-block;background:var(--accent);color:#fff;font-weight:700;
  padding:11px 26px;border-radius:6px;font-size:15.5px;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--accent-dark);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.more-link{font-weight:600;font-size:14.5px}

/* ---------- 首页 Hero（工业风实拍背景：原站气动拼板机实拍图模糊放大作底 + 深色渐变遮罩保文字可读，前景保留原图清晰版） ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--ink);
  color:#fff;padding:44px 0 50px;
}
.hero::before{
  content:"";position:absolute;inset:-36px;
  background:url("assets/img_033.jpg") center 32%/cover no-repeat;
  filter:blur(16px) saturate(1.15) brightness(.92);
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(13,36,54,.94) 0%,rgba(20,51,77,.85) 52%,rgba(29,74,107,.66) 100%);
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;gap:26px;align-items:center}
.hero h1{font-size:29px;line-height:1.35;font-weight:800;letter-spacing:.02em}
.hero h1 .hl{color:#ffb066}
.hero .hero-sub{margin-top:14px;color:#d7e3ea;font-size:15.5px;max-width:34em}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-tags span{
  border:1px solid rgba(255,255,255,.45);border-radius:999px;
  padding:4px 13px;font-size:13.5px;color:#eef4f7;
}
.hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero-cta .btn.ghost{border-color:#fff;color:#fff}
.hero-cta .btn.ghost:hover{background:rgba(255,255,255,.14)}
.hero-photo{background:#fff;border-radius:var(--radius);padding:10px;box-shadow:0 14px 36px rgba(0,0,0,.35);overflow:hidden}
.hero-photo img{border-radius:6px;width:100%;transition:transform .9s ease}
.hero-photo:hover img{transform:scale(1.05)}
.hero-photo figcaption{text-align:center;color:var(--steel);font-size:13px;padding-top:8px}
@media(min-width:900px){
  .hero-grid{grid-template-columns:1.25fr .85fr}
  .hero h1{font-size:38px}
}

/* ---------- 卡片网格 ---------- */
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .35s ease,box-shadow .35s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,51,77,.16)}
.card .card-img{background:#eef3ee;aspect-ratio:25/22;overflow:hidden}
.card .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.card:hover .card-img img{transform:scale(1.07)}
.card .ph{
  aspect-ratio:25/22;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;text-align:center;padding:16px;color:#fff;
  background:linear-gradient(150deg,#28455c 0%,#3c6076 70%,#4d7288 100%);
}
.card .ph .ph-model{font-size:25px;font-weight:800;letter-spacing:.04em;line-height:1.25;word-break:break-all}
.card .ph .ph-name{font-size:14px;color:#cfe0ea}
.card .ph .ph-tag{font-size:11.5px;border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:2px 10px;color:#e7eff3}
.card-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-body h3{font-size:17px;color:var(--ink);line-height:1.4}
.card-body h3 a{color:var(--ink)}
.card-body .card-meta{font-size:13.5px;color:var(--muted)}
.card-body .card-link{margin-top:auto;font-weight:700;font-size:14.5px;color:var(--accent-dark)}
.card-body .card-link:hover{color:var(--accent)}

/* ---------- 图文/特性 ---------- */
.feature-list{list-style:none;display:grid;gap:14px}
@media(min-width:768px){.feature-list{grid-template-columns:1fr 1fr}}
.feature-list li{
  background:#fff;border:1px solid var(--line);border-left:5px solid var(--ink-2);
  border-radius:8px;padding:15px 18px;box-shadow:var(--shadow);
  transition:transform .3s ease,box-shadow .3s ease;
}
.feature-list li:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(20,51,77,.13)}
.feature-list .f-num{
  display:inline-block;background:var(--ink);color:#fff;font-weight:800;
  width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;
  font-size:14px;margin-right:9px;vertical-align:2px;
}
.prose p{margin-bottom:14px;text-align:justify}
.prose .lead{font-size:17px;color:var(--ink);font-weight:600}
.quote{
  background:#eef3f6;border-left:5px solid var(--accent);border-radius:0 8px 8px 0;
  padding:16px 20px;font-size:17px;color:var(--ink);font-weight:700;margin:20px 0;
}

/* ---------- 内页头图条（同首页法：实拍图模糊放大打底 + 深色遮罩；产品页用各自产品图，经 --ph-img 传入） ---------- */
.page-hero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:30px 0}
.page-hero::before{
  content:"";position:absolute;inset:-26px;
  background-image:var(--ph-img,url("assets/img_033.jpg"));
  background-size:cover;background-position:center;
  filter:blur(13px) saturate(1.1) brightness(.92);
}
.page-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(13,36,54,.92) 0%,rgba(20,51,77,.82) 55%,rgba(29,74,107,.68) 100%);
}
.page-hero .wrap{position:relative;z-index:1}
.page-hero h1{font-size:26px;font-weight:800}
.page-hero .crumb{font-size:13.5px;color:#bccfd9;margin-top:5px}
.page-hero .crumb a{color:#bccfd9}

/* ---------- 产品详情 ---------- */
.pd-grid{display:grid;gap:24px}
@media(min-width:900px){.pd-grid{grid-template-columns:400px 1fr}}
.pd-photo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow);overflow:hidden}
.pd-photo img{border-radius:6px;width:100%;transition:transform .8s ease}
.pd-photo:hover img{transform:scale(1.05)}
.pd-photo .ph{
  border-radius:6px;aspect-ratio:25/22;display:flex;flex-direction:column;gap:6px;
  justify-content:center;align-items:center;text-align:center;padding:20px;color:#fff;
  background:linear-gradient(150deg,#28455c 0%,#3c6076 70%,#4d7288 100%);
}
.pd-photo .ph .ph-model{font-size:30px;font-weight:800;letter-spacing:.03em;line-height:1.3;word-break:break-all}
.pd-photo .ph .ph-name{font-size:15px;color:#cfe0ea}
.pd-info h2,.pd-sec-title{font-size:20px;color:var(--ink);font-weight:800;margin:6px 0 12px}
.pd-info .pd-model-line{color:var(--muted);font-size:14.5px;margin-bottom:12px}
.spec-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:var(--shadow)}
table.spec{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
table.spec th{background:var(--ink);color:#fff;font-weight:700;white-space:nowrap}
table.spec td:first-child,table.spec th:first-child{font-weight:700;color:var(--ink);white-space:nowrap;background:#f0f4f6}
table.spec th:first-child{background:var(--ink);color:#fff}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
.desc-list{list-style:none;counter-reset:desc}
.desc-list li{padding:9px 0 9px 4px;border-bottom:1px dashed var(--line)}
.desc-list li:last-child{border-bottom:0}
.cta-box{
  margin-top:26px;background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:20px 22px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
}
.cta-box .cta-txt{font-size:17px;font-weight:700}
.cta-box .cta-txt small{display:block;font-weight:400;font-size:13.5px;color:#c3d2dc}
.cta-box .btn{margin-left:auto}
.back-link{display:inline-block;margin-top:20px;font-weight:600}

/* ---------- 新闻 ---------- */
.news-list{list-style:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.news-list li{display:flex;gap:15px;align-items:baseline;padding:15px 18px;border-bottom:1px solid var(--line);transition:background-color .25s ease}
.news-list li:hover{background:#f4f8fa}
.news-list li:last-child{border-bottom:0}
.news-list .n-date{
  flex:none;background:#eef3f6;color:var(--ink);border-radius:6px;text-align:center;
  padding:5px 9px;font-size:12.5px;line-height:1.45;min-width:76px;font-weight:600;
}
.news-list .n-title{font-size:15.5px;color:var(--text)}

/* ---------- 联系 ---------- */
.contact-grid{display:grid;gap:20px}
@media(min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr}}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.info-card h2{font-size:19px;color:var(--ink);margin-bottom:14px}
.info-list{list-style:none}
.info-list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
.info-list li:last-child{border-bottom:0}
.info-list .k{flex:none;width:74px;color:var(--muted);font-weight:600}
.info-list a{font-weight:700;color:var(--accent-dark)}
.big-tel{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;text-align:center}
.big-tel .bt-label{color:#c3d2dc;font-size:14px}
.big-tel .bt-num{display:block;font-size:29px;font-weight:800;color:#ffb066;margin:6px 0 2px;letter-spacing:.02em}
.big-tel a:hover{text-decoration:none}
.big-tel .bt-sub{font-size:13.5px;color:#c3d2dc}

/* ---------- 页脚 ---------- */
.site-footer{background:var(--steel-dark);color:#c9d4da;margin-top:0;font-size:14px}
.site-footer .foot-grid{display:grid;gap:22px;padding:32px 0 8px}
@media(min-width:900px){.site-footer .foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.site-footer h4{color:#fff;font-size:16px;margin-bottom:10px}
.site-footer ul{list-style:none}
.site-footer li{padding:3px 0}
.site-footer a{color:#ffb066}
.site-footer .foot-nav a{color:#c9d4da}
.site-footer .foot-nav a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16);margin-top:18px;padding:14px 0 20px;color:#9db0ba;font-size:13px;text-align:center}

/* ---------- 移动端固定拨号条 ---------- */
.mobile-callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  background:var(--accent);box-shadow:0 -2px 10px rgba(0,0,0,.18);
}
.mobile-callbar a{
  flex:1;text-align:center;color:#fff;font-weight:800;font-size:16.5px;padding:13px 6px;
}
.mobile-callbar a:hover{text-decoration:none}
.mobile-callbar a.alt{background:var(--ink)}
@media(min-width:900px){.mobile-callbar{display:none}}
body{padding-bottom:47px}
@media(min-width:900px){body{padding-bottom:0}}

/* ---------- 动效克制：系统要求减少动态时全部关闭 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover,.feature-list li:hover{transform:none}
  .card:hover .card-img img,.pd-photo:hover img,.hero-photo:hover img{transform:none}
}