.elementor-3970 .elementor-element.elementor-element-51d22a8:not(.elementor-motion-effects-element-type-background), .elementor-3970 .elementor-element.elementor-element-51d22a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #F5F5F5 0%, #F5F5F5 100%);}.elementor-3970 .elementor-element.elementor-element-51d22a8{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3970 .elementor-element.elementor-element-51d22a8 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3970 .elementor-element.elementor-element-79eecd5 .elementor-background-slideshow__slide__image{background-size:cover;}.elementor-3970 .elementor-element.elementor-element-79eecd5{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3970 .elementor-element.elementor-element-79eecd5 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3970 .elementor-element.elementor-element-3072cf7 .elementor-swiper-button.elementor-swiper-button-prev, .elementor-3970 .elementor-element.elementor-element-3072cf7 .elementor-swiper-button.elementor-swiper-button-next{color:#F5F5F5;}.elementor-3970 .elementor-element.elementor-element-3072cf7 .elementor-swiper-button.elementor-swiper-button-prev svg, .elementor-3970 .elementor-element.elementor-element-3072cf7 .elementor-swiper-button.elementor-swiper-button-next svg{fill:#F5F5F5;}.elementor-3970 .elementor-element.elementor-element-2cadffc{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3970 .elementor-element.elementor-element-dd41705{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3970 .elementor-element.elementor-element-4300cac{--spacer-size:50px;}/* Start custom CSS for section, class: .elementor-element-51d22a8 */#logisticsLogos {
    display: none;
    transition: all 0.4s ease;
  }
  #logisticsLogos.show {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
  }/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-c4602ab *//* 字體 */
@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;600;700;800;900&family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');

/* ================================
   HERO：背景 + 動畫容器
================================ */
.hero-section{
  position:relative;
  width:100%;
  padding:120px 40px 140px;
  background:linear-gradient(135deg,#0A4CFF 0%, #002A85 100%);
  overflow:hidden;
  color:#fff;
  font-family:'Pretendard','Noto Sans TC',sans-serif;
}

/* 內容寬度 */
.hero-container{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  z-index:3; /* 蓋過粒子與光暈 */
}

/* ================================
   背景：柔光能量流（漸層光團慢速移動）
================================ */
.bg-glow{
  position:absolute;
  inset:-20% -10% -10% -10%;
  background:
    radial-gradient(800px 800px at 10% 30%, rgba(255,255,255,.15), transparent 60%),
    radial-gradient(700px 700px at 80% 20%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(600px 600px at 50% 90%, rgba(255,255,255,.08), transparent 70%);
  filter: blur(2px);
  animation: glow-move 18s ease-in-out infinite alternate;
  z-index:1;
}
@keyframes glow-move{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-3%,2%,0) scale(1.03); }
}

/* ================================
   背景：粒子（純 CSS，低負載）
================================ */
.bg-particles{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.35) 40%, transparent 41%),
    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.28) 40%, transparent 41%),
    radial-gradient(2px 2px at 55% 40%, rgba(255,255,255,.32) 40%, transparent 41%),
    radial-gradient(2px 2px at 75% 70%, rgba(255,255,255,.30) 40%, transparent 41%),
    radial-gradient(2px 2px at 90% 25%, rgba(255,255,255,.26) 40%, transparent 41%);
  background-repeat:no-repeat;
  animation: particle-float 22s linear infinite;
  opacity:.35;
  z-index:2;
}
@keyframes particle-float{
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}

/* ================================
   標題（強制亮白） + 掃光動畫
================================ */
.hero-title{
  font-size:clamp(42px,4.8vw,72px);
  font-weight:900;
  color:#fff !important;
  letter-spacing:-0.5px;
  margin:0 0 18px 0;
  text-shadow:0 0 14px rgba(255,255,255,0.25);
}

/* 掃光容器（用來限制掃光範圍） */
.title-wrap{
  position:relative;
  display:inline-block;
}

/* 掃光條 */
.title-wrap.sweep::after{
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:-15%;
  width:18%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.48) 45%, rgba(255,255,255,0) 100%);
  filter: blur(2px);
  transform:skewX(-12deg);
  animation: sweep 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%   { transform: translateX(0) skewX(-12deg); opacity:.0; }
  8%   { opacity:.85; }
  18%  { transform: translateX(650px) skewX(-12deg); opacity:.0; }
  100% { transform: translateX(650px) skewX(-12deg); opacity:.0; }
}

/* 副標與說明 */
.hero-sub{
  font-size:clamp(22px,2.5vw,34px);
  font-weight:700;
  color:#E8EEFF !important;
  margin-bottom:26px;
  text-shadow:0 0 10px rgba(255,255,255,0.22);
}

.hero-desc{
  font-size:18px;
  line-height:1.75;
  color:#E6ECFF !important;
  margin-bottom:40px;
}

/* ================================
   三個玻璃資訊卡
================================ */
.hero-features{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-bottom:38px;
}

.hero-box{
  flex:1;
  min-width:260px;
  padding:22px 26px;
  border-radius:18px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.28);
  backdrop-filter:blur(12px);
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
  transition: .25s ease;
}

.hero-box:hover{
  transform: translateY(-4px);
  border-color:#fff;
}

.hero-box .num{
  font-size:26px;
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
}

.hero-box .txt{
  font-size:15px;
  color:#DDE6FF;
}

/* ================================
   CTA 按鈕（無黑線）
================================ */
.hero-actions{
  display:flex;
  gap:18px;
  margin-top:10px;
}

.btn{
  text-decoration:none;
  font-weight:700;
  border-radius:12px;
  padding:14px 32px;
  font-size:16px;
  transition:.25s ease;
}

/* 亮金主按鈕 */
.btn.solid{
  background:linear-gradient(135deg,#FFE495,#FFCE52);
  color:#000;
  box-shadow:0 8px 20px rgba(255,200,80,0.4);
  border:none;
}
.btn.solid:hover{
  background:linear-gradient(135deg,#fff2c5,#fcd46d);
  box-shadow:0 10px 26px rgba(255,200,80,0.5);
}

/* 玻璃次按鈕 */
.btn.ghost{
  background:rgba(255,255,255,0.20);
  color:#fff;
  backdrop-filter:blur(10px);
  border:none !important;
}
.btn.ghost:hover{
  background:rgba(255,255,255,0.32);
}

/* ================================
   RWD
================================ */
@media(max-width:767px){
  .hero-section{ padding:90px 24px 110px; }

  .hero-actions{
    flex-direction:column;
  }
  .btn{ width:100%; text-align:center; }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-4cdcde6 *//* =========================================================
   ✅ 0. 整體背景：深科技藍 + 呼吸光特效
   ========================================================= */
.ba-contrast{
  padding: 80px 24px;
  background: linear-gradient(135deg, #0A3FA4 0%, #0C2C85 60%, #08316B 100%);
  color: #ffffff;
  font-family: 'Noto Sans TC', sans-serif;
  position: relative;
  overflow: hidden;
}

/* 呼吸光 */
.ba-contrast::before{
  content:"";
  position:absolute;
  left:-20%;
  top:-20%;
  width:180%;
  height:180%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 70%);
  animation: breathGlow 8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes breathGlow {
  0%   { transform: scale(1); opacity:.35; }
  50%  { transform: scale(1.25); opacity:.55; }
  100% { transform: scale(1); opacity:.35; }
}

/* =========================================================
   ✅ 1. 區塊進場動畫
   ========================================================= */
.ba-wrap{
  max-width: 1180px;
  margin: 0 auto;
  opacity:0;
  transform: translateY(20px);
  animation: fadeUp .8s ease-out forwards;
}

@keyframes fadeUp {
  to {
    opacity:1;
    transform: translateY(0);
  }
}

/* =========================================================
   ✅ 2. 標題
   ========================================================= */
.ba-head h2{
  font-size: 32px;
  font-weight: 800;
  margin: 0 0 8px;
  color: #ffffff;
}
.ba-head p{
  margin: 0 0 32px;
  color: #d3defc;
}

/* =========================================================
   ✅ 3. Before / After 主體排版
   ========================================================= */
.ba-panels{
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 24px;
  align-items: start;
}

/* 卡片 */
.ba-panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0px 10px 22px rgba(0,0,0,0.25);
  position: relative;
  transition: 0.35s ease;
}

/* 浮動亮邊 hover */
.ba-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px rgba(0,0,0,0.35);
}
.ba-panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.12);
  opacity:0;
  transition:.35s;
}
.ba-panel:hover::after{
  opacity:1;
  box-shadow: 0 0 12px rgba(122,181,255,0.5);
}

/* Before / After 標籤 */
.ba-chip{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.ba-chip-bad{
  background: rgba(255,67,67,0.18);
  color: #ff6b6b;
  border: 1px solid rgba(255,67,67,0.4);
}
.ba-chip-good{
  background: rgba(96,165,250,0.2);
  color: #8ec4ff;
  border: 1px solid rgba(96,165,250,0.45);
}

/* =========================================================
   ✅ 4. 清單項目（逐條淡入動畫）
   ========================================================= */
.ba-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ba-list li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: #eaf0ff;
  font-size: 16px;
  line-height: 1.6;

  opacity:0;
  transform: translateY(6px);
  animation: fadeItem .5s ease forwards;
}
.ba-list li:last-child{
  border-bottom: none;
}

/* 逐條延遲 */
.ba-list li:nth-child(1){ animation-delay: .2s; }
.ba-list li:nth-child(2){ animation-delay: .35s; }
.ba-list li:nth-child(3){ animation-delay: .5s; }
.ba-list li:nth-child(4){ animation-delay: .65s; }
.ba-list li:nth-child(5){ animation-delay: .8s; }

@keyframes fadeItem {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   ✅ 5. 中間箭頭（浮動 + 淡入）
   ========================================================= */
.ba-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8dbbff;
  opacity:0;
  animation: arrowFloat 3.5s ease-in-out infinite,
             fadeIn 1.2s ease forwards 0.6s;
}

.ba-arrow svg{
  width:40px;
  height:40px;
}

@keyframes arrowFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes fadeIn { to { opacity:1; } }

/* =========================================================
   ✅ 6. KPI 區塊（含 0→跑滿 & 流光）
   ========================================================= */
.ba-kpis{
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.kpi{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0px 8px 18px rgba(0,0,0,0.25);
  color: #eaf0ff;
}
.kpi-label{
  font-weight:700;
  margin-bottom:6px;
}

/* 進度條底 */
.kpi-bar{
  position: relative;
  height: 10px;
  background: rgba(255,255,255,0.20);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}

/* ✅ 最重要的：從 0 → 目標 (scaleX動畫) + 流光 */
.kpi-bar span{
  position: absolute; 
  left: 0; top: 0; 
  height: 100%;
  width: var(--w, 70%);

  transform-origin: left;
  transform: scaleX(0);

  border-radius: 999px;
  background: linear-gradient(90deg, #5ba4ff, #1e71ff);
  box-shadow: 0 0 12px rgba(93, 166, 255, .45);

  animation: kpiFill 1.8s cubic-bezier(.22,.86,.37,.99) forwards;
}

/* KPI 流光效果 */
.kpi-bar span::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%,
    rgba(255,255,255,.45) 40%, transparent 70%);
  background-size: 200% 100%;
  mix-blend-mode: screen;
  opacity:.85;
  animation: kpiShimmer 1.2s ease-out .2s forwards;
}

/* 三條 KPI 百分比（可自行更改） */
.kpi:nth-child(1) .kpi-bar span { --w: 78%; animation-delay: .10s; }
.kpi:nth-child(2) .kpi-bar span { --w: 70%; animation-delay: .25s; }
.kpi:nth-child(3) .kpi-bar span { --w: 90%; animation-delay: .40s; }

@keyframes kpiFill {
  to { transform: scaleX(1); }
}
@keyframes kpiShimmer {
  0%   { background-position: -120% 0; opacity:.0; }
  30%  { opacity:.85; }
  100% { background-position: 100% 0; opacity:.0; }
}

.kpi-num{
  font-size:18px;
  font-weight:800;
}

/* =========================================================
   ✅ 7. 手機版 RWD
   ========================================================= */
@media(max-width: 900px){
  .ba-panels{
    grid-template-columns: 1fr;
  }
  .ba-arrow{
    display:none;
  }
}
@media(max-width: 600px){
  .ba-kpis{
    grid-template-columns: 1fr;
  }
}

/* icon 基本形態（預設隱藏） */
.ba-list li::before{
  content:"";
  position:absolute;
  left: 6px;
  top: 50%;
  translate: 0 -50%;
  width: 20px; height: 20px;
  border-radius: 6px;
  display:flex; align-items:center; justify-content:center;
  font-size: 13px; font-weight: 800;
  opacity: 0; transform: translateX(-6px) scale(.85);
  transition: opacity .22s ease, transform .22s ease, 
              background-color .22s ease, color .22s ease;
}

/* ===== 關鍵：自動判斷左右欄位（不管是 div/article/section 都行） ===== */
/* 左欄（第一個子元素）＝ Before → ✕ */
.ba-panels > *:first-child .ba-list li:hover::before{
  content:"✕";
  color:#ef4444;
  background: rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.45);
  opacity:1; transform: translateX(0) scale(1);
}

/* 右欄（最後一個子元素）＝ After → ✓ */
.ba-panels > *:last-child .ba-list li:hover::before{
  content:"✓";
  color:#10b981;
  background: rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.45);
  opacity:1; transform: translateX(0) scale(1);
}

/* —— 兼容一些頁面生成器在中間插入箭頭區塊的情況 —— */
/* 如果你的結構是：panel(1) + arrow + panel(3) */
.ba-panels > *:nth-child(1) .ba-list li:hover::before{ content:"✕"; color:#ef4444;
  background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.45); opacity:1; transform: translateX(0) scale(1); }
.ba-panels > *:nth-last-child(1) .ba-list li:hover::before{ content:"✓"; color:#10b981;
  background: rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.45); opacity:1; transform: translateX(0) scale(1); }
  
  * ✅ 如果 JS 沒載到，也強制讓內容顯示 */
.ba-wrap,
.ba-list li,
.ba-arrow,
.kpi {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7e79502 *//* =========================================================
   ✅ 最終整合版 CSS
   ✅ 流光標題 + 亮色對比
   ✅ 六張卡片正常顯示
   ✅ KPI 條 / 對比條恢復
   ✅ 修正斷行 / 直排 / 裁切
========================================================= */

/* 解除外部樣式干擾（直排、word-break）*/
#sc-differentiators,
#sc-differentiators * {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: break-word !important;
  direction: ltr !important;
  letter-spacing: normal !important;
}

/* ========= 整體背景 ========= */
#sc-differentiators {
  --bg1: #0d1b37;
  --bg2: #1a4bd6;
  --ink: #eaf1ff;
  --muted: #b9c7ff;
  --line: #2a4eea55;
  --radius: 18px;
  --radius-lg: 22px;
  --wrap: min(1140px, 100%);
  --gap: clamp(18px, 2.6vw, 30px);

  background: radial-gradient(900px 500px at 10% -10%, #2c4db455, transparent),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  color: var(--ink);
  overflow: visible !important;
  padding: clamp(60px, 8vw, 110px) 0;
}

/* ========= 版心 ========= */
#sc-differentiators .sc-wrap {
  width: var(--wrap);
  margin: 0 auto;
  padding-left: clamp(18px, 3vw, 40px);
  padding-right: clamp(18px, 3vw, 40px);
  box-sizing: border-box;
}

/* ========= 標題：超亮流光 ========= */
#sc-differentiators .sc-head {
  text-align: center;
  margin-bottom: clamp(30px, 5vw, 50px);
}

#sc-differentiators .sc-head h2 {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 42px);
  margin: 0 0 10px;

  /* 超亮流光漸層 */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #e7edff 20%,
    #7fb4ff 50%,
    #c5d7ff 80%,
    #ffffff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  color: transparent;
  animation: titleShine 5s linear infinite;

  filter: drop-shadow(0 4px 12px rgba(130,170,255,.45));
}

@keyframes titleShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 副標更亮 */
#sc-differentiators .sc-sub {
  color: #dce6ff;
  font-size: clamp(14px, 1.7vw, 17px);
  opacity: .9;
}

/* ========= GRID（六張卡支援） ========= */
#sc-differentiators .sc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 760px) {
  #sc-differentiators .sc-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  #sc-differentiators .sc-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ========= 卡片 ========= */
#sc-differentiators .sc-card {
  background: linear-gradient(180deg, #142c63, #0e1e47);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(20px, 2vw, 26px);
  box-shadow: 0 14px 34px rgba(8,20,80,.25);
  transition: 0.3s ease;
  overflow: visible !important;
}

#sc-differentiators .sc-card:hover {
  transform: translateY(-4px);
  border-color: #5f82ff88;
  box-shadow: 0 20px 40px rgba(20,40,140,.35);
}

/* Icon */
#sc-differentiators .sc-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #eaf0ff;
  background: linear-gradient(135deg, #1f41c7, #2e64ff);
  margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px #7ea0ff55, 0 8px 16px #0a1b6a66;
}

#sc-differentiators .sc-icon svg {
  width: 24px;
  height: 24px;
}

/* 卡片標題 */
#sc-differentiators .sc-card h3 {
  font-size: clamp(17px, 2vw, 20px);
  margin: 8px 0 12px;
  color: #f0f4ff;
  font-weight: 700;
  line-height: 1.45;
}

#sc-differentiators .sc-card h3 .hi {
  background: linear-gradient(90deg,#a9c3ff,#f8fbff);
  -webkit-background-clip:text;
  color:transparent;
  font-weight: 800;
}

/* ========= 清單（防直排）========= */
#sc-differentiators .sc-list {
  padding: 0;
  list-style: none;
  margin-bottom: 18px;
}

#sc-differentiators .sc-list li {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
  margin: 8px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #dbe6ff;
}

#sc-differentiators .sc-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 3px;
  background: linear-gradient(135deg,#7ea0ff,#b6c7ff);
  box-shadow: 0 0 0 2px #2a4eea55;
}

/* ========= 勝川 vs 一般倉儲 條 ========= */
#sc-differentiators .sc-compare {
  border-top: 1px dashed #5a76ff66;
  padding-top: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: #dce5ff;
}

#sc-differentiators .sc-compare .me {
  font-weight: 800;
  color: #ffffff;
}

/* 條底 */
#sc-differentiators .sc-compare .bar {
  height: 10px;
  margin: 8px 0 4px;
  border-radius: 999px;
  background: #1b2d74;
  box-shadow: inset 0 0 0 1px #4b66ff44;
  position: relative;
  overflow: hidden;
}

/* ✅ 勝川填充條 — 你可以在 HTML 上設定：style="--w:80%" */
#sc-differentiators .sc-compare .bar i {
  display: block;
  height: 100%;
  width: var(--w, 80%);
  background: linear-gradient(90deg,#8fb1ff,#e7efff);
}

/* 滑動亮光 */
#sc-differentiators .sc-compare .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: barShine 3s linear infinite;
}

@keyframes barShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========= KPI 區 ========= */
#sc-differentiators .sc-kpis {
  margin-top: clamp(30px, 5vw, 50px);
  border-top: 1px solid #5065d855;
  padding-top: clamp(20px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}

#sc-differentiators .kpi {
  min-width: 160px;
  padding: 16px 22px;
  background: linear-gradient(180deg,#17307a,#132a66);
  border-radius: var(--radius-lg);
  border: 1px solid #3e60ff55;
  text-align: center;
  box-shadow: 0 12px 26px rgba(0,14,46,.35);
}

#sc-differentiators .kpi strong {
  font-size: 24px;
  color: #fff;
  font-weight: 800;
}

#sc-differentiators .kpi span {
  margin-top: 6px;
  font-size: 13px;
  color: #d8e2ff;
}

/* CTA */
#sc-differentiators .sc-cta{
  display:inline-flex;
  justify-content:center;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration:none;
  background: linear-gradient(90deg,#345bff,#5f82ff);
  font-weight:700;
  color:#fff;
  margin-top:10px;
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-9c3dabf *//* === 把被插進來的 <br> 直接關掉（最關鍵）=== */
#sc-differentiators .sc-list br { display: none !important; }

/* === 徹底重設清單排版：不用 flex/grid，改用絕對定位小方塊 === */
#sc-differentiators .sc-list{
  list-style: none; margin: 0 0 16px; padding: 0;
}
#sc-differentiators .sc-list li{
  position: relative;
  padding-left: 22px;                /* 給左側子彈空間 */
  margin: 10px 0;
  line-height: 1.8;
  font-size: 15px;
  color: #dbe6ff;

  /* 禁止任何齊行與奇怪字距 */
  text-align: left !important;
  text-justify: auto !important;
  letter-spacing: .02em !important;
  word-spacing: normal !important;

  /* 正常換行，不要逐字直排 */
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere;
  line-break: auto;
  hyphens: none;
  max-width: 100% !important;
}

/* 左側小方塊 */
#sc-differentiators .sc-list li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.9em; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 3px;
  background: linear-gradient(135deg,#7ea0ff,#b6c7ff);
  box-shadow: 0 0 0 2px #2a4eea55;
}

/* 有些 theme 會把 li 內元素改成 block/grid，這裡一併復原成 inline */
#sc-differentiators .sc-list li *{
  display: inline !important;
  max-width: none !important;
}

/* 進一步保險：卡片內的段落、標題一律靠左，不要 justify */
#sc-differentiators .sc-card p,
#sc-differentiators .sc-card h3,
#sc-differentiators .sc-card ul{
  text-align: left !important;
}

/* ✅ 讓整段區塊永遠固定兩欄 */
#sc-differentiators .sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr !important; /* 永遠兩欄 */
  gap: var(--gap);
}

/* ✅ 手機仍然要一欄 */
@media (max-width: 760px) {
  #sc-differentiators .sc-grid {
    grid-template-columns: 1fr !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22d3e26 *//* ====== 主要配色變數（可改） ====== */
.svc-flow {
  --brand: #2E5BFF;
  --brand-dark: #143CBE;
  --text: #0b132a;
  --muted: #5b6a8a;
  --card: #fff;
  --shadow: 0 12px 26px rgba(16, 24, 40, 0.12);
}

/* ====== 區塊 ====== */
.svc-flow {
  padding: 20px 10px 10px;
}

.svc-flow .flow-head {
  max-width: 1180px;
  margin: 0 auto 20px;
}

.svc-flow h3 {
  margin: 0;
  font-size: 32px;
  color: var(--text);
  font-weight: 900;
}

.svc-flow .flow-head p {
  margin: 4px 0 0;
  color: var(--muted);
}

/* ====== 流程排列 ====== */
.flow-steps {
  max-width: 1180px;
  margin: auto;
  padding: 10px 0;
  list-style: none;
  display: flex;
  gap: 22px;
  position: relative;
}

/* 下方橫線 */
.flow-steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  height: 4px;
  background: rgba(46, 91, 255, 0.12);
  border-radius: 4px;
}

/* ====== 卡片 ====== */
.flow-step {
  min-width: 200px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 16px;
  position: relative;
  transition: 0.25s ease;
  border: 1px solid rgba(0,0,0,0.06);
}

/* 箭頭 */
.flow-step::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -16px;
  width: 28px;
  height: 12px;
  background: url('data:image/svg+xml;utf8,<svg width="28" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M0 6h26M20 1l6 5-6 5" stroke="%232E5BFF" stroke-width="2" fill="none"/></svg>') center/contain no-repeat;
  opacity: .6;
}

.flow-step:last-child::after { display: none; }

/* hover 提升 */
.flow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(46, 91, 255, 0.16);
}

/* index */
.step-index {
  position: absolute;
  top: -10px;
  left: -10px;
  background: #EEF2FF;
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(46, 91, 255, 0.25);
}

/* icon */
.step-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #F4F7FF;
  border: 1px solid rgba(46, 91, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.step-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--brand-dark);
  fill: none;
  stroke-width: 2;
}

/* text */
.flow-step h4 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.flow-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ====== 手機：變成直向 ====== */
@media (max-width: 768px) {
  .flow-steps {
    display: block;
  }

  .flow-steps::before {
    display: none;
  }

  .flow-step {
    margin-bottom: 18px;
    padding-left: 60px;
  }

  .flow-step::after {
    display: none;
  }

  .step-index {
    left: 10px;
    top: 10px;
  }

  .step-icon {
    position: absolute;
    left: 10px;
    top: 38px;
  }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-17b9130 *//* ===== 變數（可改品牌色/陰影/圓角） ===== */
.svc-steps{
  --brand:#2E5BFF;
  --brand-dark:#143CBE;
  --ink:#0b132a;
  --muted:#5b6a8a;
  --card:#fff;
  --shadow:0 10px 22px rgba(16,24,40,.10);
  --radius:16px;
  padding: 10px 8px 0;
}

/* 標題列 */
.svc-steps .svc-head{
  max-width: 1180px; margin: 0 auto 10px;
}
.svc-steps .svc-head h3{
  margin:0; font-size:30px; font-weight:900; color:var(--ink);
}
.svc-steps .svc-head p{
  margin:6px 0 0; color:var(--muted);
  font-size:15px;
}

/* 兩欄網格、緊湊高度 */
.steps-grid{
  max-width:1180px; margin:0 auto; list-style:none; padding: 6px 0 8px;
  display:grid; grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px 18px;       /* row gap / column gap */
}

/* 卡片（高度精簡） */
.step{
  position:relative;
  background: var(--card);
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 14px 64px;  /* 預留左側給編號+icon */
  min-height: 92px;              /* 矮一點 */
  transition: transform .18s ease, box-shadow .18s ease;
}
.step:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(46,91,255,.14);
}

/* 步驟編號 badge（左上） */
.step-no{
  position:absolute; left: 12px; top: 12px;
  display:inline-grid; place-items:center;
  width: 34px; height:34px; border-radius:999px;
  background:#EEF2FF; color:var(--brand-dark);
  border:1px solid rgba(46,91,255,.25);
  font-size:11px; font-weight:800;
  box-shadow: 0 6px 12px rgba(16,24,40,.08);
}

/* 小圖示（左側） */
.step-icon{
  position:absolute; left: 12px; top: 52px;
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  background:#F4F7FF; border:1px solid rgba(46,91,255,.2);
}
.step-icon svg{ width:18px; height:18px; stroke:var(--brand-dark); fill:none; stroke-width:2; }

/* 文字 */
.step h4{
  margin: 2px 0 4px; font-size:16px; font-weight:800; color:var(--ink);
}
.step p{
  margin:0; font-size:14px; color:var(--muted); line-height:1.5;
}

/* 分隔線（可關閉） */
.steps-grid{ position:relative; }
.steps-grid::before{
  content:""; position:absolute; left:0; right:0; top:calc(50% - 1px); height:2px;
  background: linear-gradient(90deg, rgba(46,91,255,.08), rgba(46,91,255,.04), rgba(46,91,255,.08));
  pointer-events:none;
}

/* 手機：單欄、仍然很矮 */
@media (max-width: 820px){
  .steps-grid{ grid-template-columns: 1fr; gap: 12px; }
  .steps-grid::before{ display:none; }
  .step{ min-height: 88px; }
}


/* Elementor 區塊 */
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-container {
  overflow: visible !important;
}

/* 讓你的區塊本身保持乾淨，不再被裁掉 */
#sc-differentiators {
  padding-left: 20px;
  padding-right: 20px;
}

/* 桌機版再多加安全邊（不影響文字排版） */
@media (min-width: 1200px){
  #sc-differentiators {
    padding-left: 40px;
    padding-right: 40px;
  }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-c3bd103 *//* ===== 全流程代跑上線計畫（獨立樣式） ===== */
:root {
  --bg-deep: #070c1c;         /* 深夜科技藍背景 */
  --card: rgba(255,255,255,0.04);
  --text-main: #e9eefc;       /* 主要文字（高對比） */
  --text-dim: #b7c0da;        /* 次要文字 */
  --brand: #2f6cff;           /* 科技藍 */
  --brand-2: #ff3b3b;         /* 霓虹紅（提示點） */
  --ring: 0 0 0 / 0%;
  --radius-2xl: 20px;
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
}

.plan-runup {
  position: relative;
  isolation: isolate;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(47,108,255,.18), transparent 60%),
              radial-gradient(1000px 500px at 90% 0%, rgba(255,59,59,.08), transparent 60%),
              var(--bg-deep);
  padding: clamp(56px, 5vw, 90px) 16px;
  color: var(--text-main);
  overflow: hidden;
}

.plan-container {
  max-width: 1120px;
  margin: 0 auto;
}

.plan-title {
  position: relative;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .02em;
  font-size: clamp(28px, 4.2vw, 44px);
  text-align: center;
  margin: 0;
  color: var(--text-main);
  text-shadow: 0 2px 10px rgba(47,108,255,.2);
}

.plan-title > span {
  display: inline-block;
  background: linear-gradient(180deg, #eaf1ff 0%, #cfe0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* 霓虹質感文字 */
  filter: drop-shadow(0 6px 18px rgba(47,108,255,.25));
}

.title-underline {
  display: block;
  width: clamp(120px, 18vw, 220px);
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 22px rgba(47,108,255,.65), 0 0 48px rgba(47,108,255,.35);
  animation: underlineGlow 2.8s ease-in-out infinite;
}

@keyframes underlineGlow {
  0%, 100% { opacity: .55; transform: scaleX(0.92); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

.plan-subtitle {
  margin: 14px auto 36px;
  text-align: center;
  color: var(--text-dim);
  font-size: clamp(15px, 2.2vw, 18px);
  letter-spacing: .02em;
}

/* 三亮點 */
.plan-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.8vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.highlight-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: flex-start;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-2xl);
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  backdrop-filter: blur(4px);
}

.highlight-item:hover {
  transform: translateY(-2px);
  border-color: rgba(47,108,255,.35);
  box-shadow: 0 14px 36px rgba(47,108,255,.15);
}

.dot-pulse {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow:
    0 0 10px rgba(255,59,59,.8),
    0 0 28px rgba(255,59,59,.45);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 10px rgba(255,59,59,.9), 0 0 28px rgba(255,59,59,.4); }
  50%      { transform: scale(1.18); box-shadow: 0 0 16px rgba(255,59,59,1), 0 0 44px rgba(255,59,59,.6); }
}

.highlight-body h3 {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 800;
  letter-spacing: .02em;
  color: #f5f8ff;
}

.highlight-body p {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  color: var(--text-dim);
  line-height: 1.7;
}

/* ===== RWD ===== */
@media (max-width: 1024px) {
  .plan-highlights { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .plan-runup { padding: 48px 16px; }
  .plan-highlights { grid-template-columns: 1fr; }
  .highlight-item { grid-template-columns: 24px 1fr; }
  .plan-subtitle { margin-bottom: 28px; }
}/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-bdd26c2 *//* ===== Footer Pro (獨立版) ===== */
:root{
  --accent:#1f6fff;
  --accent-light:#5aa3ff;
  --ink:#1E2A3A;
  --muted:#5b6b82;
  --bg:#ffffff;
  --radius:20px;
  --shadow:0 12px 30px rgba(0,0,0,.06);
}

/* 主容器 */
.footer-pro{
  max-width: 960px;
  margin: 60px auto;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: var(--shadow);
  position: relative;
  font-family: 'Roboto', sans-serif;
}

/* 外框光暈 */
.footer-pro::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(31,111,255,.35), rgba(90,163,255,.20), rgba(31,111,255,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

/* 兩欄 Grid */
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* 左側品牌卡片 */
.footer-brand{
  background:#fff;
  padding:22px;
  border-radius: var(--radius);
  border:1px solid rgba(31,111,255,.10);
  box-shadow:0 8px 24px rgba(31,111,255,.08);
}

/* 標題頭區域 */
.brand-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

/* Logo */
.brand-logo-img{
  width:46px;
  height:46px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(31,111,255,.22);
}

/* 文字標題 */
.brand-title{
  font-size:18px;
  font-weight:800;
  color:var(--ink);
}
.brand-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

/* 聯絡資訊 */
.info{
  display:flex;
  gap:10px;
  margin:10px 0;
  color:var(--ink);
  font-size:14px;
}
.info i{
  color:var(--muted);
  margin-top:2px;
}
.info a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.info a:hover{
  text-decoration:underline;
}

/* CTA 列 */
.cta-row{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#fff;
  text-decoration:none;
  transition:.25s ease;
}
.btn-line{
  background:#00c300;
  box-shadow:0 8px 18px rgba(0,195,0,.25);
}
.btn-line:hover{
  transform:translateY(-2px);
}
.btn-call{
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  box-shadow:0 8px 18px rgba(31,111,255,.25);
}
.btn-call:hover{
  transform:translateY(-2px);
}

/* 右側卡片 */
.footer-links{
  background:#fff;
  padding:22px;
  border-radius: var(--radius);
  border:1px solid rgba(31,111,255,.10);
  box-shadow:0 8px 24px rgba(31,111,255,.08);
}

.link-title{
  font-size:16px;
  font-weight:800;
  color:var(--ink);
  margin-bottom:10px;
}

.link-list{
  display:grid;
  gap:12px;
}

.link-item{
  display:flex;
  align-items:center;
  gap:10px;
}
.link-item i{
  color:var(--accent);
}
.link-item a{
  text-decoration:none;
  color:var(--ink);
  font-size:14px;
}
.link-item a:hover{
  text-decoration:underline;
  color:var(--accent);
}

/* 分隔線 */
.footer-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(31,111,255,.3), transparent);
  margin:18px 0 12px;
}

/* 版權文字 */
.footer-copy{
  text-align:center;
  font-size:12px;
  color:#94a0b2;
}

/* RWD */
@media (max-width:820px){
  .footer-grid{
    grid-template-columns:1fr;
  }
  .footer-pro{
    padding:24px;
    margin:40px 16px;
  }
}/* End custom CSS */