/* ========== 统一按钮 ========== */
.btn-quote-glow{
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.30),
             0 0 0 2px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.40);
  transition:all .2s ease;
}
.btn-quote-glow:hover{background:#c03c30;}

.btn-red-glow{
  background:var(--color-accent);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.30),
             0 0 0 2px rgba(255,255,255,.12), 0 6px 18px rgba(0,0,0,.40);
  transition:all .2s ease;
}
.btn-red-glow:hover{background:#c03c30;}

.btn-hero-trans{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  animation:trans-breathe 3s ease-in-out infinite;
}
@keyframes trans-breathe{
  0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.25);}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4);}
}

.btn-trans-glow{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.25);
  transition:all .2s ease;
  animation:trans-glow 3s ease-in-out infinite;
}
@keyframes trans-glow{
  0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.25), 0 0 20px 0 rgba(255,255,255,0);}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.4), 0 0 20px 4px rgba(255,255,255,.15);}
}
.btn-trans-glow:hover{
  background:rgba(255,255,255,0.15);
  border-color:rgba(255,255,255,0.4);
  transform:translateY(-2px);
  filter:brightness(1.1);
}

/* ========== 产品卡片 ========== */
.card-industrial{
  display:block;
  border-radius:.5rem;
  padding:1rem;
  color:#fff;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,#1a2a3a,#0e1722);
  box-shadow:0 4px 20px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.1);
  transform:scale(1.05);
  transition:transform .5s, box-shadow .5s;
}
.card-industrial:hover{
  transform:scale(1.03);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
.card-industrial img{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
  transition:transform .5s;
}
.card-industrial:hover img{ transform:scale(1.1); }

/* ========== FAQ 块 ========== */
.faq-industrial{
  border-radius:.5rem;
  padding:1rem;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(145deg,#141d2b,#0c121d);
  box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.05);
  transition:transform .2s, box-shadow .2s;
}
.faq-industrial:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.5);
}

/* ========== View Full Range 按钮 ========== */
/* 橙色工业辉光按钮 – 与你贴出的完全一致 */
.btn-orange-industrial{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:linear-gradient(to right, var(--color-secondary), #e67e22);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  padding:.75rem 1.5rem;
  border-radius:.5rem;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.btn-orange-industrial:hover{
  background:linear-gradient(to right, #e67e22, var(--color-secondary));
  transform:translateY(-2px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25), 0 10px 15px -3px rgba(0,0,0,.1);
}
/* ========== 其余原有组件 ========== */
.wa-float{
  position:fixed;
  bottom:80px;
  right:0px !important; /* 仅改这1处：从20px→0px，紧贴右边缘 */
  z-index:9999;
  background:#25D366;
  color:#fff;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.3);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.1);}
.wa-float img{width:28px;height:28px;}
/* ============== 新增 Zalo 样式（紧随 .wa-float 之后） ============== */
/* Zalo 容器：与 .float-badge 适配，垂直排列 */
.zalo-container {
  position: fixed !important; /* 直接固定定位，跳过外层父元素干扰 */
  bottom: calc(80px + 66px + 15px) !important; /* 核心公式：WA bottom + 间距 → 自身底部贴 WA 上端 */
  right: 0px !important; /* 与 WA 水平对齐，紧贴右侧边缘 */
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background-color:#2c2c2c !important;
  padding:8px !important;
  border-radius:8px !important;
  box-shadow:0 0 10px rgba(0,0,0,0.5) !important;
  /* 修复：删除多余的 width: 100% !important，保留 max-width 限制宽度 */
  max-width:120px !important; /* 限制宽度，不超出屏幕 */
  margin:0 auto !important;
  z-index:9997 !important; /* 与外层 .float-badge 一致，低于 WA */
}

.zalo-tip {
  margin: 0 0 4px 0 !important; /* 优化：添加 !important 防止被覆盖 */
  font-weight: 600 !important;
  font-size: 0.75rem !important; /* text-xs */
  color: #fff !important;
  text-align: center !important; /* 强制文字水平居中，解决靠右遮挡 */
  width: 100% !important; /* 占满容器宽度，确保居中对齐 */
}

.zalo-qr-img {
  border: 2px solid #fff !important; /* 优化：添加 !important 防止被覆盖 */
  width: 6rem !important; /* 96px，与之前一致 */
  height: 6rem !important; /* 96px，与之前一致 */
  border-radius: 0.5rem !important;
  box-shadow: 0 0 0.75rem rgba(0,0,0,0.7) !important;
  margin-bottom: 0.5rem !important;
  cursor: zoom-in !important;
}

.zalo-link-btn {
  text-decoration: none !important; /* 优化：添加 !important 防止被覆盖 */
  font-size: 0.75rem !important; /* text-xs */
  background-color: #0066FF !important; /* Zalo 品牌蓝 */
  color: #fff !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  transition: background-color 0.3s ease !important;
  text-align: center !important; /* 按钮文字居中 */
  width: fit-content !important; /* 宽度适配文字，不拉伸 */
}

.zalo-link-btn:hover {
  background-color: #0055DD !important;
}
/* ============== Zalo 样式结束 ============== */

/* Zalo 移动端适配（可选） */
@media (max-width: 480px) {
  .zalo-qr-img {
    width: 5rem !important; /* 移动端缩小二维码，添加 !important 确保生效 */
    height: 5rem !important;
  }
  .zalo-container {
    padding: 6px !important; /* 移动端缩小内边距，添加 !important 确保生效 */
  }
}
.float-badge{
  position:fixed;
  bottom: 20px !important; 
  right:0px !important; /* 仅改这1处：从20px→0px，紧贴右边缘 */
  z-index:9996;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
}
.grecaptcha-badge{
  position:fixed !important;
  bottom:20px !important;
  right:0px !important; /* 仅改这1处：从20px→0px，紧贴右边缘 */
  width:256px !important;
  height:60px !important;
  background:#fff;
  border-radius:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  z-index:100;
}

.flag-emboss{
  background:linear-gradient(135deg,#fff3 0%,#0002 100%),var(--color-accent);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.flag-emboss::before{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 30 20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='30' height='20' fill='%23DE2910'/%3E%3Cpath d='M5 3l.6 1.8h2l-1.5 1.2.6 1.8L5 7.6l-1.7 1.2.6-1.8-1.5-1.2h2L5 3z' fill='%23FFDE00'/%3E%3Cpath d='M9 5l.4 1.2h1.3l-1 .8.4 1.2-1-.8-1 .8.4-1.2-1-.8h1.3L9 5z' fill='%23FFDE00'/%3E%3Cpath d='M6 8l.3 .9h.9l-.7 .5.3 .9-.7-.5-.7 .5.3-.9-.7-.5h.9L6 8z' fill='%23FFDE00'/%3E%3Cpath d='M8 10l.4 1.2h1.3l-1 .8.4 1.2-1-.8-1 .8.4-1.2-1-.8h1.3L8 10z' fill='%23FFDE00'/%3E%3C/svg%3E") 50% / cover no-repeat;
  opacity:.15;
  mix-blend-mode:overlay;
  z-index:-1;
  pointer-events:none;
}
/* 弹窗容器：Toast定位基准（新增，必须保留） */
.modal-container {
    position: relative;
}

/* Toast 提交结果提示（保留当前版，去掉边框/过渡） */
.toast{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  padding:10px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:opacity .3s, top .3s;
}
.toast.success{background:#22c55e;}
.toast.error{background:var(--color-accent);} /* 红色和提交按钮一致 */
.flex {
    display: flex !important;
}
.img-showcase{
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, #1a2a3a, #0e1722);
  box-shadow: 0 4px 20px rgba(0,0,0,.3),
              inset 0 1px 1px rgba(255,255,255,.1);
  transition: transform .4s, box-shadow .4s;
}
.img-showcase:hover{
  transform: scale(1.03);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}

.img-caption-bar{
  margin-top: .75rem;
  padding: .5rem .75rem;
  border-radius: .375rem;
  background: rgba(30,41,59,.5);
  border: 1px solid rgba(71,85,105,.5);
  transition: background .3s;
}
.group:hover .img-caption-bar{
  background: rgba(51,65,85,1);
}
/* 左右同高锁宽 – 与 CRT 终端同高 */
.img-showcase{
  width:100%; 
  height:320px;               /* ← 与 crt-v2 同高 */
  object-fit:cover;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(145deg,#1a2a2a,#0e1722);
  box-shadow:0 4px 20px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.1);
  transition:transform .4s,box-shadow .4s;
  border-radius:8px;
}
.img-showcase:hover{
  transform:scale(1.03);
  box-shadow:0 8px 30px rgba(0,0,0,.6);
}
/* 660L 产品图：完整显示 + 居中 */
.contain-center{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 完整图，不裁剪 */
  object-position: center;
}
/* ========== 660L 产品图：同高 + 完整显示 ========== */
.img-showcase.contain-center{
  height: 320px;          /* 与 crt-terminal 同高 */
  width: 100%;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 1200px) {
  .img-showcase.contain-center {
    width: 100%;
    height: auto;   /* 自动调整高度保持比例 */
    max-height: 70vh; /* 最大高度为视窗高度的 70% */
  }
}
/* ==========================================================
   WebOS 磁浮冷白卡片 - 独立教学版
   作者：UltraPallet 整理
   用途：圆角 + 玻璃质感 + 冷白背光 + hover 磁浮
   调整：文字默认白色，hover时变色
   ========================================================== */

/* 1. 全局变量：冷白辉光强度随意调 */
:root{
  --webos-glow: rgba(224,232,255,0.45);      /* 主光环 */
  --webos-glow-sub: rgba(224,232,255,0.25); /* 辅光环 */
  --webos-shadow: 0 20px 40px -10px rgba(0,0,0,.5);
}

/* 2. 卡片骨架 – 玻璃 + 圆角 + 阴影 */
.webos-card{
  position: relative;
  border-radius: 1.25rem;          /* 20 px 大圆角 */
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg,
                              rgba(30,41,59,.55),
                              rgba(15,23,42,.75));
  backdrop-filter: blur(12px);     /* 毛玻璃 */
  box-shadow: 0 8px 24px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(0) scale(1);
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1);
  overflow: hidden;                /* 背光条不溢出 */
}

/* 3. 顶部冷白背光条 – 伪元素实现，零 DOM */
.webos-card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg,
                              transparent,
                              var(--webos-glow),
                              transparent);
  opacity: 0;
  transition: opacity .35s;
}

/* 4. hover 磁浮：抬升 + 放大 + 冷白光环 */
.webos-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--webos-shadow),
              0 0 20px 4px var(--webos-glow-sub),
              0 0 40px 12px var(--webos-glow);
}
.webos-card:hover::before{ opacity: 1; }

/* 5. 图片 – 保持原有放大 */
.webos-card img{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.webos-card:hover img{ transform: scale(1.12); }

/* 6. 图标容器 – 冷白辉光 + 悬停放大 */
.webos-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;   /* 64px */
  height: 4rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(224,232,255,.05);
  box-shadow: 0 0 0 2px transparent,
              inset 0 2px 4px rgba(0,0,0,.3);
  transition: all .35s;
}
.webos-card:hover .webos-icon{
  background: rgba(224,232,255,.12);
  box-shadow: 0 0 0 2px var(--webos-glow-sub),
              inset 0 2px 4px rgba(0,0,0,.3);
  transform: scale(1.15);
}
.webos-card:hover .webos-icon svg{ transform: scale(1.2) rotate(6deg); }

/* 7. 标题 – 默认白色，hover 时变对应颜色 + 微放大 */
.webos-title{
  color: #fff;
  transition: color .35s, transform .35s;
}
/* hover 时放大 */
.webos-card:hover .webos-title {
  transform: scale(1.05);
}

/* 8. 描述 – 冷白高亮 */
.webos-desc{
  color: #cbd5e1;
  transition: color .35s;
}
.webos-card:hover .webos-desc{ color: #e0e8ff; }

/* 9. 产品颜色映射：hover 时对应颜色 */
.webos-card.yellow:hover .webos-title{ color: #F3AC00; }
.webos-card.green:hover  .webos-title{ color: #39ff14; }
.webos-card.blue:hover   .webos-title{ color: #0170F1; }
.webos-card.purple:hover .webos-title{ color: #a78bfa; }
.webos-card.grey:hover   .webos-title{ color: #E0E3E7; }
:root {
  --crt-glow-blue: #0170F19A;   /* 0x9A = 154/255 ≈ 0.6 透明度 */
  --crt-glow-sub-blue: #0170F140;/* 0x40 = 64/255 ≈ 0.25 透明度 */

  --crt-glow-green: #39FF149A;
  --crt-glow-sub-green: #39FF1440;

  --crt-glow-yellow: #FDD0199A;
  --crt-glow-sub-yellow: #FDD01940;

  --crt-glow-grey: #E0E3E79A;
  --crt-glow-sub-grey: #E0E3E740;
}
/* CRT发光色覆盖类，用于切换发光颜色 */
.webos-card.crt-blue {
  --webos-glow: var(--crt-glow-blue);
  --webos-glow-sub: var(--crt-glow-sub-blue);
}
.webos-card.crt-green {
  --webos-glow: var(--crt-glow-green);
  --webos-glow-sub: var(--crt-glow-sub-green);
}
.webos-card.crt-yellow {
  --webos-glow: var(--crt-glow-yellow);
  --webos-glow-sub: var(--crt-glow-sub-yellow);
}
.webos-card.crt-grey {
  --webos-glow: var(--crt-glow-grey);
  --webos-glow-sub: var(--crt-glow-sub-grey);
}
:root {
  --crt-glow-blue: #0170F199;
  --crt-glow-sub-blue: #0170F140;
  --crt-glow-green: #39FF1499;
  --crt-glow-sub-green: #39FF1440;
  --crt-glow-yellow: #FDD01999;
  --crt-glow-sub-yellow: #FDD01940;
  --crt-glow-grey: #E0E3E799;
  --crt-glow-sub-grey: #E0E3E740;
}
.webos-card.crt-blue {
  --webos-glow: var(--crt-glow-blue);
  --webos-glow-sub: var(--crt-glow-sub-blue);
}
.webos-card.crt-green {
  --webos-glow: var(--crt-glow-green);
  --webos-glow-sub: var(--crt-glow-sub-green);
}
.webos-card.crt-yellow {
  --webos-glow: var(--crt-glow-yellow);
  --webos-glow-sub: var(--crt-glow-sub-yellow);
}
.webos-card.crt-grey {
  --webos-glow: var(--crt-glow-grey);
  --webos-glow-sub: var(--crt-glow-sub-grey);
}



@media (max-width: 768px) {
  .webos-card {
    border-radius: 0.75rem;          /* 小圆角够用 */
    backdrop-filter: none;           /* 删掉毛玻璃 */
    background: rgba(15,23,42,.75);  /* 单图层纯色 */
    box-shadow: 0 4px 12px rgba(0,0,0,.25); /* 单层阴影 */
    transform: none !important;      /* 禁止悬停放大 */
  }
  .webos-card::before{ display: none; } /* 顶部光条也去掉 */
  .webos-card img{ transition: none; transform: none; }
  .webos-card:hover img{ transform: none; } /* 图片不再放大 */
  .webos-title{ transition: none; } /* 标题不动效 */
}
@media (max-width: 768px) {
  header video        { display: none; }
  header .bg-black/60 { background: url(/static/img/hero-index-mobile.webp) center/cover no-repeat; }
}
/* 320×568 老机器 / SE / 4 / 5 专用 */
@media (max-width: 375px) and (resolution: 1dppx) {
  header.hero {
    height: auto;              /* 由内容撑开 */
    min-height: 100vh;         /* 至少一屏高，避免太短 */
    display: flex;
    flex-direction: column;
    justify-content: center;   /* 垂直居中 */
    background: url(/static/img/hero-index.webp) center/cover no-repeat;
  }
  header.hero video {
    display: none;             /* 彻底关掉视频 */
  }
  /* 文字缩小一点，防止两行变三行 */
  header.hero h1 { font-size: 1.75rem; }
  header.hero p  { font-size: 1rem; }
  header.hero button { padding: .6rem 1.25rem; font-size: .95rem; }
}
/* 1. reCAPTCHA 徽章：在下，紧贴底部 */
.grecaptcha-badge {
  position: fixed !important;
  bottom: 24px !important;
  right: 0px !important; /* 仅改这1处：从12px→0px，紧贴右边缘 */
  z-index: 9999 !important;
}

/* 小屏微调 */
@media (max-width: 480px) {
  .grecaptcha-badge {
    bottom: 16px !important;
  }
}

/* 2. WhatsApp 图标：在上，离底部更远 */
.wa-float {
  position: fixed;
  right: 0px !important; /* 仅改这1处：从12px→0px，紧贴右边缘 */
  bottom: 96px;   /* > 24 px，越高越上 */
  z-index: 9998;
}