html { scroll-behavior: smooth; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:#1a1a1a;background:#fff}a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header{position:fixed;top:0;left:0;right:0;height:70px;display:flex;align-items:center;background:rgba(0,0,0,0.35);backdrop-filter:saturate(120%) blur(6px);z-index:1000}
header .container {display:flex;align-items:center;width:100%}
.logo{display:flex;align-items:center;font-weight:700;color:#fff;font-size:20px;gap:10px}
.logo img{height:40px;width:auto;margin-right:10px;border-radius:8px}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#0ac;color:#fff;border-radius:6px}
.mobile-toggle{display:none}
.mobile-lang{display:none}
nav{margin-left:40px;display:flex;gap:28px;align-items:center}
nav > a, .nav-item > a{color:#e5e7eb;font-size:16px;padding:8px 10px;border-radius:6px;transition:color .2s, background .2s;display:block}
nav > a:hover, .nav-item > a:hover{color:#fff;background:rgba(255,255,255,0.12)}
nav > a.active, .nav-item > a.active{color:#fff;background:#0ac}

/* Dropdown Styles */
.nav-item {position:relative}
.dropdown-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:#fff;
  min-width:160px;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  border-radius:6px;
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transition:all 0.2s ease;
  pointer-events:none;
}
.nav-item:hover .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
}
.dropdown-menu a {
  display:block;
  color:#333 !important;
  padding:8px 16px;
  font-size:14px;
  background:none !important;
  text-align:center;
}
.dropdown-menu a:hover {
  background:#f0f7ff !important;
  color:#0ac !important;
}

/* Scrollspy for Index */
header:not(:has(+main :target)) nav > a[href="#home"],
header:has(+main #home:target) nav > a[href="#home"],
header:has(+main #products:target) .nav-item > a,
header:has(+main #about:target) nav > a[href="#about"]{color:#fff;background:#0ac}

.header-right{margin-left:auto;display:flex;align-items:center;gap:14px;color:#fff}
.header-right .phone{font-weight:600;letter-spacing:.5px}
.lang-switch a{color:#cfe6ff;border:1px solid rgba(255,255,255,.3);padding:6px 10px;border-radius:8px;transition:background .16s ease, transform .16s ease}
.lang-switch a:hover{background:rgba(255,255,255,.15);transform:scale(1.04)}
main{display:block}

footer{background:#0b1117;color:#cfd6dd;padding-top:60px;padding-bottom:30px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr 0.8fr 1.2fr 1.2fr;gap:30px;margin-bottom:40px}
.footer-brand .logo{font-size:22px;margin-bottom:15px}
.footer-brand .tag{color:#7f8c98;font-size:15px;margin-top:10px}
.footer-head{font-size:16px;font-weight:700;color:#fff;margin-bottom:20px;position:relative;padding-bottom:10px}
.footer-head::after{content:'';position:absolute;bottom:0;left:0;width:30px;height:2px;background:#0ac}
.footer-links{list-style:none;padding:0}
.footer-links li{margin-bottom:12px}
.footer-links a{color:#9fb6c8;transition:color .2s}
.footer-links a:hover{color:#0ac;padding-left:5px}
.contact-list{list-style:none;padding:0}
.contact-list li{display:flex;align-items:flex-start;margin-bottom:15px;color:#9fb6c8;font-size:14px;line-height:1.6}
.contact-list li i{color:#0ac;margin-right:12px;margin-top:4px;width:16px;text-align:center}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:25px;text-align:center;color:#5c6b7f;font-size:13px}

@media (max-width:960px){
  header{height:60px;background:rgba(0,0,0,0.85)}
  header .container{justify-content:space-between}
  .logo span{display:none}
  .mobile-lang{display:block;margin-left:auto;margin-right:15px}
  .mobile-toggle{display:block;color:#fff;font-size:24px;cursor:pointer;padding:10px;border:1px solid rgba(255,255,255,0.2);border-radius:4px}
  
  nav{
    position:absolute;
    top:60px;
    left:0;
    right:0;
    background:#0b1117;
    flex-direction:column;
    margin:0;
    padding:20px;
    gap:10px;
    display:none; /* Initially hidden */
    border-top:1px solid rgba(255,255,255,0.1);
    z-index: 9999;
  }
  nav.active{display:flex}
  nav > a, .nav-item > a{display:block;padding:12px;text-align:center;background:rgba(255,255,255,0.05);width:100%}
  .nav-item {width: 100%;}
  
  /* Mobile Dropdown */
  .dropdown-menu {
      position:static;
      transform:none;
      opacity:1;
      visibility:visible;
      box-shadow:none;
      background:rgba(0,0,0,0.2);
      width:100%;
      min-width:auto;
      display:block; /* Always show on mobile for now */
      pointer-events:auto;
      padding: 0;
  }
  .dropdown-menu a {
      color:#cfd6dd !important; 
      border-bottom:1px solid rgba(255,255,255,0.05);
      padding: 10px 12px 10px 30px; /* Indent sub-items */
      text-align: left; /* Align left for hierarchy */
  }
  .dropdown-menu a:hover {background:rgba(255,255,255,0.1) !important;}
  
  .header-right{display:none}
  
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .qr-wrap{justify-content:flex-start}
}