/* ===== CSS Variables ===== */
:root {
    --primary: #E60012;
    --primary-dark: #cc000f;
    --primary-light: #fbe6e7;
    --accent: #E60012;
    --accent-dark: #cc000f;
    --text: #595757;
    --text-secondary: #595757;
    --text-light: #9D9FA2;
    --bg: #ffffff;
    --bg-light: #f7f8fa;
    --bg-dark: #1a1a2e;
    --border: #9D9FA2;
    --shadow: 0 2px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: all 0.3s ease;
    --font: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
    --max-width: 1200px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.7; -webkit-font-smoothing: antialiased; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition: var(--transition); }
.container { max-width: var(--max-width); margin:0 auto; padding:0 20px; }

/* ===== Header ===== */
.header { position:fixed; top:0; left:0; right:0; z-index:1000; transition: var(--transition); }
.header.scrolled { box-shadow: var(--shadow); }
.header-top { background: var(--bg-dark); color:#fff; font-size:13px; padding:6px 0; }
.header-top .container { display:flex; justify-content:space-between; align-items:center; }
.header.scrolled .header-top { display:none; }
.header-main { background:rgba(255,255,255,0.97); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; height:70px; }

.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-logo { display:block; width:124px; height:auto; }
.logo-icon { background:var(--primary); color:#fff; font-weight:900; font-size:18px; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; letter-spacing:-1px; }
.logo-text strong { display:block; font-size:18px; color:var(--text); letter-spacing:1px; }
.logo-text small { font-size:10px; color:var(--text-light); letter-spacing:2px; text-transform:uppercase; }

.nav { display:flex; gap:6px; }
.nav-link { padding:8px 16px; font-size:14px; font-weight:500; color:var(--text-secondary); border-radius:8px; position:relative; }
.nav-link:hover, .nav-link.active { color:var(--primary); background:var(--primary-light); }

.menu-toggle { display:none; background:none; border:none; cursor:pointer; width:30px; height:24px; position:relative; }
.menu-toggle span { display:block; width:100%; height:2px; background:var(--text); border-radius:2px; transition:var(--transition); position:absolute; left:0; }
.menu-toggle span:nth-child(1) { top:0; }
.menu-toggle span:nth-child(2) { top:11px; }
.menu-toggle span:nth-child(3) { top:22px; }
.menu-toggle.active span:nth-child(1) { transform:rotate(45deg); top:11px; }
.menu-toggle.active span:nth-child(2) { opacity:0; }
.menu-toggle.active span:nth-child(3) { transform:rotate(-45deg); top:11px; }

/* ===== Hero ===== */
.hero { position:relative; height:85vh; min-height:500px; margin-top:105px; overflow:hidden; }
.header.scrolled ~ .hero { margin-top:70px; }
.hero-slider { position:relative; height:100%; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.hero-slide.active { opacity:1; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.3)); }
.hero-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; color:#fff; }
.hero-content h1 { font-size:clamp(28px, 5vw, 52px); font-weight:900; margin-bottom:16px; text-shadow:0 2px 20px rgba(0,0,0,0.3); }
.hero-content p { font-size:clamp(14px, 2vw, 20px); opacity:0.9; margin-bottom:32px; max-width:600px; }
.hero-dots { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }
.dot { width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:var(--transition); border:none; }
.dot.active { background:#fff; width:30px; border-radius:6px; }

/* ===== Buttons ===== */
.btn { display:inline-block; padding:14px 36px; border-radius:50px; font-size:15px; font-weight:600; cursor:pointer; transition:var(--transition); border:none; font-family:var(--font); }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 6px 20px rgba(26,107,60,0.35); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-block { width:100%; text-align:center; }

/* ===== Stats Bar ===== */
.stats-bar { background:var(--primary); padding:40px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center; color:#fff; }
.stat-number { font-size:42px; font-weight:900; line-height:1.2; }
.stat-number::after { content:'+'; font-size:24px; }
.stat-label { font-size:14px; opacity:0.85; margin-top:4px; }

/* ===== Section ===== */
.section { padding:80px 0; }
.section:nth-child(even) { background:var(--bg-light); }
.section-header { text-align:center; margin-bottom:50px; }
.section-header h2 { font-size:32px; font-weight:800; color:var(--text); margin-bottom:12px; position:relative; display:inline-block; }
.section-header h2::after { content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); width:50px; height:3px; background:var(--primary); border-radius:3px; }
.section-header p { color:var(--text-secondary); margin-top:20px; max-width:600px; margin-left:auto; margin-right:auto; }

/* ===== Category Tabs ===== */
.category-tabs { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:40px; }
.cat-tab { padding:8px 20px; border-radius:50px; border:1px solid var(--border); background:var(--bg); color:var(--text-secondary); font-size:13px; font-weight:500; cursor:pointer; transition:var(--transition); font-family:var(--font); }
.cat-tab:hover { border-color:var(--primary); color:var(--primary); }
.cat-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }

/* ===== Products Grid ===== */
.products-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px; }
.product-card { background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:var(--transition); cursor:pointer; border:1px solid var(--border); }
.product-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.product-card-img { position:relative; padding-top:75%; overflow:hidden; background:#f8f8f8; }
.product-card-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.product-card:hover .product-card-img img { transform:scale(1.05); }
.product-card-tag { position:absolute; top:12px; left:12px; background:var(--primary); color:#fff; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:600; z-index:2; }
.product-card-body { padding:16px; }
.product-card-body h3 { font-size:15px; font-weight:600; margin-bottom:4px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-card-body .model { font-size:12px; color:var(--text-light); }
.product-card-body .specs { font-size:12px; color:var(--text-secondary); margin-top:6px; }
.products-more { text-align:center; margin-top:40px; }

/* ===== About ===== */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.about-image { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-image img { width:100%; height:400px; object-fit:cover; }
.about-content h3 { font-size:24px; font-weight:700; margin-bottom:16px; color:var(--primary); }
.about-content p { color:var(--text-secondary); margin-bottom:14px; font-size:14px; line-height:1.9; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; }
.feature-item { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--primary-light); border-radius:var(--radius); }
.feature-icon { width:36px; height:36px; flex-shrink:0; color:var(--primary); }
.feature-icon svg { width:100%; height:100%; }
.feature-item span { font-size:14px; font-weight:600; }

/* ===== Factory ===== */
.factory-section { background:var(--bg-light); }
.factory-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.factory-card { border-radius:var(--radius); overflow:hidden; position:relative; box-shadow:var(--shadow); }
.factory-card img { width:100%; height:250px; object-fit:cover; transition:transform 0.5s ease; }
.factory-card:hover img { transform:scale(1.05); }
.factory-card-info { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(0,0,0,0.7)); padding:20px; color:#fff; }
.factory-card-info h4 { font-size:16px; font-weight:600; }

/* ===== Engineering Cases ===== */
.cases-section { background:#fff; }
.cases-layout { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:28px; align-items:start; }
.case-image-frame { aspect-ratio:1 / 1; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); background:#fff; }
.case-image-frame img { width:100%; height:100%; display:block; object-fit:cover; cursor:zoom-in; transition:transform 0.35s ease, opacity 0.2s ease; }
.case-image-frame img:hover { opacity:0.94; transform:scale(1.015); }

/* ===== Honor ===== */
.honor-carousel { position:relative; }
.honor-track { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px 2px 18px; scrollbar-width:none; }
.honor-track::-webkit-scrollbar { display:none; }
.honor-item { flex:0 0 280px; scroll-snap-align:start; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:var(--transition); }
.honor-item:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.honor-item img { width:100%; height:190px; object-fit:contain; display:block; background:#fafafa; padding:12px; cursor:zoom-in; }
.honor-item h4 { font-size:14px; font-weight:700; padding:14px 16px 16px; color:var(--text); min-height:58px; display:flex; align-items:center; }
.honor-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border:0; border-radius:50%; background:var(--primary); color:#fff; font-size:30px; line-height:42px; cursor:pointer; box-shadow:var(--shadow-lg); transition:var(--transition); }
.honor-nav:hover { background:var(--primary-dark); }
.honor-prev { left:-18px; }
.honor-next { right:-18px; }

/* ===== Image Lightbox ===== */
.site-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:30px; background:rgba(0,0,0,0.84); }
.site-lightbox.active { display:flex; }
.site-lightbox img { max-width:96vw; max-height:92vh; object-fit:contain; background:#fff; border-radius:6px; box-shadow:0 20px 70px rgba(0,0,0,0.35); }
.site-lightbox-close { position:absolute; top:18px; right:22px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,0.95); color:#333; font-size:28px; line-height:42px; cursor:pointer; }

/* ===== Contact ===== */
.contact-section { background:var(--bg-light); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:50px; }
.contact-info h3 { font-size:22px; font-weight:700; margin-bottom:4px; }
.contact-info > p { font-size:13px; color:var(--text-light); margin-bottom:30px; }
.contact-items { display:flex; flex-direction:column; gap:24px; }
.contact-item { display:flex; gap:16px; align-items:flex-start; }
.contact-icon { width:44px; height:44px; flex-shrink:0; background:var(--primary-light); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--primary); }
.contact-icon svg { width:22px; height:22px; }
.contact-item strong { display:block; font-size:14px; margin-bottom:2px; }
.contact-item p { font-size:14px; color:var(--text-secondary); }
.contact-form-wrap { background:#fff; border-radius:var(--radius-lg); padding:36px; box-shadow:var(--shadow); }
.contact-form-wrap h3 { font-size:20px; font-weight:700; margin-bottom:24px; }
.contact-form { display:flex; flex-direction:column; gap:14px; }
.form-row { display:flex; gap:14px; }
.form-row input { flex:1; }
.contact-form input, .contact-form textarea { padding:12px 16px; border:1px solid var(--border); border-radius:10px; font-size:14px; font-family:var(--font); transition:var(--transition); background:var(--bg-light); resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }

/* ===== Footer ===== */
.footer { background:var(--bg-dark); color:#fff; padding:60px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-logo .brand-logo { width:150px; background:#fff; border-radius:4px; padding:8px 10px; }
.footer-logo .logo-icon { background:var(--accent); }
.footer-logo .logo-text strong { color:#fff; }
.footer-logo .logo-text small { color:rgba(255,255,255,0.6); }
.footer-col p { font-size:13px; color:rgba(255,255,255,0.65); line-height:1.8; }
.footer-col h4 { font-size:15px; font-weight:600; margin-bottom:16px; position:relative; padding-bottom:10px; }
.footer-col h4::after { content:''; position:absolute; bottom:0; left:0; width:25px; height:2px; background:var(--accent); border-radius:2px; }
.footer-col a { display:block; font-size:13px; color:rgba(255,255,255,0.65); padding:5px 0; transition:var(--transition); }
.footer-col a:hover { color:var(--accent); padding-left:6px; }
.footer-bottom { text-align:center; padding:20px 0; font-size:13px; color:rgba(255,255,255,0.4); }

/* ===== Modal ===== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:2000; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:20px; }
.modal-overlay.active { display:flex; }
.modal { background:#fff; border-radius:var(--radius-lg); max-width:900px; width:100%; max-height:90vh; overflow-y:auto; position:relative; animation:modalIn 0.3s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.modal-close { position:absolute; top:16px; right:16px; background:var(--bg-light); border:none; width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.modal-close:hover { background:var(--primary); color:#fff; }
.modal-body { display:grid; grid-template-columns:1fr 1fr; }
.modal-image { background:#f8f8f8; }
.modal-image img { width:100%; height:100%; min-height:300px; object-fit:contain; padding:20px; }
.modal-info { padding:36px; }
.modal-category { display:inline-block; background:var(--primary-light); color:var(--primary); font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px; margin-bottom:12px; }
.modal-info h2 { font-size:22px; font-weight:700; margin-bottom:8px; }
.modal-info > p { font-size:14px; color:var(--text-light); margin-bottom:16px; }
.modal-specs { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.modal-specs .spec-row { display:flex; justify-content:space-between; padding:8px 12px; background:var(--bg-light); border-radius:8px; font-size:13px; }
.modal-specs .spec-row span:first-child { color:var(--text-secondary); }
.modal-specs .spec-row span:last-child { font-weight:600; }
.modal-desc { font-size:14px; color:var(--text-secondary); line-height:1.8; }

/* ===== Back to Top ===== */
.back-to-top { position:fixed; bottom:30px; right:30px; width:46px; height:46px; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; box-shadow:var(--shadow-lg); transition:var(--transition); opacity:0; visibility:hidden; z-index:999; display:flex; align-items:center; justify-content:center; }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--primary-dark); transform:translateY(-3px); }
.back-to-top svg { width:22px; height:22px; }

/* ===== Animations ===== */
.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .about-grid, .contact-grid { grid-template-columns:1fr; }
    .about-image img { height:300px; }
    .cases-layout { grid-template-columns:1fr; }
    .factory-grid { grid-template-columns:repeat(2, 1fr); }
    .honor-item { flex-basis:260px; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 768px) {
    .header-top { display:none; }
    .hero { margin-top:70px; height:60vh; }
    .nav { display:none; position:fixed; top:70px; left:0; right:0; bottom:0; background:rgba(255,255,255,0.98); flex-direction:column; align-items:center; justify-content:center; gap:8px; backdrop-filter:blur(10px); }
    .nav.active { display:flex; }
    .nav-link { font-size:18px; padding:14px 30px; }
    .menu-toggle { display:block; }
    .stats-grid { grid-template-columns:repeat(2, 1fr); }
    .stat-number { font-size:32px; }
    .section { padding:50px 0; }
    .section-header h2 { font-size:26px; }
    .factory-grid { grid-template-columns:1fr; }
    .honor-item { flex-basis:235px; }
    .honor-nav { width:38px; height:38px; font-size:26px; line-height:38px; }
    .honor-prev { left:4px; }
    .honor-next { right:4px; }
    .modal-body { grid-template-columns:1fr; }
    .form-row { flex-direction:column; }
    .footer-grid { grid-template-columns:1fr; gap:30px; }
    .products-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
    .category-tabs { gap:6px; }
    .cat-tab { padding:6px 14px; font-size:12px; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size:24px; }
    .products-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .product-card-body { padding:10px; }
    .product-card-body h3 { font-size:13px; }
}