/* Reset & common */
:root { --primary:#0e6655; --secondary:#16a085; --accent:#e67e22; --bg:#e8f8f5; --text:#0e2f2a; --light:#d1f2eb; --dark:#0a3d2e; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:"Microsoft YaHei","PingFang SC",sans-serif; background:var(--bg); color:var(--text); line-height:1.8; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }
.btn { display:inline-block; padding:10px 28px; border-radius:4px; font-size:14px; border:none; cursor:pointer; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-outline { border:2px solid var(--primary); color:var(--primary); }
.section { padding:60px 0; }
.section-title { font-size:26px; text-align:center; margin-bottom:8px; color:var(--primary); }
.section-sub { text-align:center; color:#888; margin-bottom:35px; font-size:14px; }

header { background:#fff; border-bottom:1px solid #e8e8e8; }
.header-inner { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:0 auto; padding:20px; }
.logo { font-size:26px; font-weight:700; color:var(--primary); font-family:Georgia,serif; }
.logo span { color:var(--accent); }
nav ul { display:flex; gap:25px; }
nav a { color:var(--text); font-size:14px; padding-bottom:3px; border-bottom:2px solid transparent; }
nav a:hover, nav a.active { color:var(--primary); border-bottom-color:var(--accent); }
.hero-feature { max-width:1200px; margin:30px auto; padding:0 20px; position:relative; }
.hero-feature img { width:100%; height:400px; object-fit:cover; border-radius:8px; }
.hero-feature .caption { position:absolute; bottom:30px; left:40px; right:40px; background:rgba(255,255,255,.95); padding:20px; border-radius:8px; }
.hero-feature .caption h1 { font-size:26px; color:var(--primary); font-family:Georgia,serif; margin-bottom:5px; }
.hero-feature .caption p { font-size:14px; color:#666; }
.hero-row { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; max-width:1200px; margin:20px auto; padding:0 20px; }
.hero-row .mini { position:relative; height:150px; border-radius:8px; overflow:hidden; cursor:pointer; }
.hero-row .mini img { width:100%; height:100%; object-fit:cover; }
.hero-row .mini .label { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); color:#fff; padding:8px 12px; font-size:13px; }
.products-section { max-width:1200px; margin:40px auto; padding:0 20px; }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.p-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 15px rgba(0,0,0,.06); }
.p-card img { width:100%; height:180px; object-fit:cover; }
.p-body { padding:20px; }
.p-body h4 { color:var(--primary); font-family:Georgia,serif; font-size:17px; margin-bottom:6px; }
.p-body p { font-size:13px; color:#777; }
.stats { max-width:1200px; margin:30px auto; padding:30px; background:#fff; border-radius:8px; display:grid; grid-template-columns:repeat(4,1fr); text-align:center; border-left:4px solid var(--accent); }
.stats .num { font-size:30px; color:var(--secondary); font-weight:700; }
.features-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:25px; max-width:1200px; margin:0 auto; padding:0 20px; }
.feature-card { background:#fff; padding:25px; border-radius:8px; border-top:3px solid var(--primary); }
.feature-card h4 { color:var(--primary); font-family:Georgia,serif; margin-bottom:8px; }
.feature-card p { font-size:14px; color:#666; }
.cases-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:1200px; margin:0 auto; padding:0 20px; }
.case-card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.case-card img { width:100%; height:180px; object-fit:cover; }
.case-body { padding:18px; }
.article-item { background:#fff; border-radius:8px; margin-bottom:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.article-title { padding:16px 20px; cursor:pointer; color:var(--primary); font-family:Georgia,serif; display:flex; justify-content:space-between; font-size:15px; }
.article-body { max-height:0; overflow:hidden; transition:max-height .3s; padding:0 20px; }
.article-item.open .article-body { max-height:5000px; padding:0 20px 20px; }
.article-body p { font-size:14px; color:#555; margin-bottom:8px; text-indent:2em; }
.article-body img { width:100%; max-height:260px; object-fit:cover; border-radius:6px; margin:8px 0; }


.prod-detail { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; max-width:1200px; margin:0 auto; }
.gallery-main { width:100%; height:380px; object-fit:cover; border-radius:8px; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.gallery-thumbs img { width:100%; height:100px; object-fit:cover; border-radius:6px; cursor:pointer; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; max-width:1200px; margin:0 auto; }
.form input, .form textarea { width:100%; padding:12px; margin-bottom:10px; border:1px solid #ddd; border-radius:6px; font-size:14px; }
footer { background:var(--dark); color:#888; padding:40px 20px 20px; margin-top:40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; margin-bottom:25px; max-width:1200px; margin-left:auto; margin-right:auto; }
.menu-toggle { display:none; }
@media(max-width:768px){
  .products-grid, .cases-grid, .features-grid, .prod-detail, .contact-grid { grid-template-columns:1fr; }
  .hero-row { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }
  nav ul { display:none; }
  .hero-feature img { height:250px; }
}

/* Universal carousel fix */
.slide, .hero-slide, .banner-slide { position:absolute; width:100%; height:100%; opacity:0; transition:opacity .8s; }
.slide.active, .hero-slide.active, .banner-slide.active { opacity:1; }
.slide img, .hero-slide img, .banner-slide img { width:100%; height:100%; object-fit:cover; }
/* Product detail tabs */
.tabs { display:flex; gap:0; border-bottom:2px solid #eee; margin:25px 0; }
.tab-btn { padding:12px 25px; background:none; border:none; font-size:15px; cursor:pointer; color:#888; border-bottom:2px solid transparent; margin-bottom:-2px; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--accent); font-weight:600; }
.tab-panel { display:none; padding:20px 0; }
.tab-panel.active { display:block; }
.param-table { width:100%; border-collapse:collapse; margin:15px 0; }
.param-table td { padding:10px 15px; border:1px solid #e0e0e0; font-size:14px; }
.param-table td:first-child { background:var(--light); font-weight:600; width:30%; }
.feature-list li { padding:10px 0; border-bottom:1px dashed #eee; font-size:14px; }
.feature-list li strong { color:var(--primary); }
.app-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
.app-item { background:var(--light); padding:15px; border-radius:6px; }
.app-item h4 { color:var(--primary); font-size:14px; margin-bottom:5px; }
.app-item p { font-size:13px; color:#666; }
.install-list li { padding:8px 0; font-size:14px; }
.install-list li strong { color:var(--primary); }
/* Large product gallery */
.gallery-large { width:100%; height:450px; object-fit:cover; border-radius:8px; margin:15px 0; }
.gallery-thumbs-large { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:10px 0 25px; }
.gallery-thumbs-large img { width:100%; height:120px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; }
.gallery-thumbs-large img:hover, .gallery-thumbs-large img.active { border-color:var(--accent); }
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
.badge { background:var(--light); color:var(--primary); padding:5px 14px; border-radius:20px; font-size:13px; }

/* Gallery thumbnail active state */
.gallery-thumbs-large img { cursor:pointer; transition:border-color .2s, opacity .2s; opacity:.7; }
.gallery-thumbs-large img:hover { opacity:1; }
.gallery-thumbs-large img.active { opacity:1; border-color:var(--accent) !important; }

/* Stats grid layout fix (color-safe) */
.stats { display:block !important; grid-template-columns:none !important; }
.stats .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); text-align:center; }
.stats .stats-grid > div { text-align:center; }
.stats .stats-grid .num { font-size:34px; font-weight:700; }
.stats .stats-grid .label { font-size:14px; margin-top:5px; }
@media(max-width:768px){ .stats .stats-grid { grid-template-columns:repeat(2,1fr); } }

/* Carousel container fix */
.carousel { position:relative; width:100%; height:400px; overflow:hidden; }
.slide-overlay { position:absolute; bottom:20%; left:10%; color:#fff; z-index:5; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.slide-overlay h1 { font-size:36px; margin:0 0 8px; }
.slide-overlay p { font-size:16px; opacity:.9; }

/* Partner logo grid */
.p-logo { background:#fff; border:1px solid #eee; border-radius:6px; padding:15px; display:flex; align-items:center; justify-content:center; height:80px; transition:box-shadow .2s; }
.p-logo:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); }
.p-logo img { max-width:100%; max-height:50px; object-fit:contain; }
@media(max-width:768px){ .partners-grid { grid-template-columns:repeat(3,1fr) !important; } }

.page-banner {
  background: linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)), url('../images/banner (13).png') center/cover no-repeat;
  padding:60px 20px; text-align:center; position:relative;
}
.page-banner h1 { color:#fff; font-size:30px; text-shadow:0 2px 4px rgba(0,0,0,.8), 0 0 20px rgba(0,0,0,.5); margin:0; }

/* Fix: section container should be block, not flex */
.section .container { display:block !important; }
.p-logo img { opacity:1 !important; height:auto !important; width:auto !important; max-height:50px !important; max-width:100% !important; object-fit:contain !important; }