:root{
  --bg:#0b1220;
  --panel:#0f1a2d;
  --card:#101e34;
  --text:#e8eefc;
  --muted:#a9b7d3;
  --line:rgba(255,255,255,.10);
  --brand:#4ade80;      /* 绿色点缀 */
  --brand2:#60a5fa;     /* 蓝色点缀 */
  --warn:#fbbf24;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --radius:18px;
  --radius2:24px;
  --max:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(96,165,250,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 0%, rgba(74,222,128,.18), transparent 55%),
    linear-gradient(180deg, #071021 0%, #071021 35%, #050a14 100%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:100%; max-width:var(--max); margin:0 auto; padding:0 18px}
.section{padding:72px 0}
.section.tight{padding:52px 0}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted); font-size:13px;
}

.h1{font-size:44px; line-height:1.12; margin:14px 0 12px}
.h2{font-size:28px; margin:0 0 14px}
.h3{font-size:18px; margin:0 0 10px}
.p{color:var(--muted); line-height:1.75; margin:0}
.small{font-size:13px; color:var(--muted); line-height:1.6}

.hr{height:1px; background:var(--line); margin:26px 0}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:11px 14px; border-radius:14px; border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text); cursor:pointer; user-select:none;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.16)}
.btn.primary{
  background: linear-gradient(135deg, rgba(74,222,128,.95), rgba(96,165,250,.92));
  border-color: transparent;
  color:#061021;
  font-weight:700;
}
.btn.primary:hover{filter:saturate(1.06); transform: translateY(-1px)}
.btn.ghost{background:transparent}
.btn.sm{padding:9px 12px; border-radius:12px; font-size:14px}

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(7,16,33,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.logo{
  width:38px; height:38px; border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(255,255,255,.06)),
              linear-gradient(135deg, rgba(74,222,128,.95), rgba(96,165,250,.92));
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.brand h1{
  font-size:15px; margin:0; line-height:1.1;
}
.brand .sub{font-size:12px; color:var(--muted); margin-top:2px}
.menu{
  display:flex; align-items:center; gap:18px;
}
.menu a{
  font-size:14px; color:var(--muted);
  padding:10px 10px; border-radius:12px;
  transition: background .18s ease, color .18s ease;
}
.menu a:hover{background:rgba(255,255,255,.06); color:var(--text)}
.actions{display:flex; align-items:center; gap:10px}

.burger{display:none}
.mobile-panel{display:none}

.hero{
  padding:54px 0 64px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:stretch;
}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:22px;
  box-shadow: var(--shadow);
}
.kv{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:18px;
}
.kv .tile{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
}
.kv .tile .t{font-size:12px; color:var(--muted)}
.kv .tile .v{font-size:18px; margin-top:6px; font-weight:800}

.list{
  display:grid; gap:10px; margin:16px 0 0; padding:0; list-style:none;
}
.list li{
  display:flex; gap:10px; align-items:flex-start;
  color:var(--muted); line-height:1.65;
}
.dot{
  width:10px; height:10px; border-radius:999px;
  margin-top:7px;
  background: linear-gradient(135deg, rgba(74,222,128,.95), rgba(96,165,250,.92));
  flex:0 0 auto;
}

.grid{
  display:grid; gap:16px;
}
.grid.cols2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.cols3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.cols4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .grid.cols4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.cols3{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.cols2{grid-template-columns: 1fr}
}
@media (max-width: 860px){
  .menu, .actions{display:none}
  .burger{display:inline-flex}
  .mobile-panel{
    display:none;
    padding:10px 0 14px;
  }
  .mobile-panel.open{display:block}
  .mobile-panel a{
    display:block;
    padding:12px 12px;
    border-radius:14px;
    color:var(--muted);
  }
  .mobile-panel a:hover{background:rgba(255,255,255,.06); color:var(--text)}
  .mobile-panel .row{display:flex; gap:10px; padding:8px 12px}
}

.card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius: var(--radius);
  padding:16px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card:hover{transform: translateY(-2px); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.card .meta{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.chip{
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
}
.card .thumb{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  aspect-ratio: 16/10;
}
.card .thumb img{width:100%; height:100%; object-fit:cover}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 980px){ .split{grid-template-columns: 1fr} }

.table-wrap{
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.table-scroll{overflow:auto; max-width:100%}
table{border-collapse:collapse; width:100%; min-width:780px}
caption{
  text-align:left; padding:14px 16px; font-weight:800;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
th,td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.06);
  font-size:13px;
  color:var(--muted);
  white-space:nowrap;
}
th{
  color:var(--text);
  background:rgba(255,255,255,.04);
  font-weight:700;
}
tr:hover td{background:rgba(255,255,255,.03); color:var(--text)}
td:last-child, th:last-child{border-right:none}
tfoot td{border-top:1px solid var(--line); font-size:12px}

.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .gallery{grid-template-columns: repeat(2, minmax(0,1fr))} }
@media (max-width: 520px){ .gallery{grid-template-columns: 1fr} }
.gimg{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
  cursor:zoom-in;
}
.gimg img{width:100%; height:240px; object-fit:cover}

.callout{
  border:1px solid rgba(96,165,250,.26);
  background: linear-gradient(180deg, rgba(96,165,250,.10), rgba(255,255,255,.03));
  border-radius: var(--radius);
  padding:14px 14px;
}
.callout b{color:var(--text)}
.callout .small{margin-top:6px}

.footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  color:var(--muted);
  background:rgba(5,10,20,.55);
}
.footer .row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
}
@media (max-width: 860px){ .footer .row{flex-direction:column} }

.backtop{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:60;
  display:none;
}
.backtop.show{display:inline-flex}

.modal{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.62);
  padding:18px;
}
.modal.open{display:flex}
.modal .box{
  max-width: 980px; width:100%;
  border:1px solid var(--line);
  border-radius: 18px;
  background:rgba(7,16,33,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal .head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px;
  border-bottom:1px solid var(--line);
}
.modal .body{padding:12px}
.modal .body img{width:100%; max-height:74vh; object-fit:contain}

/* ===== Download Form (append) ===== */
.form { margin-top: 10px; }
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.form-span2{ grid-column: span 2; }
@media (max-width: 980px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-span2{ grid-column: span 1; }
}
.form-field label{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin: 0 0 6px;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.form-field textarea{ resize: vertical; min-height: 110px; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color: rgba(169,183,211,.75); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: rgba(96,165,250,.55);
  box-shadow: 0 0 0 3px rgba(96,165,250,.12);
}

.form-msg{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  line-height: 1.6;
}
.form-msg.ok{
  border-color: rgba(74,222,128,.32);
  background: rgba(74,222,128,.08);
  color: var(--text);
}
.form-msg.err{
  border-color: rgba(251,191,36,.35);
  background: rgba(251,191,36,.10);
  color: var(--text);
}
.form-msg.info{
  border-color: rgba(96,165,250,.30);
  background: rgba(96,165,250,.10);
  color: var(--text);
}

/* honeypot hidden */
.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
/* 多语言切换按钮样式 */
.lang-btn {
  padding: 7px 10px !important;
  font-size: 13px !important;
}
.lang-btn.primary {
  color: #061021 !important;
}
/* 适配移动端：隐藏语言切换按钮（移动端用原有导航） */
@media (max-width: 860px) {
  .lang-switch {
    display: none !important;
  }
}
/* 语言切换下拉框样式统一 */
.lang-select {
  border: 1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  font-family: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23a9b7d3'%3E%3Cpath d='M10.8 1.2L6 6 1.2 1.2 0 2.4l6 6 6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px !important;
}
.lang-select:hover {
  background-color: rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.16);
}
/* 导航栏核心布局适配 - 解决中英文切换换行 */
.topbar .container .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap !important; /* 强制禁止整体折行 */
}

/* 品牌区：固定基础宽度，不挤压导航 */
.topbar .container .nav .brand {
  flex: 0 0 auto; /* 不拉伸、不收缩，保持自身宽度 */
  white-space: nowrap; /* 禁止品牌子文本折行 */
}

/* 导航菜单：占据剩余所有横向空间，核心自适应 */
.topbar .container .nav .menu {
  flex: 1 1 auto; /* 可拉伸、可收缩，占据剩余空间 */
  display: flex;
  align-items: center;
  gap: 8px; /* 替换margin，更均匀的间距，节省空间 */
  white-space: nowrap; /* 禁止菜单整体折行 */
  overflow: hidden; /* 极端窄屏防溢出（一般不会触发） */
}

/* 导航菜单项：微调内边距，释放横向空间 */
.topbar .container .nav .menu a {
  padding: 12px 10px !important; /* 原有左右内边距调小，减少空间占用 */
  margin: 0 !important; /* 取消原有margin，用gap替代 */
  white-space: nowrap; /* 禁止单个导航项内部折行 */
}

/* 操作按钮区：固定宽度，不挤压导航菜单 */
.topbar .container .nav .actions {
  flex: 0 0 auto; /* 不拉伸、不收缩，保持自身宽度 */
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap; /* 禁止语言选择器/按钮折行 */
}

/* 适配小屏PC：当屏幕宽度不足时，提前显示汉堡菜单，隐藏原生导航 */
/* 可根据你的设计调整临界宽度（当前为1024px，与主流响应式适配一致） */
@media (max-width: 1024px) {
  .topbar .container .nav .menu,
  .topbar .container .nav .actions {
    display: none !important;
  }
  .topbar .container .nav .burger {
    display: flex !important;
  }
}

/* 保证语言选择器按钮与其他按钮样式统一，无额外间距 */
.topbar .container .nav .actions .lang-select {
  margin: 0 !important;
  padding: 7px 10px !important;
  box-sizing: border-box;
}
/* ====== 语言切换器改良 (追加到 styles.css 末尾) ====== */

/* 1. 容器：相对定位，用于重叠图标和下拉框 */
.lang-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  transition: background .2s;
  cursor: pointer;
}
.lang-wrapper:hover {
  background: rgba(255,255,255,.1);
}

/* 2. 地球仪图标 */
.lang-icon {
  width: 20px;
  height: 20px;
  fill: var(--muted); /* 默认灰色 */
  pointer-events: none; /* 让点击穿透到 select */
}
.lang-wrapper:hover .lang-icon {
  fill: var(--text); /* 悬停变亮 */
}

/* 3. 下拉选框：完全透明，覆盖在图标上方 */
.lang-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 隐藏外观，但保留点击功能 */
  cursor: pointer;
  -webkit-appearance: none; /* 移除原生样式 */
  appearance: none;
}

/* 4. 【关键】解决下拉选项看不清的问题 */
/* 强制指定下拉菜单弹出层的背景色和文字颜色 */
.lang-select option {
  background-color: var(--card) !important; /* 深蓝色背景 */
  color: var(--text) !important;            /* 白色文字 */
  padding: 10px;
}

/* 5. 移动端适配 */
/* 在移动端面板中，我们显示一个显眼的语言栏 */
.mobile-lang-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.mobile-lang-label {
  font-size: 14px;
  color: var(--muted);
  flex: 1;
}
/* 移动端复用 wrapper，但样式微调 */
.mobile-lang-bar .lang-wrapper {
  width: auto;
  height: auto;
  border-radius: 14px;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
}
.mobile-lang-bar .lang-icon {
  margin-right: 8px;
}
.mobile-lang-bar .lang-current-text {
  font-size: 13px;
  color: var(--text);
  margin-right: 4px;
}
/* ====== 优化下载表单的下拉框 (追加到 styles.css 末尾) ====== */

/* 1. 针对表单内的 select 进行美化 */
.form-field select {
  /* 移除浏览器默认外观（丑陋的系统箭头） */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* 添加自定义箭头（与语言切换器保持一致的灰色箭头） */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23a9b7d3'%3E%3Cpath d='M10.8 1.2L6 6 1.2 1.2 0 2.4l6 6 6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* 箭头定位在右侧 14px 处 */
  background-position: right 14px center;
  /* 给右侧留出空间，防止文字遮挡箭头 */
  padding-right: 34px !important;
  
  /* 鼠标手势 */
  cursor: pointer;
}

/* 2. 【核心修复】解决点击后选项看不清的问题 */
.form-field select option {
  background-color: var(--card); /* 使用深蓝色背景 (#101e34) */
  color: var(--text);            /* 使用亮白色文字 (#e8eefc) */
  padding: 10px;                 /* 增加选项间距，更易点击 */
}

/* 3. 悬停效果：让输入框稍微变亮，反馈更强 */
.form-field select:hover {
  background-color: rgba(255,255,255,.08); /* 背景微亮 */
  border-color: rgba(255,255,255,.2);      /* 边框微亮 */
}
/* ====== 导航栏国际化适配优化 (追加到 styles.css 末尾) ====== */

/* 1. 收紧导航菜单的间距 */
.topbar .container .nav .menu {
  gap: 8px !important; /* 原来可能是 18px，现在改小 */
}

/* 2. 减小导航链接的内边距和字号 */
.topbar .container .nav .menu a {
  padding: 8px 8px !important; /* 左右内边距改小 */
  font-size: 13px !important;  /* 字号稍微改小一点点 (原14px) */
  letter-spacing: -0.2px;      /* 稍微收紧字间距 */
}

/* 3. 针对右侧操作区 (Actions) 的优化 */
.topbar .container .nav .actions {
  gap: 6px !important; /* 按钮之间靠得更近 */
}

/* 4. 幽灵按钮 (View Products) 文字太长时隐藏，只保留主要按钮 (Get Quote) */
/* 当屏幕宽度小于 1180px 时，隐藏那个次要的“查看产品”按钮，腾出大量空间 */
@media (max-width: 1180px) {
  .actions .btn.ghost {
    display: none !important;
  }
}
/* ====== 导航栏悬停放大特效 (追加到 styles.css 末尾) ====== */

/* 1. 定义默认状态 */
.topbar .container .nav .menu a {
  /* 默认字号设小一点，确保德语也能放得下 */
  font-size: 15px !important; 
  /* 开启相对定位，为了让 z-index 生效（防止被旁边元素遮挡） */
  position: relative;
  /* 加上 transform 过渡，让变大过程丝滑 */
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, color 0.2s ease !important;
  /* 确保缩放中心在正中间 */
  transform-origin: center center;
  /* 稍微收紧内边距，进一步省空间 */
  padding: 6px 4px !important;
}

/* 2. 定义鼠标悬停 (Hover) 状态 */
.topbar .container .nav .menu a:hover {
  /* 核心：放大 1.50 倍 (即变大 15%) */
  transform: scale(1.25); 
  
  /* 关键：提高层级，确保放大的时候是盖住别人，而不是被别人盖住 */
  z-index: 10;
  
  /* 保持背景色和高亮文字颜色 */
  background: rgba(255,255,255,.12);
  color: #fff;
  
  /* 可选：加一点阴影让它浮起来的感觉更强 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 3. 优化：防止文字模糊 */
.topbar .container .nav .menu a {
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}
/* ====== 导航栏绝对居中优化 (追加到 styles.css 末尾) ====== */

/* 1. 设置定位基准 */
.topbar .container .nav {
  position: relative; /* 让子元素以我为基准定位 */
  justify-content: space-between; /* 保持左右两边的 Logo 和 Actions 贴边 */
}

/* 2. 菜单强制居中 (核心代码) */
.topbar .container .nav .menu {
  position: absolute;       /* 脱离文档流 */
  left: 50%;                /* 移动到容器中线 */
  transform: translateX(-50%); /* 向左回退自身宽度的 50%，实现完美居中 */
  
  /* 确保层级，避免被背景遮挡 */
  z-index: 5;
  width: auto;              /* 宽度自适应内容 */
  justify-content: center;
}

/* 3. 安全策略：防止小屏幕重叠 */
/* 当屏幕宽度小于 1280px 时，取消绝对居中，防止菜单盖住 Logo 或 按钮 */
@media (max-width: 1280px) {
  .topbar .container .nav .menu {
    position: static;        /* 恢复默认流式布局 */
    transform: none;         /* 取消位移 */
    margin: 0 auto;          /* 在剩余空间中尽可能居中 */
  }
  
  /* 当空间实在不够时 (比如 < 1100px)，隐藏菜单 (这也是之前设定好的) */
  @media (max-width: 1100px){
    .topbar .container .nav .menu { display: none !important; }
  }
}