body {
  font-family: "Inter", sans-serif;
  background-color: #0d0f15;
  color: #e5e7eb;
  }

/* Header Glass */
.header-glass {
  background: rgba(15, 18, 28, 0.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 85, 255, 0.25);
  }
  .header-glass .header-logo img{
    height:50px ;
  }
.hero-video {
  width: 100%;
  border: 1px solid rgba(0,85,255,0.35);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,85,255,0.15);
  }
/*HERO*/
/* Tech section wrapper */
.tech-section {
  background: rgba(10, 12, 18, 0.85);
  border: 1px solid rgba(0, 85, 255, 0.35);
  border-radius: 18px;
  padding: 60px 45px;
  margin-bottom: 60px;
  position: relative;
  overflow: hidden;
  }
  .tech-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(0, 85, 255, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 85, 255, 0.08) 1px, transparent 1px);
    background-size: 45px 45px;
    z-index: 1;
    }
  .tech-section::after {
    content: "";
    position: absolute;
    inset: -40px;
    background: radial-gradient(circle at center,
            rgba(0, 85, 255, 0.18),
            transparent 70%);
    z-index: 0;
    }
  .tech-section > * {
    position: relative;
    z-index: 5;
    }

.tech-card {
    background: #11131a;
    border: 1px solid rgba(0,85,255,0.25);
    transition: all .3s ease;
}

.tech-card:hover {
    border-color: rgba(0,120,255,0.6);
    transform: translateY(-4px);
}

.tech-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    color: #4da3ff;
    text-decoration: none;
    transition: all .3s ease;
}

.tech-link:hover {
    color: #7ab8ff;
    letter-spacing: 1px;
}

/* Section Title */
.section-title {
  font-size: 32px;
  font-weight: 700;
  border-left: 4px solid #4ea3ff;
  padding-left: 14px;
  margin-bottom: 30px;
  }

/* Icon Glow */
.icon-glow {
  position: relative;
  font-size:5.6rem;
  color: #4ea3ff;
  }
  .icon-glow::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    background: radial-gradient(circle,
            rgba(0, 85, 255, 0.35),
            transparent);
    border-radius: 50%;
    filter: blur(6px);
    z-index: -1;
    } 
/* Hero gradient text */
.text-gradient {
  background:#fff;
  /*background: linear-gradient(to right, #ffffff, #4ea3ff, #4169e1);*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
#newsTabs .nav-link {
  background: #11131a;
  color: #aaa;
  border: 1px solid rgba(0,85,255,0.25);
  }
  #newsTabs .nav-link.active {
    color: #fff;
    border-color: #0d6efd;
    box-shadow: 0 0 10px rgba(0,85,255,0.4);
    }
    
.news-link:hover {
  color: #4ea3ff !important;
  text-shadow: 0 0 8px rgba(78,163,255,0.6);
  }

.list-group-item {
  transition: all 0.25s ease;
  }
  .list-group-item:hover {
    background: rgba(0, 85, 255, 0.05);
    border-color: rgba(0,85,255,0.45) !important;
    transform: translateY(-2px);
    }

/*feature*/
.feature-card {
  background: rgba(20,22,30,0.85);
  border: 1px solid rgba(0,85,255,0.25);
  border-radius: 12px;
  padding: 24px;
  height: 100%;
  transition: 0.3s;
  }
  .feature-card:hover {
    border-color: rgba(0,85,255,0.5);
    box-shadow: 0 0 25px rgba(0,85,255,0.15);
    transform: translateY(-4px);
    }
.section-title2 {
  color: #4ea3ff;
  margin-bottom: 30px;
  font-weight: 600;
  }


.step-number {
  width: 52px;
  height: 52px;
  margin: auto;
  background: rgba(0,85,255,0.15);
  border: 1px solid rgba(0,85,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  color: #4ea3ff;
}
.secure-result {
  border-top: 1px solid rgba(0,85,255,0.2);
  padding-top: 30px;
}

/* 流程容器 */
.zt-flow {
  position: relative;
  margin-left: 30px;
  padding-left: 30px;
  border-left: 2px solid rgba(0,85,255,0.15);
  }
  /* 發光流動線條動畫 */
  .zt-flow::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #4ea3ff, transparent);
    animation: flowLine 3s linear infinite;
    }
  @keyframes flowLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
    }

/* 單一步驟 */
.zt-step {
  display: flex;
  gap: 15px;
  margin-bottom: 35px;
  align-items: flex-start;
  }
.zt-steps {
  margin-top: 30px;
  }
.zt-row {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
  }
/* 圖示圓圈 */
.zt-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(0,85,255,0.12);
  border: 1px solid rgba(0,85,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ea3ff;
  font-size: 28px;
  box-shadow: 0 0 15px rgba(0,85,255,0.4);
  z-index: 2;
  }
/* 連接線（圖示 → 文字） */
.zt-line {
  height: 2px;
  width: 60px;
  background: linear-gradient(to right, #4ea3ff, transparent);
  margin: 0 20px;
  animation: glowLine 2.5s ease-in-out infinite alternate;
  }
  @keyframes glowLine {
    from { opacity: 0.3; }
    to { opacity: 1; }
    }
/* 說明卡片 */
.zt-content {
  background: rgba(255,255,255,0.02);
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid rgba(0,85,255,0.2);
  flex: 1;
  transition: all .3s ease;
  }
  .zt-row:hover .zt-content {
    border-color: rgba(0,85,255,0.5);
    box-shadow: 0 0 15px rgba(0,85,255,0.2);
    }
/* 圓形數字 */
.step-number {
  min-width: 50px;
  height: 50px;
  background: rgba(0,85,255,0.15);
  border: 1px solid rgba(0,85,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ea3ff;
  font-weight: 700;
  font-size: 18px;
  }

/* 結果區 */
.secure-result {
  padding: 15px;
  border: 1px solid rgba(0,85,255,0.3);
  border-radius: 10px;
  color: #4ea3ff;
  }


/* ===== Step 5 結果模組 ===== */
.zt-result {
  text-align: center;
  padding: 40px 30px;
  border-radius: 16px;
  border: 1px solid rgba(0,85,255,0.35);
  background:
    linear-gradient(180deg, rgba(0,85,255,0.08), rgba(0,0,0,0.3));
  box-shadow:
    0 0 30px rgba(0,85,255,0.25),
    inset 0 0 40px rgba(0,85,255,0.1);
}

/* 中央盾牌圖示 */
.result-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(0,85,255,0.15);
  border: 2px solid rgba(0,85,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4ea3ff;
  font-size: 40px;
  box-shadow: 0 0 25px rgba(0,85,255,0.6);
}

.svg-arch-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.svg-arch {
  width: 100%;
  height: auto;
}

/* 閘門微呼吸動畫 */
.svg-arch path {
  animation: gatePulse 3s ease-in-out infinite;
}

@keyframes gatePulse {
  0% { stroke-opacity: 0.6; }
  50% { stroke-opacity: 1; }
  100% { stroke-opacity: 0.6; }
}

/* 系統節點 hover */
.svg-arch rect:hover {
  fill: rgba(0,85,255,0.35);
  cursor: default;
}

.svg-arch-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.svg-arch {
  width: 100%;
  height: auto;
}

/* ===== 資料流動畫 ===== */
.data-flow {
  stroke: #4ea3ff;
  stroke-width: 3;
  stroke-dasharray: 8 8;
  animation: dataMove 1.4s linear infinite;
}

@keyframes dataMove {
  to {
    stroke-dashoffset: -32;
  }
}

/* ===== 安全閘門動畫 ===== */
.gate-line {
  fill: none;
  stroke: #4ea3ff;
  stroke-width: 6;
  filter: url(#glow);
  stroke-dasharray: 20 12;
  animation: gateScan 2.8s linear infinite;
}

@keyframes gateScan {
  to {
    stroke-dashoffset: -64;
  }
}

/* ===== 系統方塊 ===== */
.sys-box {
  fill: rgba(0,85,255,0.18);
  stroke: #4ea3ff;
  opacity: 0.4;
  animation: sysBoxOn 4.2s infinite;
  }

/* 系統輪流亮 */
/*.sys-box:nth-of-type(1) { animation: sysPulse 3s infinite; }
.sys-box:nth-of-type(2) { animation: sysPulse 3s infinite 1s; }
.sys-box:nth-of-type(3) { animation: sysPulse 3s infinite 2s; }*/

  @keyframes sysPulse {
    0%,100% { fill-opacity: 0.3; }
    50% { fill-opacity: 0.9; }
  }

.sys-text {
  /*fill: #6bb6ff;
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(78,163,255,0.9),
    0 0 12px rgba(78,163,255,0.6);
  opacity: 0.3; /* 預設暗 */*/
  animation: sysTextOn 4.2s infinite;
  }

/* ERP */
.sys-box:nth-of-type(1),
.sys-text:nth-of-type(1) {
  animation-delay: 1.4s;
}

/* CRM */
.sys-box:nth-of-type(2),
.sys-text:nth-of-type(2) {
  animation-delay: 2.1s;
}

/* 文件中心 */
.sys-box:nth-of-type(3),
.sys-text:nth-of-type(3) {
  animation-delay: 2.8s;
}

@keyframes sysBoxOn {
  0%, 20% {
    opacity: 0.3;
  }
  30%, 60% {
    opacity: 1;
    fill: rgba(0,85,255,0.45);
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes sysTextOn {
  0%, 20% {
    opacity: 0.3;
  }
  30%, 60% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(78,163,255,1),
      0 0 20px rgba(78,163,255,0.8);
  }
  100% {
    opacity: 0.3;
  }
}


/* 系統標籤 */
.result-systems {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.sys-badge {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(0,85,255,0.35);
  color: #cfe5ff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 架構圖科技框 */
.arch-diagram {
  padding: 20px;
  border: 1px solid rgba(0,85,255,0.25);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0,85,255,0.15);
  }

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
  }
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
    }


/* ===== AI 洩密溯源模組 ===== */

.doc-mockup {
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  background: #111;
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(0,85,255,0.3);
  box-shadow: 0 0 40px rgba(0,85,255,0.25);
}
/* 文件模擬 */
.doc-mock {
  position: relative;
  background: #fff;
  border-radius: 12px;
  height: 320px;
  padding: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}

.doc-content {
  /*background: #fff;
  border-radius: 10px;
  padding: 20px;
  color: #111;
  text-align: left;*/
  position: relative;
  z-index: 2;
}

/* 浮水印 */
.doc-watermark {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  font-size: 20px;
  font-weight: 700;
  color: rgba(78,163,255,0.35);
  pointer-events: none;
  user-select: none;
}

/* 右側功能列表 */
.ai-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-feature-list li {
  display: flex;
  gap: 15px;
  margin-bottom: 24px;
}

.ai-feature-list i {
  font-size: 28px;
  color: #4ea3ff;
  flex-shrink: 0;
  margin-top: 4px;
}

.ai-feature-list h6 {
  margin-bottom: 4px;
}

.ai-feature-list p {
  margin-bottom: 0;
  color: #9aa4b2;
}

.phone-box {
  background: #0b1220;
  border-radius: 18px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0,160,255,.25);
}

/* 手機畫面 */
.phone-screen {
  background: #fff;
  border-radius: 14px;
  height: 280px;
  position: relative;
  overflow: hidden;
}

/* === 浮水印慢速流動 === */
.watermark-flow {
  /*position: absolute;
  inset: 0;
  font-size: 22px;
  font-weight: 700;
  color: rgba(80,160,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  animation: watermarkMove 18s linear infinite;
  pointer-events: none;*/
  position: absolute;
  inset: -40%;
  font-size: 22px;
  font-weight: 700;
  color: rgba(0, 123, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-30deg);
  animation: wmMove 20s linear infinite;
  pointer-events: none;
}

@keyframes watermarkMove {
  from { transform: translate(-20%, -20%) rotate(-30deg); }
  to   { transform: translate(20%, 20%) rotate(-30deg); }
}

@keyframes wmMove {
  from { transform: translate(-15%, -15%) rotate(-30deg); }
  to   { transform: translate(15%, 15%) rotate(-30deg); }
}

/* === 翻拍示意（浮水印加強） === */
.captured .watermark-strong {
  position: absolute;
  inset: 0;
  font-size: 32px;
  font-weight: 800;
  color: rgba(255,80,80,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-25deg);
  pointer-events: none;
}

/* === 翻拍加強（預設隱藏，可用 JS 控） === */
.watermark-capture {
  position: absolute;
  inset: 0;
  font-size: 34px;
  font-weight: 800;
  color: rgba(255, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-25deg);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(255,0,0,.6);
  transition: opacity .25s;
}
/* JS 觸發用 */
.doc-mock.capture-active .watermark-capture {
  opacity: 1;
}
/* 示意用：hover 模擬翻拍 */
.doc-mock:hover .watermark-capture {
  opacity: 1;
}

/* 資料來源（與 SVG 架構一致） */
.secure-app {
  padding: 20px;
}
/* 說明 */
.trace-list {
  padding-left: 18px;
  color: #6c757d;
}

/* 資料來源標籤 */
.data-origin .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 13px;
}
.data-source {
  background: linear-gradient(135deg, #0d6efd, #00c6ff);
  color: #fff;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
}

/* MDM 鎖機 */
.locked {
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-icon {
  font-size: 48px;
}

/* 說明文字 */
.desc-list {
  margin-top: 12px;
  padding-left: 18px;
  color: #9aa4b2;
}


/* 技術三整體 */
.tech-mcm {
  color: #e6f1ff;
}

/* 卡片共用 */
.mcm-card {
  background: linear-gradient(180deg, #071a2f, #050c18);
  border: 1px solid rgba(80,160,255,.25);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}

/* Header */
.mcm-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.mcm-header i {
  font-size: 26px;
}

.mcm-ok i {
  color: #4cff9b;
}

.mcm-bad i {
  color: #ff5f5f;
}

/* 手機示意 */
.mcm-phone {
  /*height: 220px;
  border-radius: 24px;
  background: radial-gradient(circle at top, #0d2b55, #020814);
  border: 1px solid rgba(100,180,255,.25);
  margin-bottom: 24px;
  position: relative;*/
   height: 260px;
  border-radius: 24px;
  background: radial-gradient(circle at top, #1a1a1a, #050505);
  border: 1px solid rgba(255, 90, 90, .35);
  position: relative;
  overflow: hidden;
}
/* 傳統 MDM 狀態 */
.mcm-phone.locked {
  filter: saturate(.9);
}

/* ISAI 沙盒 */
.app-sandbox {
  position: absolute;
  inset: 24px;
  border: 2px dashed rgba(80,200,255,.5);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5fd4ff;
  font-weight: 600;
}

/* MDM 鎖鏈 */
/* 傳統 MDM 狀態 */
.mcm-phone.locked {
  filter: saturate(.9);
}

/* 斜線警示背景 */
.mcm-phone .chain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 80, 80, .35),
    rgba(255, 80, 80, .35) 14px,
    rgba(0, 0, 0, .25) 14px,
    rgba(0, 0, 0, .25) 28px
  );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 圖片本身（被管控的手機） */
.mcm-phone .chain img {
  max-height: 200px;
  width: auto;
  z-index: 2;
  filter: grayscale(100%) contrast(1.1);
  opacity: .85;
}

/* 可選：微微暗角，增加壓迫感 */
.mcm-phone.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.6));
  pointer-events: none;
}
/* MDM 警示層 */
.mcm-phone.locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 60, 60, .35);
  opacity: 0;
  pointer-events: none;
}
/* 啟動後才閃 */
.mcm-phone.locked.active::before {
  animation: mdmAlert 6s infinite;
}
@keyframes mdmAlert {
  0%, 75%, 100% {
    opacity: 0;
  }
  78% {
    opacity: .45;
  }
  82% {
    opacity: 0;
  }
}
.mcm-phone.locked img {
  filter: grayscale(100%) contrast(1.1);
  opacity: .85;
}


.mcm-visual {
  background: radial-gradient(circle at top, #0b2344, #020814);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(100,160,255,.25);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.mcm-visual img {
  max-height: 200px;
  object-fit: contain;
}

/* ISAI 手機外框 */
.mcm-phone.safe {
  height: 260px;
  border-radius: 24px;
  background: radial-gradient(circle at top, #0b2a44, #041421);
  border: 1px solid rgba(80, 180, 255, .45);
  position: relative;
  overflow: hidden;
}
/* 沙盒背景（取代紅色 chain） */
.mcm-phone.safe .sandbox {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(80, 200, 255, .55);
  border-radius: 18px;
  background:
    linear-gradient(135deg,
      rgba(0, 180, 255, .08),
      rgba(0, 0, 0, .25)
    );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 沙盒內的圖（企業資料集中） */
.mcm-phone.safe .sandbox img {
  max-height: 180px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(0, 200, 255, .65));
}

/* 保護感發光 */
.mcm-phone.safe::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center,
      rgba(0, 200, 255, .25),
      transparent 60%
    );
  pointer-events: none;
}
/* 沙盒內的流動資料層 */
.mcm-phone.safe .sandbox::before {
  content: "";
  position: absolute;
  inset: -40%;
  background:
    repeating-linear-gradient(
      120deg,
      rgba(0, 200, 255, .18) 0px,
      rgba(0, 200, 255, .18) 2px,
      transparent 2px,
      transparent 18px
    );
  animation: sandboxFlow 18s linear infinite;
  opacity: .55;
}
@keyframes sandboxFlow {
  from {
    transform: translateX(-20%) translateY(0);
  }
  to {
    transform: translateX(20%) translateY(0);
  }
}

.mcm-phone.safe .sandbox::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%,
      rgba(0, 220, 255, .25),
      transparent 60%
    );
  animation: sandboxPulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sandboxPulse {
  0%, 100% {
    opacity: .25;
  }
  50% {
    opacity: .6;
  }
}

.mcm-phone.safe .sandbox img {
  position: relative;
  z-index: 3;
  animation: contentFloat 8s ease-in-out infinite;
}
@keyframes contentFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
/* 預設：沙盒動畫暫停 */
.mcm-phone.safe .sandbox::before,
.mcm-phone.safe .sandbox::after,
.mcm-phone.safe .sandbox img {
  animation-play-state: paused;
}
/* 滑到畫面中才開始動 */
.mcm-phone.safe.active .sandbox::before,
.mcm-phone.safe.active .sandbox::after,
.mcm-phone.safe.active .sandbox img {
  animation-play-state: running;
}


/* 清單 */
.mcm-list {
  list-style: none;
  padding: 0;
}

.mcm-list li {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
  color: #cfe6ff;
}

.mcm-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #4fa3ff;
}

.sandbox-icon {
  font-size: 36px;
  color: #5fd4ff;
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(95,212,255,.6);
}

.sandbox-text {
  text-align: center;
  line-height: 1.4;
}

.sandbox-text strong {
  display: block;
  font-size: 15px;
  color: #e6f6ff;
}

.sandbox-text span {
  font-size: 13px;
  color: #8fbfe8;
}

/*.benefit-section {
  padding: 100px 0;
}

.benefit-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 64px;
}

.benefit-header h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 14px;
}

.benefit-header p {
  color: #9fb3d1;
  font-size: 17px;
}

.benefit-list {
  border-top: 1px solid rgba(255,255,255,.08);
}

.benefit-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: center;
}

.benefit-metric {
  font-size: 32px;
  font-weight: 700;
  white-space: nowrap;
}

.benefit-metric strong {
  font-size: 52px;
  margin-left: 4px;
}

.benefit-metric.red   { color: #ff4d4f; }
.benefit-metric.blue  { color: #4da3ff; }
.benefit-metric.green { color: #4dff9f; }
.benefit-metric.navy  { color: #7aa2ff; }

.benefit-desc h4 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 6px;
}

.benefit-desc p {
  color: #9fb3d1;
  line-height: 1.6;
}
*/

.benefit-section {
  padding: 100px 0;
}

.benefit-header {
  text-align: center;
  max-width: 850px;
  margin: 0 auto 64px;
}

.benefit-header h2 {
  font-size: 40px;
  font-weight: 800;
}

.benefit-header p {
  color: #9fb3d1;
  margin-top: 10px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 0 1.75rem;
  }
  /* 手機版 */
  @media (max-width: 768px) {
    .benefit-grid {
      grid-template-columns: 1fr;
    }
  }
  
.benefit-card {
  display: flex;
  gap: 20px;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(10,30,70,.7), rgba(5,15,40,.9));
  border: 1px solid rgba(80,160,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.benefit-icon {
    width: 6rem;
    height: 6rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 3.5rem;
    flex-shrink: 0;
}

.benefit-icon.red   { background: rgba(255,77,79,.15); color:#ff4d4f; }
.benefit-icon.blue  { background: rgba(77,163,255,.15); color:#4da3ff; }
.benefit-icon.green { background: rgba(77,255,159,.15); color:#4dff9f; }
.benefit-icon.navy  { background: rgba(122,162,255,.15); color:#7aa2ff; }

.benefit-metric {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.benefit-metric strong {
  font-size: 36px;
  margin-left: 4px;
}

.benefit-content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.benefit-content p {
  color: #9fb3d1;
  line-height: 1.6;
}
/*多國語系*/
.lang-switch {
  gap: 6px;
  }
  .lang-btn {
    background: transparent;
    border: 1px solid #4ea3ff;
    color: #9ecbff;
    padding: 3px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s ease;
    text-decoration: none;
    }
    .lang-btn:hover {
      background: #4ea3ff;
      color: #fff;
      box-shadow: 0 0 6px rgba(78,163,255,.7);
      }
      .lang-btn.active {
        background: #4ea3ff;
        color: #fff;
        }

 .contact-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  }
  .contact-card .form-control {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    }
    .contact-card .form-control:focus {
      border-color: #4ea3ff;
      box-shadow: none;
      }
      .contact-card label {
        color: #aaa;
        } 


iframe[title="chat widget"]{
  z-index:999999999 !important;
  }
  #tawkchat-container{
    z-index:999999999 !important;
    }