/*
Theme Name: DMD Industrial
Theme URI: https://dmdmachinery.com/
Author: Manus AI
Author URI: https://manus.im/
Description: A responsive industrial WordPress theme for Jiangsu Demanda Electromechanical Equipment Co., Ltd. Includes a structured B2B machine-tool website, bilingual-ready content, responsive navigation, product and service sections, and contact CTAs.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dmd-industrial
*/

:root {
  --navy: #071a2e;
  --navy-2: #0b2c4a;
  --blue: #087fd1;
  --blue-bright: #1ca6f2;
  --ink: #102333;
  --muted: #607183;
  --line: #dbe6ef;
  --surface: #f5f9fc;
  --white: #fff;
  --orange: #ef7d32;
  --shadow: 0 18px 50px rgba(7, 26, 46, .12);
  --radius: 18px;
  --container: 1180px;
  --ease: cubic-bezier(.23,1,.32,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); }
a:hover { color: var(--navy); }
button, input, textarea, select { font: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.topbar { background: var(--navy); color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .04em; }
.topbar-inner { display:flex; justify-content:space-between; gap:20px; padding:8px 0; }
.topbar a { color: #fff; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(219,230,239,.8); backdrop-filter: blur(14px); }
.header-inner { min-height: 82px; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:11px; color: var(--navy); font-weight: 900; letter-spacing: .12em; }
.brand:hover { color: var(--blue); }
.brand-logo { display:block !important; width:150px !important; max-width:150px !important; height:44px !important; object-fit:contain; object-position:left center; }
.brand-mark { width: 44px; height: 34px; display:grid; place-items:center; color: var(--white); background: linear-gradient(135deg, var(--blue), var(--navy)); clip-path: polygon(0 20%, 100% 0, 82% 100%, 0 78%); font-size: 13px; letter-spacing: 0; }
.brand-name { display:flex; flex-direction:column; font-size: 17px; line-height:1.05; }
.brand-name small { margin-top:4px; color: var(--muted); font-size: 9px; letter-spacing:.16em; font-weight:700; }
.main-nav ul { display:flex; align-items:center; gap: 22px; list-style:none; padding:0; margin:0; }
.main-nav a { color: var(--ink); font-size: 13px; font-weight: 700; }
.main-nav a:hover { color: var(--blue); }
.header-cta { display:inline-flex; align-items:center; gap:8px; padding:11px 17px; color:#fff !important; background: var(--blue); border-radius: 6px; font-size:13px; font-weight:800; }
.header-cta:hover { background: var(--navy); transform: translateY(-2px); }
.menu-toggle { display:none; border:0; background:transparent; color:var(--navy); font-size:28px; cursor:pointer; }

.hero { position:relative; min-height: 690px; display:flex; align-items:center; overflow:hidden; background: var(--navy); color:#fff; }
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(4,18,33,.97) 0%, rgba(4,18,33,.86) 42%, rgba(4,18,33,.25) 78%, rgba(4,18,33,.55) 100%), url("assets/images/ai-dmd-composite-hero.jpg") center/cover; }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:170px; background: linear-gradient(transparent, rgba(7,26,46,.7)); }
.hero .container { position:relative; z-index:1; }
.hero-copy { max-width: 690px; padding: 100px 0 115px; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; color: var(--blue-bright); font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:""; width:32px; height:2px; background:var(--orange); }
.hero h1 { max-width:740px; margin:20px 0 22px; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing:-.06em; }
.hero h1 span { color: var(--blue-bright); }
.hero p { max-width:610px; color: rgba(255,255,255,.78); font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-proof { display:flex; flex-wrap:wrap; gap:18px; margin-top:30px; color:rgba(255,255,255,.74); font-size:12px; font-weight:800; }
.hero-proof span { display:inline-flex; align-items:center; gap:7px; }
.hero-proof span::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 21px; border:1px solid transparent; border-radius:5px; font-weight:800; font-size:13px; cursor:pointer; }
.btn-primary { color:#fff; background:var(--blue); box-shadow: 0 10px 25px rgba(8,127,209,.22); }
.btn-primary:hover { color:#fff; background:var(--blue-bright); transform: translateY(-2px); }
.btn-outline { color:#fff; border-color:rgba(255,255,255,.36); background:rgba(255,255,255,.05); }
.btn-outline:hover { color:var(--navy); background:#fff; }
.btn-dark { color:#fff; background:var(--navy); }
.btn-dark:hover { color:#fff; background:var(--blue); }

.section { padding: 100px 0; }
.section-sm { padding: 70px 0; }
.section-dark { color:#fff; background: var(--navy); }
.section-surface { background: var(--surface); }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:45px; }
.section-head > div { max-width: 700px; }
.section-kicker { margin:0 0 12px; color:var(--blue); font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.section h2 { margin:0; font-size: clamp(32px, 4vw, 52px); line-height:1.05; letter-spacing:-.05em; }
.section-intro { margin:17px 0 0; color:var(--muted); max-width:650px; }
.section-dark .section-intro { color:rgba(255,255,255,.7); }

.split { display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.media-card { position:relative; overflow:hidden; border-radius:var(--radius); background:var(--navy); box-shadow:var(--shadow); }
.media-card img { width:100%; aspect-ratio: 1.15 / 1; object-fit:cover; }
.media-card.wide img { aspect-ratio: 1.5 / 1; }
.media-label { position:absolute; left:18px; bottom:18px; padding:7px 12px; color:#fff; background:rgba(7,26,46,.82); border-left:3px solid var(--orange); font-size:12px; font-weight:800; }
.feature-list { display:grid; gap:20px; margin:28px 0 0; }
.feature { display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; color:#fff; background:var(--blue); border-radius:10px; font-weight:900; }
.feature h3 { margin:0 0 3px; font-size:17px; }
.feature p { margin:0; color:var(--muted); font-size:14px; }

.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; }
.card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:0 6px 24px rgba(7,26,46,.04); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.card-image { width:100%; aspect-ratio: 1.42 / 1; object-fit:cover; }
.card-body { padding:24px; }
.card h3 { margin:0 0 8px; font-size:21px; letter-spacing:-.02em; }
.card p { margin:0; color:var(--muted); font-size:14px; }
.card-link { display:inline-flex; margin-top:18px; font-weight:800; font-size:13px; }
.blog-card .card-image { aspect-ratio: 1.5 / 1; }
.post-meta { margin:0 0 10px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.post-meta a { color:var(--blue); }
.pagination { display:flex; justify-content:center; gap:10px; margin-top:42px; }
.pagination a, .pagination span { display:inline-flex; padding:10px 14px; border:1px solid var(--line); border-radius:6px; font-weight:800; font-size:13px; }
.pagination .current { color:#fff; background:var(--blue); border-color:var(--blue); }

.metric-band { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; margin-top:55px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.18); }
.metric { padding:25px 22px; background:rgba(255,255,255,.05); }
.metric strong { display:block; color:var(--blue-bright); font-size:32px; line-height:1; }
.metric span { display:block; margin-top:8px; color:rgba(255,255,255,.7); font-size:12px; }

.comparison { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.compare-card { padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.compare-card.featured { color:#fff; background:linear-gradient(145deg, var(--navy), var(--navy-2)); border-color:var(--navy-2); }
.compare-card h3 { margin:0 0 6px; font-size:24px; }
.compare-card p { margin:0 0 22px; color:var(--muted); font-size:14px; }
.compare-card.featured p { color:rgba(255,255,255,.72); }
.compare-card ul { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.compare-card li { position:relative; padding-left:24px; font-size:14px; }
.compare-card li::before { content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:900; }
.compare-card.featured li::before { color:var(--orange); }

.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:process; }
.process-step { position:relative; padding:20px 24px 10px 0; border-top:1px solid rgba(255,255,255,.22); }
.process-step:not(:last-child)::after { content:"→"; position:absolute; right:20px; top:22px; color:var(--orange); font-size:22px; }
.process-step::before { counter-increment:process; content:"0" counter(process); color:var(--blue-bright); font-weight:900; letter-spacing:.1em; }
.process-step h3 { margin:12px 0 4px; font-size:17px; }
.process-step p { margin:0; color:rgba(255,255,255,.65); font-size:13px; }

.proof-grid { display:grid; grid-template-columns:1.4fr .8fr .8fr; grid-auto-rows:220px; gap:14px; }
.proof-item { position:relative; overflow:hidden; border-radius:14px; background:var(--navy); }
.proof-item:first-child { grid-row:span 2; }
.proof-item img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.proof-item:hover img { transform:scale(1.06); }
.proof-item::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%, rgba(7,26,46,.78)); }
.proof-item span { position:absolute; z-index:1; left:18px; bottom:16px; color:#fff; font-size:13px; font-weight:800; }

.cta-panel { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:35px; padding:56px; color:#fff; border-radius:var(--radius); background:linear-gradient(120deg, var(--blue), var(--navy)); box-shadow:var(--shadow); }
.cta-panel h2 { margin:0; font-size:clamp(30px,4vw,47px); line-height:1.05; }
.cta-panel p { margin:15px 0 0; color:rgba(255,255,255,.75); }
.cta-panel .hero-actions { justify-content:flex-end; margin-top:0; }
.video-feature { display:grid; grid-template-columns:1.25fr .75fr; gap:34px; padding:20px; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); background:rgba(255,255,255,.06); }
.video-feature video { width:100%; max-height:500px; border-radius:12px; background:#000; object-fit:cover; }
.video-copy { align-self:center; padding:20px; }
.video-copy h3 { margin:15px 0 10px; color:#fff; font-size:clamp(26px,3vw,40px); line-height:1.05; }
.video-copy p { color:rgba(255,255,255,.72); }

.page-hero { padding:100px 0 85px; color:#fff; background:linear-gradient(120deg, var(--navy), var(--navy-2)); }
.page-hero h1 { max-width:760px; margin:15px 0 0; font-size:clamp(42px,6vw,70px); line-height:1; letter-spacing:-.06em; }
.page-hero p { max-width:620px; margin:18px 0 0; color:rgba(255,255,255,.72); font-size:17px; }
.content-wrap { max-width: 850px; margin:0 auto; }
.content-wrap h2 { margin-top:45px; font-size:32px; }
.content-wrap h3 { margin-top:30px; font-size:22px; }
.content-wrap p, .content-wrap li { color:#465b6c; }
.content-wrap ul { padding-left:21px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 6px 24px rgba(7,26,46,.04); }
.spec-table { width:100%; min-width:680px; border-collapse:collapse; text-align:left; }
.spec-table th { padding:17px 20px; color:#fff; background:var(--navy); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.spec-table td { padding:18px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; vertical-align:top; }
.spec-table td:first-child { color:var(--ink); font-weight:800; }
.clean-list { display:grid; gap:12px; padding:0; margin:25px 0 0; list-style:none; }
.clean-list li { position:relative; padding:12px 15px 12px 35px; border-bottom:1px solid var(--line); color:var(--muted); }
.clean-list li::before { content:"✓"; position:absolute; left:5px; color:var(--blue); font-weight:900; }
.article-layout { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:60px; align-items:start; }
.article-main { max-width:800px; }
.article-hero-image { width:100%; max-height:520px; object-fit:cover; border-radius:var(--radius); margin-bottom:35px; box-shadow:var(--shadow); }
.article-main h2 { margin-top:38px; font-size:32px; line-height:1.15; }
.article-main h3 { margin-top:28px; font-size:23px; }
.article-main p, .article-main li { color:#465b6c; }
.article-main ul { padding-left:22px; }
.article-sidebar { display:grid; gap:18px; position:sticky; top:110px; }
.sidebar-card { padding:23px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.sidebar-card h3 { margin:0 0 10px; font-size:20px; line-height:1.18; }
.sidebar-card p { color:var(--muted); font-size:14px; }
.related-link { padding:10px 0; border-top:1px solid var(--line); }
.related-link a { color:var(--ink); font-weight:750; }
.article-cta { margin-top:45px; padding:28px; border-radius:14px; color:#fff; background:linear-gradient(120deg, var(--blue), var(--navy)); }
.article-cta h3 { margin:0; color:#fff; }
.article-cta p { color:rgba(255,255,255,.75); }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; align-items:start; }
.contact-details { display:grid; gap:20px; }
.contact-detail { padding:22px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.contact-detail strong { display:block; color:var(--navy); }
.contact-detail span { display:block; margin-top:5px; color:var(--muted); font-size:14px; }
.contact-form { padding:30px; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field { display:grid; gap:6px; }
.form-field.full { grid-column:1/-1; }
.form-field label { color:var(--navy); font-size:12px; font-weight:800; }
.form-field input, .form-field textarea, .form-field select { width:100%; border:1px solid var(--line); border-radius:7px; padding:12px 13px; color:var(--ink); background:#fbfdff; outline:none; }
.form-field textarea { min-height:130px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(8,127,209,.1); }

.site-footer { color:rgba(255,255,255,.68); background:var(--navy); }
.footer-main { display:grid; grid-template-columns:1.3fr .8fr .8fr 1fr; gap:35px; padding:72px 0 55px; }
.site-footer h3 { margin:0 0 16px; color:#fff; font-size:14px; letter-spacing:.04em; }
.site-footer p { margin:0; font-size:13px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.site-footer a { color:rgba(255,255,255,.68); font-size:13px; }
.site-footer a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); font-size:12px; }

@media (max-width: 1000px) {
  .main-nav { display:none; position:absolute; top:82px; left:0; right:0; padding:20px; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow); }
  .main-nav.is-open { display:block; }
  .main-nav ul { display:grid; gap:0; }
  .main-nav li a { display:block; padding:12px 10px; border-bottom:1px solid #eef3f7; }
  .menu-toggle { display:block; }
  .header-cta { display:none; }
  .split, .contact-grid, .cta-panel { grid-template-columns:1fr; }
  .video-feature { grid-template-columns:1fr; }
  .article-layout { grid-template-columns:1fr; }
  .article-sidebar { position:static; }
  .cta-panel .hero-actions { justify-content:flex-start; }
  .cards { grid-template-columns:1fr 1fr; }
  .footer-main { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  .container { width:min(var(--container), calc(100% - 28px)); }
  .topbar-inner { display:block; text-align:center; }
  .topbar-inner span + span { display:none; }
  .header-inner { min-height:70px; }
  .brand-logo { width:160px; height:52px; }
  .main-nav { top:70px; }
  .hero { min-height:620px; }
  .hero-copy { padding:85px 0; }
  .hero h1 { font-size:47px; }
  .hero p { font-size:16px; }
  .section { padding:72px 0; }
  .section-head { display:block; margin-bottom:28px; }
  .cards, .comparison, .metric-band, .process-grid, .proof-grid { grid-template-columns:1fr; }
  .metric-band { border:0; gap:1px; }
  .metric { text-align:center; }
  .process-step { padding-bottom:25px; }
  .process-step:not(:last-child)::after { content:"↓"; right:auto; left:0; top:auto; bottom:0; }
  .proof-grid { grid-auto-rows:220px; }
  .proof-item:first-child { grid-row:span 1; }
  .cta-panel { padding:32px 24px; }
  .form-grid { grid-template-columns:1fr; }
  .form-field.full { grid-column:auto; }
  .footer-main { grid-template-columns:1fr; padding:55px 0 35px; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block; margin-top:6px; }
}