/* ==========================================================================
   上海双道机械工程有限公司 · 官网样式
   设计语言：Source = Sandvik Coromant 视觉体系（黑白工业摄影 + 品牌黄 #FFCC01）
   零依赖、纯静态，可直接放到任意虚拟主机
   ========================================================================== */

:root{
  --ink:#17191C;          /* 近黑，取自品牌深灰 */
  --ink-2:#0F1113;        /* 更深，用于页脚 */
  --steel:#57585A;        /* 品牌钢灰 */
  --amber:#FFCC01;        /* Sandvik 标志黄（素材采样值） */
  --amber-d:#E5B600;
  --red:#C8102E;          /* 品牌红（LOGO 红条） */
  --line:#E6E7E9;
  --line-2:#D8DADD;
  --muted:#8A8F98;
  --text:#231F20;         /* 品牌文字黑，取自 LOGO */
  --text-2:#57585A;
  --bg:#FFFFFF;
  --bg-soft:#F5F6F7;
  --radius:8px;
  --shadow:0 1px 2px rgba(23,25,28,.04);
  --shadow-lg:0 12px 32px rgba(23,25,28,.10);
  --wrap:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px; line-height:1.7; letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{margin:0; line-height:1.3; font-weight:700;}
p{margin:0;}
ul{margin:0; padding:0; list-style:none;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px;}

/* ---------- 滚动入场（流畅度） ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} }

/* ---------- 顶部信息条 ---------- */
.topbar{background:var(--ink); color:#9AA0A6; font-size:12px; height:38px;}
.topbar .wrap{height:38px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.topbar a{color:#9AA0A6; transition:color .2s;}
.topbar a:hover{color:#fff;}
.topbar .tb-right{display:flex; align-items:center; gap:22px; white-space:nowrap;}
.topbar .tb-tel{color:var(--amber); font-weight:600;}

/* ---------- 主导航 ---------- */
.nav{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); transition:box-shadow .25s ease;}
.nav.is-stuck{box-shadow:0 4px 20px rgba(23,25,28,.08);}
.nav .wrap{height:78px; display:flex; align-items:center;}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
/* 品牌标记：直接用矢量文件 assets/img/logo-mark.svg（单一来源，避免与源文件不一致）
   结构 = 上排 红 + 黄（等长）／下排 黑色整条 */
.logo-mark{width:46px; height:32px; flex:0 0 auto; display:block;}
.brand-name{display:flex; align-items:baseline; gap:8px;}
.brand-name b{font-size:23px; letter-spacing:.02em; color:var(--text);}
.brand-name span{font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;}

.nav-links{display:flex; align-items:center; gap:38px; margin-left:auto;}
.nav-links a{font-size:15px; color:var(--text-2); position:relative; padding:6px 0; transition:color .2s;}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--amber); transition:right .25s ease;}
.nav-links a:hover{color:var(--text);}
.nav-links a:hover::after{right:0;}
.nav-links a.on{color:var(--text); font-weight:700;}
.nav-links a.on::after{right:0;}

.nav-cta{margin-left:34px; flex:0 0 auto;}
.nav-toggle{display:none; margin-left:auto; width:44px; height:44px; border:1px solid var(--line-2); border-radius:6px; background:#fff; cursor:pointer; padding:0; align-items:center; justify-content:center;}
.nav-toggle span{display:block; width:18px; height:2px; background:var(--text); position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text);}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 26px;
  border-radius:6px; font-size:15px; font-weight:600; border:1px solid transparent; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease, box-shadow .2s ease;}
.btn:active{transform:translateY(1px);}
.btn-amber{background:var(--amber); color:var(--text);}
.btn-amber:hover{background:var(--amber-d); box-shadow:0 6px 18px rgba(255,204,1,.35);}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-line{background:#fff; color:var(--text); border-color:var(--line-2);}
.btn-line:hover{border-color:var(--text);}
.btn-sm{height:40px; padding:0 20px; font-size:14px;}

/* ---------- 首屏 ---------- */
.hero{background:var(--ink); color:#fff; position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(1100px 420px at 78% 8%, rgba(255,204,1,.10), transparent 62%);}
.hero .wrap{position:relative; padding-top:64px; padding-bottom:64px; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:56px; align-items:center;}
.hero-tag{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 15px; border-radius:15px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--amber); font-size:12.5px;}
.hero h1{font-size:56px; letter-spacing:-.01em; margin:22px 0 0;}
.hero .hero-en{font-size:34px; color:var(--amber); margin-top:8px; letter-spacing:.01em;}
.hero .hero-desc{color:#B9BEC4; font-size:15.5px; max-width:600px; margin-top:20px;}
.hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.hero-media{border-radius:12px; overflow:hidden; box-shadow:var(--shadow-lg); background:#23262A;}
.hero-media img{width:100%; height:336px; object-fit:cover; object-position:left center;}
.hero-media figcaption{color:var(--muted); font-size:12.5px; text-align:center; padding:10px 0 0;}

/* ---------- 数据条 ---------- */
.stats{border-bottom:1px solid var(--line);}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); padding-top:42px; padding-bottom:42px;}
.stat{position:relative; padding-left:2px;}
.stat + .stat{border-left:1px solid var(--line); padding-left:40px;}
.stat .v{font-size:44px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--text);}
.stat .v.amber{color:var(--amber-d); font-size:34px;}
.stat .k{color:var(--text-2); font-size:14px; margin-top:8px;}

/* ---------- 通用区块 ---------- */
.section{padding:86px 0;}
.section.soft{background:var(--bg-soft);}
.section-head{margin-bottom:44px;}
.section-head h2{font-size:30px; letter-spacing:-.01em;}
.section-head p{color:var(--text-2); font-size:14.5px; margin-top:12px;}
.section-head .eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber-d); margin-bottom:12px;}

/* ---------- 价值链五环节 ---------- */
.vc-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.vc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  position:relative; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.vc-card .n{font-size:13px; font-weight:700; color:var(--amber-d); letter-spacing:.06em;}
.vc-card h3{font-size:21px; margin:18px 0 6px;}
.vc-card .en{font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase;}
.vc-card:hover{transform:translateY(-3px); border-color:#C9CDD4; box-shadow:var(--shadow-lg);}
.vc-card.dark{background:var(--ink); border-color:var(--ink);}
.vc-card.dark h3{color:#fff;}
.vc-card.dark .en{color:#9AA0A6;}

/* ---------- 服务能力 ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.svc-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.svc-card .ic{width:38px; height:38px; border-radius:7px; background:var(--amber); display:flex;
  align-items:center; justify-content:center; margin-bottom:16px;}
.svc-card .ic svg{width:20px; height:20px; stroke:#231F20; fill:none; stroke-width:1.9;}
.svc-card h3{font-size:16.5px; margin-bottom:6px;}
.svc-card p{font-size:13px; color:var(--text-2); line-height:1.65;}
.svc-card:hover{transform:translateY(-3px); border-color:#C9CDD4; box-shadow:var(--shadow-lg);}

/* ---------- 产品 ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.prod-card{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.prod-card .ph{height:190px; background:linear-gradient(135deg,#23262A,#3A3E43); position:relative; overflow:hidden;}
.prod-card .ph img{width:100%; height:100%; object-fit:cover; opacity:.92;}
.prod-card .ph .tagline{position:absolute; left:18px; bottom:16px; color:#fff; font-size:13px; font-weight:600;
  letter-spacing:.04em; text-shadow:0 1px 6px rgba(0,0,0,.5);}
.prod-card .bd{padding:22px 24px 26px;}
.prod-card h3{font-size:18px;}
.prod-card h3 em{font-style:normal; color:var(--amber-d); margin-right:6px;}
.prod-card p{color:var(--text-2); font-size:13.5px; margin-top:10px;}
.prod-card:hover{transform:translateY(-3px); border-color:#C9CDD4; box-shadow:var(--shadow-lg);}

/* ---------- 关于我们（首页摘要） ---------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.about-grid .prose p{color:var(--text-2); font-size:14.5px; margin-top:16px;}
.about-grid .prose p:first-child{margin-top:0;}
.about-facts{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;}
.fact{background:#fff; border:1px solid var(--line); border-left:3px solid var(--amber); border-radius:6px; padding:16px 18px;}
.fact .k{font-size:12px; color:var(--muted);}
.fact .v{font-size:17px; font-weight:700; margin-top:4px;}
.about-media{border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#23262A;}
.about-media img{width:100%;}

/* ---------- 客户专区引导 ---------- */
.cta{background:var(--ink); color:#fff;}
.cta .wrap{padding-top:56px; padding-bottom:56px; display:flex; align-items:center; gap:40px; flex-wrap:wrap;}
.cta .eyebrow{color:var(--amber); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;}
.cta h2{font-size:29px; margin:12px 0 12px;}
.cta p{color:#9AA0A6; font-size:14px;}
.cta .act{margin-left:auto;}

/* ---------- 内页头 ---------- */
.page-hero{background:var(--ink); color:#fff;}
.page-hero .wrap{padding-top:56px; padding-bottom:56px;}
.page-hero h1{font-size:38px; letter-spacing:-.01em;}
.page-hero p{color:#9AA0A6; font-size:14.5px; margin-top:14px; max-width:760px;}
.crumb{color:#7A8087; font-size:12.5px; margin-bottom:18px;}
.crumb a:hover{color:var(--amber);}
.crumb span{color:#4A4F55; margin:0 8px;}

/* ---------- 列表 / 文章 ---------- */
.list-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.art{background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.art .ph{height:170px; background:#EDEFF1; overflow:hidden;}
.art .ph img{width:100%; height:100%; object-fit:cover;}
.art .bd{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column;}
.art h3{font-size:16.5px;}
.art p{color:var(--text-2); font-size:13px; margin-top:8px; flex:1;}
.art .meta{color:var(--muted); font-size:12px; margin-top:14px;}
.art:hover{transform:translateY(-3px); border-color:#C9CDD4; box-shadow:var(--shadow-lg);}
.tabs{display:flex; gap:10px; margin-bottom:28px; flex-wrap:wrap;}
.tabs a{height:38px; padding:0 20px; display:inline-flex; align-items:center; border-radius:999px;
  border:1px solid var(--line-2); font-size:14px; color:var(--text-2); transition:.2s;}
.tabs a:hover{border-color:var(--text); color:var(--text);}
.tabs a.on{background:var(--ink); border-color:var(--ink); color:#fff;}
.empty{border:1px dashed var(--line-2); border-radius:10px; padding:64px 24px; text-align:center; color:var(--muted);}
.empty b{display:block; color:var(--text); font-size:17px; margin-bottom:8px;}

/* ---------- 联系页 ---------- */
.contact-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px;}
.info-list li{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);}
.info-list .k{flex:0 0 84px; color:var(--muted); font-size:13.5px;}
.info-list .v{flex:1; font-size:15px;}
.info-list .v a:hover{color:var(--amber-d);}
.qr-card{background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:26px; text-align:center;}
.qr-card img{width:200px; margin:0 auto 14px; border-radius:6px; background:#fff;}

/* ---------- 页脚 ---------- */
.footer{background:var(--ink-2); color:#8A8F98; font-size:12.5px;}
.footer .wrap{padding-top:60px; padding-bottom:30px;}
.footer .cols{display:grid; grid-template-columns:1.4fr 1fr 1.2fr auto; gap:48px;}
.footer h4{color:#fff; font-size:14px; margin-bottom:16px;}
.footer .fname{color:#fff; font-size:19px; font-weight:700; margin-bottom:12px;}
.footer li{margin-bottom:9px;}
.footer a:hover{color:var(--amber);}
.footer .fqr{width:120px; height:120px; border-radius:6px; background:#fff; padding:6px;}
.footer .fqr img{width:100%;}
.footer .copy{border-top:1px solid #24272B; margin-top:44px; padding-top:22px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; color:#57585A;}
.footer .copy-left{display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* 备案号：必须可点击跳转工信部备案系统，且清晰可见（备案核查要求） */
.footer .beian a{color:#9AA0A6; font-size:13px; border-bottom:1px solid rgba(154,160,166,.4);
  padding-bottom:1px; transition:color .2s, border-color .2s;}
.footer .beian a:hover{color:var(--amber); border-bottom-color:var(--amber);}
.beian-note{font-size:11px; color:#5A5F66;}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .hero h1{font-size:44px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .prod-grid,.list-grid{grid-template-columns:repeat(2,1fr);}
  .vc-grid{grid-template-columns:repeat(3,1fr);}
  .footer .cols{grid-template-columns:1fr 1fr; gap:32px;}
}
@media (max-width:860px){
  .wrap{padding:0 20px;}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 16px; border-bottom:1px solid var(--line);
    box-shadow:0 16px 30px rgba(23,25,28,.10);}
  .nav-links.open{display:flex;}
  .nav-links a{width:100%; padding:13px 0; border-bottom:1px solid var(--line);}
  .nav-links a::after{display:none;}
  .nav-toggle{display:flex;}
  .nav-cta{display:none;}
  .topbar{height:auto;}
  .topbar .wrap{height:auto; padding-top:8px; padding-bottom:8px;}
  .topbar .tb-brand{display:none;}
  .hero h1{font-size:34px;}
  .hero .hero-en{font-size:24px;}
  .stats .wrap{grid-template-columns:1fr 1fr; gap:26px 0;}
  .stat + .stat{border-left:0; padding-left:0;}
  .stat:nth-child(even){border-left:1px solid var(--line); padding-left:24px;}
  .section{padding:60px 0;}
  .section-head h2{font-size:24px;}
  .vc-grid,.svc-grid,.prod-grid,.list-grid,.about-grid,.contact-grid{grid-template-columns:1fr;}
  .about-facts{grid-template-columns:1fr;}
  .cta .act{margin-left:0;}
  .page-hero h1{font-size:28px;}
  .footer .cols{grid-template-columns:1fr;}
}

/* ==========================================================================
   型号快速查询（首页，会员专区入口）
   规则提示：匹配自动忽略空格/连字符等书写差异；* 代表任意字符，但不能只输入 *
   ========================================================================== */
.qsearch{background:var(--ink); color:#fff; padding:58px 0;}
.qsearch .wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center;}
.qs-lead .eyebrow{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber);}
.qs-lead h2{font-size:28px; letter-spacing:-.01em; margin-top:10px;}
.qs-lead p{color:#9AA0A6; font-size:14px; margin-top:12px; line-height:1.8;}
.qs-lead p.qs-rule{color:var(--amber);}

.qs-seg{display:inline-flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:7px; padding:3px; margin-bottom:14px;}
.qs-seg .seg{background:transparent; border:0; color:#B9BEC4; font:inherit; font-size:13.5px; font-weight:600;
  padding:8px 20px; border-radius:5px; cursor:pointer; transition:background .15s, color .15s;}
.qs-seg .seg:hover{color:#fff;}
.qs-seg .seg.is-active{background:var(--amber); color:var(--ink);}

.qs-row{display:flex; gap:10px;}
.qs-row input{flex:1; min-width:0; height:52px; padding:0 16px; border-radius:6px;
  border:1px solid transparent; background:#fff; color:var(--text); font:inherit; font-size:15px;}
.qs-row input::placeholder{color:#B0B4B9;}
.qs-row input:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,204,1,.28);}
.qs-go{height:52px; padding:0 30px; white-space:nowrap;}
.qs-note{color:#8A8F98; font-size:12.5px; margin-top:12px; line-height:1.75;}
.qs-note a{color:var(--amber); border-bottom:1px solid rgba(255,204,1,.45);}
.qs-note a:hover{border-bottom-color:var(--amber);}

@media(max-width:980px){
  .qsearch .wrap{grid-template-columns:1fr; gap:26px;}
  .qsearch{padding:46px 0;}
  .qs-lead h2{font-size:23px;}
  .qs-row{flex-direction:column;}
  .qs-go{width:100%;}
}

/* ==========================================================================
   语言菜单（details/summary 实现，不依赖 JS；纯 HTML 也能用）
   注意：语言名一律用「该语言自己的写法」显示，方便各国访客找到自己的语言
   ========================================================================== */
.topbar{position:relative; z-index:70;}   /* 让下拉菜单盖住下方 sticky 导航 */
.topbar .lang{position:relative; display:inline-block;}
.topbar .lang summary{list-style:none; cursor:pointer; color:#fff; font-size:12px;
  display:inline-flex; align-items:center; gap:6px; padding:2px 0; transition:color .2s;}
.topbar .lang summary::-webkit-details-marker{display:none;}
.topbar .lang summary::after{content:"▾"; font-size:9px; color:#9AA0A6; transition:transform .18s;}
.topbar .lang[open] summary::after{transform:rotate(180deg);}
.topbar .lang summary:hover{color:var(--amber);}
.topbar .lang ul{position:absolute; right:0; top:calc(100% + 10px); z-index:80; margin:0;
  list-style:none; background:#fff; border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow-lg); padding:6px; min-width:156px;}
.topbar .lang li{display:block;}
.topbar .lang li a,
.topbar .lang li.on{display:block; padding:8px 12px; border-radius:5px; font-size:13px;
  color:var(--text); white-space:nowrap; transition:background .15s, color .15s;}
.topbar .lang li a:hover{background:var(--bg-soft); color:var(--text);}
.topbar .lang li.on{color:var(--muted); font-weight:600; cursor:default;}