/* ============================
   DBS HERO – TAG 樣式優化
============================ */
.its-hero .hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}

.its-hero .hero-tag{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font-size:.82rem;
  padding:8px 14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#111827;
  cursor:pointer;
  transition:
    background .18s ease-out,
    box-shadow .18s ease-out,
    border-color .18s ease-out,
    transform .12s ease-out;
}

.its-hero .hero-tag i{
  font-size:.85rem;
  color:#4b5563;
}

.its-hero .hero-tag:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 40px rgba(15,23,42,.10);
}

.its-hero .hero-tag.active{
  border-color:rgba(129,140,248,.9);
  background:linear-gradient(
    135deg,
    rgba(239,246,255,.96),
    rgba(219,234,254,.96)
  );
  box-shadow:
    0 0 0 1px rgba(129,140,248,.7),
    0 18px 46px rgba(79,70,229,.22);
  color:#111827c4;
}

.its-hero .hero-tag.active i{
  color:#4f46e5;
}

/* ============================
   DBS HERO – Canvas 容器
============================ */
.vidaware-canvas-wrap{
  position:absolute;
  inset:0;
  border-radius:32px;
  background:rgba(255,255,255,0.78);
  backdrop-filter:blur(24px);
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 30px 80px rgba(0,0,0,.12);
  overflow:hidden;
}

#vidawareCanvas{
  width:100%;
  height:100%;
  display:block;
}
/* 說明卡 */
.canvas-title{
  position:absolute;
  left:24px;
  right:24px;
  bottom:18px;
  padding:10px 18px;
  border-radius:14px;
  background:rgba(15,23,42,0.96);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  pointer-events:none; 
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}

.canvas-title.show{
  opacity:1;
  transform:translateY(0);
}

.canvas-title h4{
  font-size:12px;
  font-weight:700;
  margin:0;
  white-space:nowrap;
  color:#f9fafb;
}

.canvas-title p{
  margin:0;
  font-size:11px;
  opacity:.8;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 卡片微光一圈 */
.vidaware-canvas-wrap.dbs-phase-switch{
  animation:dbsPhaseFlash .38s ease-out;
}
@keyframes dbsPhaseFlash{
  0%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 0 rgba(129,140,248,0.0);
  }
  50%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 8px rgba(129,140,248,0.45);
  }
  100%{
    box-shadow:0 26px 80px rgba(15,23,42,.45),
               0 0 0 0 rgba(129,140,248,0.0);
  }
}

/* ============================
   DBS Transform Section
============================ */
/* Section 只是加一個 head 區塊 */
.dbs-transform{
  margin: 72px auto 96px;
  max-width: 1200px;
  padding: 32px 32px 36px;
  border-radius: 32px;
  background: radial-gradient(circle at 0 0,#ffffff 0,#f4f5ff 42%,#eef2ff 100%);
  box-shadow:
    0 24px 60px rgba(15,23,42,.14),
    0 0 0 1px rgba(148,163,184,.18);
}

/* 標題區 */
.dbs-transform-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.dbs-head-icon{
  width:34px;
  height:34px;
  border-radius:999px;
  background:linear-gradient(135deg,#4f46e5,#22c55e);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  box-shadow:0 10px 24px rgba(79,70,229,.45);
}

.dbs-head-title{
  font-size:22px;
  font-weight:800;
  letter-spacing:.04em;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.dbs-head-title .main{
  color:#0f172a;
}
.dbs-head-title .accent{
  padding:2px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,#4f46e5,#a855f7);
  color:#f9fafb;
  font-size:20px;
}
.dbs-head-sub{
  margin-top:2px;
  font-size:13px;
  color:#6b7280;
}

.dbs-transform-inner{
  display:grid;
  grid-template-columns: minmax(260px, 320px) minmax(320px, 420px) minmax(260px, 320px);
  gap:32px;
  align-items:center;
}

.dbs-col{
  position: relative;
}

.dbs-t-eyebrow{
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 18px;
}

/* = LEFT source cards = */
.dbs-src-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  margin-bottom:12px;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 14px 45px rgba(15,23,42,.10);
  border:1px solid rgba(148,163,184,.24);
  backdrop-filter: blur(14px);
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.dbs-src-card.active{
  border-color: rgba(129,140,248,.9);
  box-shadow:0 18px 55px rgba(129,140,248,.35);
  background:rgba(248,250,252,.98);
}

.dbs-src-card:hover{
  transform: translateY(-2px);
}

.dbs-src-ico{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
}

.dbs-src-ico.badge-traffic{
  background:linear-gradient(135deg,#4f46e5,#22c55e);
}
.dbs-src-ico.badge-ai{
  background:linear-gradient(135deg,#6366f1,#f97316);
}
.dbs-src-ico.badge-iot{
  background:linear-gradient(135deg,#0ea5e9,#22c55e);
}

.dbs-src-text h3{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:3px;
}
.dbs-src-text p{
  font-size:12px;
  color:#6b7280;
  line-height:1.6;
}

.dbs-src-hint{
  margin-top:8px;
  font-size:11px;
  color:#9ca3af;
}

/* = CENTER visual = */
.dbs-visual-wrap{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  min-height:260px;
  background:radial-gradient(circle at 30% 0%,#ffffff 0,#e5edff 45%,#e0e7ff 100%);
  box-shadow:
    0 18px 55px rgba(148,163,184,.6),
    0 0 0 1px rgba(226,232,240,.9);
}

.dbs-visual-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* 三條輸入線（一直存在、明顯） */
.dbs-line{
  fill:none;
  stroke:url(#dbsLineIdle);
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-dasharray:5 9;
  stroke-dashoffset:120;
  opacity:.95;
  filter: drop-shadow(0 0 10px rgba(129,140,248,.45));
  animation: dbsLineFlow 7.5s linear infinite;
}

/* Active / hover 只加強對應那一條 */
.dbs-transform[data-active-src="traffic"] #dbs-line-traffic,
.dbs-transform[data-hover-src="traffic"]  #dbs-line-traffic{
  stroke:url(#dbsLineActive);
  stroke-width:4;
  filter: drop-shadow(0 0 14px rgba(79,70,229,.9));
}
.dbs-transform[data-active-src="ai"] #dbs-line-ai,
.dbs-transform[data-hover-src="ai"]  #dbs-line-ai{
  stroke:url(#dbsLineActive);
  stroke-width:4;
  filter: drop-shadow(0 0 14px rgba(129,140,248,.9));
}
.dbs-transform[data-active-src="iot"] #dbs-line-iot,
.dbs-transform[data-hover-src="iot"]  #dbs-line-iot{
  stroke:url(#dbsLineActive);
  stroke-width:4;
  filter: drop-shadow(0 0 14px rgba(34,197,94,.9));
}


.dbs-line-out{
  stroke-width: 2;
  opacity:.7;
}

/* HUD grid 改淡色 */
.dbs-visual-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(148,163,184,.26) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(148,163,184,.22) 1px,transparent 1px);
  background-size:26px 26px;
  mix-blend-mode:multiply;
  opacity:.55;
}

/* 中心 DBS 圓 */
.dbs-core{
  position:relative;
  z-index:2;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* DBS 中心圓略調亮一點 */
.dbs-core-ring{
  position:absolute;
  width:170px;
  height:170px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%,rgba(248,250,252,1),rgba(165,180,252,.55));
  box-shadow:
    0 0 0 1px rgba(129,140,248,.65),
    0 26px 60px rgba(148,163,184,.95);
}
.dbs-core-main{
  position:relative;
  width:135px;
  height:135px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%,#ffffff,#e5e7ff);
  box-shadow:
    0 16px 40px rgba(148,163,184,.85),
    inset 0 0 0 1px rgba(209,213,219,.9);
}
.dbs-core-title{
  font-weight:800;
  letter-spacing:.12em;
  font-size:20px;
  color:#4f46e5;
}
.dbs-core-sub{
  margin-top:2px;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9ca3af;
}

/* = RIGHT event list = */
.dbs-events-scroll{
  max-height:310px;
  padding-right:4px;
  overflow-y:auto;
}

/* 自訂一點點 scrollbar */
.dbs-events-scroll::-webkit-scrollbar{
  width:6px;
}
.dbs-events-scroll::-webkit-scrollbar-track{
  background:transparent;
}
.dbs-events-scroll::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.7);
  border-radius:999px;
}

.dbs-event-group{
  display:none;
}
.dbs-event-group.is-active{
  display:block;
}

.dbs-out-card{
  padding:16px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.97);
  box-shadow:0 14px 45px rgba(15,23,42,.12);
  border:1px solid rgba(148,163,184,.22);
  backdrop-filter:blur(14px);
  margin-bottom:14px;
}

.dbs-out-tag{
  font-size:11px;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(239,246,255,.9);
  margin-bottom:6px;
}
.dbs-out-tag .dot{
  width:7px;
  height:7px;
  border-radius:999px;
}
.dbs-out-tag .dot.traffic{ background:#6366f1; }
.dbs-out-tag .dot.ai{      background:#a855f7; }
.dbs-out-tag .dot.iot{     background:#22c55e; }

.dbs-out-card h3{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:4px;
}
.dbs-out-card p{
  font-size:12px;
  color:#6b7280;
  line-height:1.7;
}

/* RWD keep as before */
@keyframes dbsLineFlow{
  from{ stroke-dashoffset:120; }
  to  { stroke-dashoffset:0; }
}

@media (max-width:1024px){
  .dbs-transform-inner{
    grid-template-columns:1fr;
    gap:24px;
  }
  .dbs-col-center{
    order:-1;
  }
}
/* ===========================
   DBS Pillars – Layout
=========================== */
/* 區塊背景 + 外框 */
.dbs-pillars-section{
  padding: 96px 0 120px;
  background: radial-gradient(circle at top, #eef2ff 0, #f9fbff 40%, #f3f4ff 100%);
}

.dbs-pillars-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

/* 上方小標（對齊「即時事件 轉化模擬器」） */
.dbs-pillars-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:10px;
}

.dbs-pillars-eyebrow-ico{
  font-size:11px;
}

/* 主標 – 字級 / 間距對齊另一個 section */
.dbs-pillars-title{
  margin:0;
  font-size:32px;
  line-height:1.3;
  font-weight:800;
  color:#0f172a;
}

@media (min-width: 1024px){
  .dbs-pillars-title{
    font-size:36px;
  }
}

/* 高亮 span（跟「轉化模擬器」藍色一樣） */
.dbs-pillars-title span{
  color:#2563eb;
}

/* 副標 */
.dbs-pillars-sub{
  margin-top:10px;
  margin-bottom:40px;
  font-size:14px;
  line-height:1.7;
  color:#6b7280;
}

/* 卡片排版 */
.dbs-pillars-grid{
  display:grid;
  gap:26px;
}

@media (min-width: 960px){
  .dbs-pillars-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
/* 外層 article：負責 z-index / tag 定位 */
.dbs-pillars-grid > article.dbs-pillars-card{
  position:relative;
  padding-top:0px;         
}

/* ===========================
   Cards – iOS glass look
=========================== */
.dbs-pillars-card{
  position: relative;
  flex: 1 1 0;
  min-width: 260px;
  max-width: 360px;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background: linear-gradient(145deg,
    rgba(255,255,255,0.92),
    rgba(241,245,255,0.92));
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow:
    0 24px 55px rgba(15,23,42,0.12),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  backdrop-filter: blur(22px);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform .38s cubic-bezier(.19,1,.22,1),
    box-shadow .32s ease,
    border-color .32s ease,
    background .32s ease;
}

/* Hover / active depth */
.dbs-pillars-card:hover{
  transform: translateY(-6px) translateZ(0);
  box-shadow:
    0 30px 80px rgba(15,23,42,0.16),
    0 0 0 1px rgba(129,140,248,0.6) inset;
}

.dbs-pillars-card.is-active{
  transform: translateY(-8px);
  border-color: rgba(79,70,229,0.9);
  box-shadow:
    0 34px 90px rgba(79,70,229,0.30),
    0 0 0 1px rgba(255,255,255,0.85) inset;
}

/* Tag bubble  */
.dbs-pillars-tag{
  position:absolute;
  top: 38px;               
  right: 22px;            
  transform:none;         /*  不要再往上拉 */
  z-index:5;               /* 關鍵：高於內層卡片 */
  max-width:200px;
  padding:8px 18px;
  border-radius:50px;
  font-size:12px;
  line-height:1.5;
  color:#f9fafb;
  text-align:left;
  background:linear-gradient(135deg,#4f46e5,#3b82f6);
  box-shadow:0 18px 35px rgba(37,99,235,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}

/* 只有啟用的卡片才顯示標籤 */
.dbs-pillars-card.is-active .dbs-pillars-tag{
  opacity:1;
  transform:translateY(-72%);
}

/* 內層真正的卡片外觀 */
.dbs-pillars-card-inner{
  position:relative;
  z-index:1;
  border-radius:26px;
  padding:26px 26px 26px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(24px);
  border:1px solid rgba(148,163,184,.28);
  box-shadow:
    0 18px 40px rgba(15,23,42,.16),
    0 0 0 1px rgba(255,255,255,.8);
  text-align:left;
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

/* hover / active 狀態：加強光暈 */
.dbs-pillars-card-inner:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px rgba(15,23,42,.24);
}

.dbs-pillars-card.is-active .dbs-pillars-card-inner{
  transform:translateY(-6px);
  border-color:rgba(129,140,248,.9);
  box-shadow:
    0 32px 80px rgba(37,99,235,.32),
    0 0 0 1px rgba(129,140,248,.85);
}

/* Card content */
.dbs-pillars-card-title{
  margin: 0px 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

.dbs-pillars-card-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
}

/* ===========================
   Minimal line icons 
=========================== */
/* icon 圓角 */
.dbs-pillars-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:radial-gradient(circle at 0 0,#e0edff 0,#e5ecff 40%,#dbeafe 100%);
  box-shadow:0 10px 25px rgba(15,23,42,.25);
}

.dbs-pillars-fa{
  font-size:20px;
  color:#2563eb;
}

/* 各卡片可視需要微調色彩 */
.dbs-pillars-fa--event{ color:#2563eb; }
.dbs-pillars-fa--multi{ color:#0ea5e9; }
.dbs-pillars-fa--decision{ color:#22c55e; }

/* Hover / Active：icon 微浮起 + 呼吸感 */
.dbs-pillars-card:hover .dbs-pillars-icon,
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-icon{
  transform: translateY(-3px);
  box-shadow:
    0 18px 40px rgba(15,23,42,0.32),
    0 0 0 1px rgba(129,140,248,0.6);
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,1), rgba(241,245,249,0.78));
}

.dbs-pillars-card:hover .dbs-pillars-fa,
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-fa{
  transform: scale(1.08);
  text-shadow: 0 6px 16px rgba(15,23,42,0.5);
}

/* Active卡片加呼吸動畫 */
.dbs-pillars-card.dbs-pillars-card--active .dbs-pillars-fa{
  animation: dbs-pillars-fa-pulse 1.8s ease-in-out infinite;
}

@keyframes dbs-pillars-fa-pulse{
  0%,100%{ transform: scale(1.08); }
  50%    { transform: scale(1.14); }
}

/* Event icon: 疊加方塊 */
.dbs-pillars-icon--event::before,
.dbs-pillars-icon--event::after{
  content:"";
  position:absolute;
  border-radius:6px;
  border:2px solid #e5e7eb;
}
.dbs-pillars-icon--event::before{
  width:14px;height:14px;
  top:9px;left:9px;
}
.dbs-pillars-icon--event::after{
  width:10px;height:10px;
  top:4px;left:16px;
}

/* Multi-source icon: 五點星 */
.dbs-pillars-icon--multi::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:4px;height:4px;
  margin:-2px;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow:
    0 -10px 0 0 #e5e7eb,
    0 10px 0 0 #e5e7eb,
    -9px 4px 0 0 #e5e7eb,
    9px 4px 0 0 #e5e7eb;
}

/* Decision icon: 折線＋節點 */
.dbs-pillars-icon--decision::before,
.dbs-pillars-icon--decision::after{
  content:"";
  position:absolute;
}
.dbs-pillars-icon--decision::before{
  left:7px;bottom:9px;
  width:18px;height:12px;
  border-left:2px solid #e5e7eb;
  border-bottom:2px solid #e5e7eb;
  transform:skewX(-22deg);
}
.dbs-pillars-icon--decision::after{
  bottom:7px;left:6px;
  width:6px;height:6px;
  border-radius:999px;
  background:#e5e7eb;
  box-shadow: 10px -8px 0 0 #e5e7eb, 18px -14px 0 0 #e5e7eb;
}

/* ===========================
   RWD
=========================== */
@media (max-width: 960px){
  .dbs-pillars-grid{
    flex-direction: column;
    align-items: stretch;
  }
  .dbs-pillars-card{
    max-width:none;
  }
  .dbs-pillars-tag{
    max-width: 88%;
  }
}

/* ===========================
  DB-- CORE GLASS SECTION
=========================== */
.dbs-coreglass-section{
  padding: 96px 0;
  background: radial-gradient(circle at top, #eef3ff 0, #f7f8ff 32%, #f3f4ff 100%);
}

.dbs-coreglass-shell{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Head */

.dbs-coreglass-head{
  text-align: left;
  margin-bottom: 40px;
}

/* 核心模組標題區 */
.dbs-coreglass-header{
  max-width: 1080px;
  margin: 0 auto 40px;
  padding: 40px 24px 0;
  text-align: center;
}

.dbs-coreglass-eyebrow{
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 10px;
}

.dbs-coreglass-title{
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.dbs-coreglass-sub{
  max-width: 720px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.8;
  olor: #64748b;
}

/* Rows */
.dbs-coreglass-rows{
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 24px;
}

.dbs-coreglass-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 22px;
  padding: 18px 22px;
  border-radius: 28px;
  background: rgba(255,255,255,.85);
  box-shadow:
    0 18px 45px rgba(15,23,42,.10),
    0 0 0 1px rgba(148,163,184,.18);
  backdrop-filter: blur(26px);
  transform: translateY(8px);
  opacity: 0;
  transition:
    transform .5s cubic-bezier(.19,1,.22,1),
    box-shadow .35s ease,
    border-color .35s ease,
    opacity .45s ease;
  border: 1px solid transparent;
  cursor: pointer;
}

.dbs-coreglass-row.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.dbs-coreglass-row.is-active{
  border-color: rgba(59,130,246,.6);
  box-shadow:
    0 24px 60px rgba(37,99,235,.26),
    0 0 0 1px rgba(129,140,248,.5);
}

/* Left module card */

.dbs-coreglass-left{
  display: flex;
  align-items: stretch;
}

.dbs-coreglass-module{
  position: relative;
  flex: 1;
  border-radius: 24px;
  background: radial-gradient(circle at top left,#f1f5ff 0,#ffffff 55%,#eef2ff 100%);
  box-shadow:
    0 16px 35px rgba(15,23,42,.20),
    0 0 0 1px rgba(148,163,184,.35);
  padding: 18px 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform .35s cubic-bezier(.19,1,.22,1),
    box-shadow .35s ease;
}

.dbs-coreglass-module-chip{
  position: absolute;
  top: -14px;
  left: 20px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(90deg,#4f46e5,#3b82f6);
  box-shadow: 0 10px 22px rgba(59,130,246,.50);
}

.dbs-coreglass-module-icon{
  width: 46px;
  height: 46px;
  border-radius: 18px;
  background: radial-gradient(circle at 20% 0,#4f46e5 0,#1d4ed8 45%,#0f172a 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#e5edff;
  box-shadow:
    0 16px 40px rgba(37,99,235,.65),
    0 0 0 1px rgba(129,140,248,.45);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}
.dbs-coreglass-row:hover .dbs-coreglass-module-icon{
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 22px 55px rgba(59,130,246,.65),
    0 0 0 1px rgba(129,140,248,.9);
}

.dbs-coreglass-module-icon i{
  font-size: 22px;
}

.dbs-coreglass-module-text{
  transform: translateZ(18px);
}

.dbs-coreglass-module-label{
  font-size: 13px;
  color: #4b5563;
  margin-bottom: 2px;
}

.dbs-coreglass-module-title{
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
}

/* Right panels */

.dbs-coreglass-right{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.dbs-coreglass-panel{
  border-radius: 22px;
  padding: 22px 28px 24px;       
  background: radial-gradient(circle at 0 0, rgba(255,255,255,.96), rgba(241,245,249,.96));
  box-shadow:
    0 18px 40px rgba(148,163,184,.35),
    0 0 0 1px rgba(203,213,225,.9);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.dbs-coreglass-panel:hover{
  transform: translateY(-4px);
  background: radial-gradient(circle at 0 0, #f9fbff, #eef2ff);
  box-shadow:
    0 24px 60px rgba(129,140,248,.45),
    0 0 0 1px rgba(129,140,248,.9);
}

.dbs-coreglass-row.is-active 
.dbs-coreglass-panel{
  box-shadow:
    0 18px 36px rgba(59,130,246,.16),
    0 0 0 1px rgba(129,140,248,.45);
}

.dbs-coreglass-panel-title{
  margin:0 0 10px;
}

.dbs-coreglass-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(37,99,235,.06);
  border:1px solid rgba(129,140,248,.45);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#1e3a8a;
}

.dbs-coreglass-panel-body{
  font-size:13px;
  line-height:1.8;
  color:#475569;
}

.dbs-coreglass-panel-body--compact{
  font-size:13px;
  line-height:1.7;
}

/* Lists & tags */

.dbs-coreglass-panel--list{
  padding-top:14px;
}

.dbs-coreglass-list-title{
  font-size:12px;
  font-weight:600;
  color:#4b5563;
  margin-bottom:6px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.dbs-coreglass-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:#4b5563;
}

.dbs-coreglass-list li{
  display:flex;
  align-items:flex-start;
  gap:7px;
}

.dbs-coreglass-list .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  margin-top:6px;
}

.dot--blue{background:#3b82f6;}
.dot--indigo{background:#6366f1;}
.dot--teal{background:#14b8a6;}

.dbs-coreglass-panel--tags{
  display:flex;
  flex-direction:column;
}

/* 關鍵能力 TAG 區塊 */
.dbs-coreglass-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.dbs-coreglass-tags--xl{
  gap: 12px 16px;
}

.dbs-coreglass-tag{
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  line-height: 1.4;
  background: radial-gradient(circle at 0 0, #eef2ff 0, #e0ecff 36%, #ddeafe 100%);
  color: #475569;
  box-shadow:
    0 8px 18px rgba(148,163,184,.35),
    0 0 0 1px rgba(191,219,254,.9);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}

.dbs-coreglass-tag--xl{
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 500;
}

.dbs-coreglass-tag i{
  margin-right: 6px;
  font-size: 15px;
  color: #4f46e5;
}

.dbs-coreglass-tag:hover{
  transform: translateY(-2px);
  background: radial-gradient(circle at 0 0, #e0f2fe 0, #dbeafe 45%, #c7d2fe 100%);
  color: #1e293b;
  box-shadow:
    0 14px 30px rgba(129,140,248,.45),
    0 0 0 1px rgba(129,140,248,.85);
}

/* Two-column panel  */
.dbs-coreglass-panel--two{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap:14px;
}

.dbs-coreglass-subpanel{
  border-radius:16px;
  background:linear-gradient(135deg,rgba(248,250,252,.98),rgba(239,246,255,.98));
  padding:12px 13px 13px;
  box-shadow:
    0 8px 18px rgba(15,23,42,.08),
    0 0 0 1px rgba(203,213,225,.55);
}

/* Hover / Active states */

.dbs-coreglass-row:hover .dbs-coreglass-module{
  box-shadow:
    0 20px 42px rgba(37,99,235,.35),
    0 0 0 1px rgba(129,140,248,.55);
}

.dbs-coreglass-row.is-active .dbs-coreglass-module-icon{
  background: radial-gradient(circle at 20% 0,#6366f1 0,#2563eb 45%,#0f172a 100%);
}

/* Responsive */

@media (max-width: 1024px){
  .dbs-coreglass-row{
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 640px){
  .dbs-coreglass-section{
    padding:72px 0;
  }
  .dbs-coreglass-title{
    font-size:24px;
  }
  .dbs-coreglass-row{
    padding:14px 14px 16px;
  }
  .dbs-coreglass-module{
    grid-template-columns: auto 1fr;
  }
}

/* =========================
   DB-Dashboard 專用 layout
========================= */

/* 左描述 + 右功能小卡 的 grid 版面 */
.dbs-coreglass-dashboard-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr);
  gap: 14px;
}

/* 左半部：描述 + 關鍵能力 */
.dbs-coreglass-dashboard-main{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 右半部：四個小卡 */
.dbs-coreglass-dashboard-minis{
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(78px, auto);
  gap: 12px;
}

/* 小卡本體 */
.dbs-coreglass-mini-card{
  border-radius: 18px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(248,250,252,.98), rgba(239,246,255,.98));
  box-shadow:
    0 12px 28px rgba(15,23,42,.08),
    0 0 0 1px rgba(203,213,225,.55);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: default;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.dbs-coreglass-mini-card:hover{
  transform: translateY(-3px);
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  box-shadow:
    0 22px 55px rgba(148,163,184,.45),
    0 0 0 1px rgba(129,140,248,.85);
}

/* 小卡 icon 圓點 */
.dbs-coreglass-mini-icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 20% 0,#6366f1 0,#3b82f6 45%,#1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5edff;
  box-shadow:
    0 12px 30px rgba(37,99,235,.45),
    0 0 0 1px rgba(129,140,248,.6);
  flex-shrink: 0;
}

.dbs-coreglass-mini-icon i{
  font-size: 17px;
}

/* 小卡文字 */
.dbs-coreglass-mini-text{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dbs-coreglass-mini-title{
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.dbs-coreglass-mini-desc{
  font-size: 12px;
  color: #64748b;
}

/* 關鍵能力標題 icon */
.dbs-coreglass-list-title i{
  margin-right: 6px;
  color: #4f46e5;
}

/* Tag 的 icon  */
.dbs-coreglass-tag i{
  margin-right: 10px;
  font-size: 26px;
}

/* RWD：平板以下 */
@media (max-width: 1024px){
  .dbs-coreglass-dashboard-layout{
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 有 icon 的小標題（Row1~Row3 通用） */
.dbs-coreglass-list-title,
.dbs-coreglass-feature-title{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

.dbs-coreglass-list-title i,
.dbs-coreglass-feature-title i{
  font-size: 13px;
  color: #4f46e5;
  filter: drop-shadow(0 0 6px rgba(129,140,248,.55));
}

/* DBS CORE MODULES*/
.dbs-coreglass-row{
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.21,1,.23,1),
    box-shadow .35s ease;
}

/* 淡入＋回到原位 */
.dbs-coreglass-row.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* hover整列微微浮起一點點光暈 */
.dbs-coreglass-row:hover{
  box-shadow: 0 26px 80px rgba(148,163,184,.35);
}



/* ======================================================
   DFS CASE (video) – GLASS SECTION
====================================================== */
.dfs-video-glass{
  padding: 96px 0;
  /* background: linear-gradient(180deg,#f7f9ff,#eef3ff); */
}

.dfs-case-glass{
  padding:90px 20px;
  background:linear-gradient(180deg,#f6f8ff,#eef3ff);
}

.dfs-case-header{
  text-align:center;
  max-width:980px;
  margin:0 auto 40px;
}

.dfs-video-header{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 48px;
}

.dfs-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin: 0 auto 14px;
  padding:6px 14px;
  font-size:12px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
}

.dfs-video-title{
  margin:16px 0 10px;
  font-size:42px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content: center;
}

.dfs-video-title i{
  font-size:22px;
  color:#6b8cff;
   align-items:center;
}

.dfs-video-title .t-dark{ color:#0f172a;  align-items:center; }
.dfs-video-title .t-accent{
   align-items:center;
  background:linear-gradient(135deg,#4f7cff,#8fb3ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.dfs-video-desc{
  text-align: center;  
  margin: 12px auto 0;
  color:#5d6685;
  line-height: 1.7;
  font-size:15px;
  display:flex;
  gap:8px;
  align-items:flex-start;
  
}

.dfs-video-desc i{
  color: var(--accent, #6b7cff);
  margin-right: 6px;
}

/* Filters */
.dfs-video-filters{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.dfs-video-filters button{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  cursor:pointer;
}

.dfs-video-filters button.is-active{
  background:linear-gradient(135deg,#4f7cff,#8fb3ff);
  color:#fff;
}

/* Slider */
.dfs-video-slider{
  margin-top:36px;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color: rgba(120,140,255,.55) transparent;
}

.dfs-video-slider::-webkit-scrollbar{
  height:8px;
}

.dfs-video-slider::-webkit-scrollbar-track{
  background:rgba(255,255,255,.35);
  border-radius:999px;
}

.dfs-video-slider::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg,#6b8cff,#a5b4ff);
  border-radius:999px;
}

.dfs-video-track{
  display:flex;
  gap:24px;
  overflow-x:auto;  
  padding-bottom:10px; 
  /* iOS-like */
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* 隱藏原生 scrollbar */
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: smooth;
}

.dfs-video-track::-webkit-scrollbar{
  display:none;
}

.dfs-video-track.is-dragging{
  cursor:grabbing;
}

.dfs-video-track.is-dragging .dfs-video-card{
  pointer-events:none; /* 防止誤點 */
}

.dfs-video-card{
  scroll-snap-align: start;
  min-width:320px;
  scroll-snap-align:start;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:14px;
  box-shadow:0 22px 50px rgba(60,90,160,.18);
  transition:.35s ease;
}

@media(max-width:768px){
  .dfs-video-track{
    scroll-snap-type:x mandatory;
  }

  .dfs-video-card{
    scroll-snap-align:start;
  }
}

.dfs-video-card:hover{
  transform:translateY(-6px);
}

.dfs-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:#7a86b6;
}

.dfs-title{
  font-size:42px;
  font-weight:700;
}

.dfs-title .t-dark{ color:#0f172a; }
.dfs-title .t-accent{
  color: var(--accent);
  text-shadow: 0 6px 18px rgba(79, 114, 255, .45);
  background:linear-gradient(135deg,#4f7cff,#8fb3ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.dfs-case-group{
  margin-bottom:64px;
}

.dfs-group-title{
  font-size:20px;
  margin-bottom:20px;
  color:#1a2340;
}

/* Grid */
.dfs-case-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

/* Card */
.dfs-case-card{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:14px;
  box-shadow:0 20px 45px rgba(50,80,150,.18);
  transition:.35s ease;
}

.dfs-case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(50,90,180,.3);
}

.dfs-thumb{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}

.dfs-thumb img{
  width:100%;
  display:block;
}

.dfs-video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  position:relative;
  z-index:1;
}

/* Thumb */
.dfs-video-thumb{ 
  position:relative;
  aspect-ratio:16/9;
  border-radius:18px;
  overflow:hidden;
  background:#e9eeff;
}

.dfs-video-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 100%
  );
  opacity:0;
  transition:.35s cubic-bezier(.4,0,.2,1);
}

.dfs-video-thumb .dfs-play{
  opacity:.85;
  transform:scale(.92);
  transition:.35s cubic-bezier(.4,0,.2,1);
}

.dfs-video-card:hover .dfs-video-thumb::after{
  opacity:1;
}

.dfs-video-card:hover .dfs-play{
  opacity:1;
  transform:scale(1);
}

/* YouTube thumbnail */
.youtube-thumb{
  background-size:cover;
  background-position:center;
}

.dfs-video-thumb img{ width:100%; display:block; }


/* Play button */
.dfs-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}

.dfs-play i{
  font-size:22px;
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dfs-video-thumb:hover .dfs-play{ opacity:1; }
.dfs-thumb:hover .dfs-play{
  opacity:1;
}

.dfs-case-card h4{
  margin:14px 0 6px;
  font-size:15px;
}

.dfs-case-card p{
  font-size:13px;
  color:#5f678a;
}

.dfs-duration{
  position:absolute;
  bottom:8px;
  right:10px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

/* Lightbox */
.dfs-video-lightbox{
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.dfs-video-lightbox.open{ display:flex; }

.dfs-video-modal{
  position: relative;
  width: min(90vw, 960px);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  z-index: 2;
}

.dfs-video-modal iframe{
   width: 100%;
  height: 100%;
  border: 0;
  pointer-events: auto;
}

.dfs-video-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #111;
  font-size: 18px;
  border: none;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* 讓 overlay 本身可以被點 */
.dfs-video-lightbox::before{
  content:"";
  position:absolute;
  inset:0;
}

/* ======================================================
   DFS VIDEO – GLASS UPGRADE
====================================================== */

.dfs-video-card{
  position:relative;
  overflow:hidden;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity   .35s ease;
}

.dfs-video-card.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateX(24px) scale(.96);
}

/* DFS Video Card – list style reset */
.dfs-video-card ul{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.dfs-video-card li{
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.55;
  color: #4b5563; /* slate-600 */
  font-size: .92rem;
}

.dfs-video-card li i{
  margin-top: 3px;
  color: var(--accent, #6b7cff);
  flex-shrink: 0;
}

/* Hover 微浮 */
.dfs-video-card:hover{
  transform:translateY(-6px) scale(1.01);
}

/* 播放鍵 */
.dfs-play{
  pointer-events:auto;
}

/* GIF 播放中提示 */
.dfs-video-card.is-playing::after{
  content:"GIF PLAYING";
  position:absolute;
  top:12px;
  left:12px;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  letter-spacing:.08em;
}

/* Mobile 縮小卡片 */
@media(max-width:768px){
  .dfs-video-card{
    min-width:280px;
  }
}

/* Filter 隱藏 */
.dfs-video-card.is-hidden{
  display: none !important;
  opacity:0;
  pointer-events:none;
  width:0 !important;
  margin:0 !important;
  transform:scale(.94);
  margin-right:-320px; /* 卡片寬度 + gap */
  transition:
    opacity .25s ease,
    transform .25s ease,
    margin .35s ease;
}

/* YouTube 縮圖顯示 */
.dfs-video-thumb.is-youtube{
  background-size:cover;
  background-position:center;
}

.dfs-video-thumb.is-youtube img{
  display:none;
}

/* ===============================
   YouTube Fallback Glass UI
================================ */
.dfs-youtube-fallback{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;

  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#fff;
  z-index:3;
}

.dfs-youtube-fallback i{
  font-size:56px;
  color:#ff2d2d;
}

.dfs-youtube-fallback h3{
  font-size:1.2rem;
  font-weight:600;
}

.dfs-youtube-fallback p{
  font-size:.9rem;
  opacity:.85;
  max-width:280px;
  line-height:1.5;
}

.dfs-youtube-btn{
  margin-top:6px;
  padding:10px 22px;
  border-radius:999px;
  background:#ff2d2d;
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
  transition:.25s;
}

.dfs-youtube-btn:hover{
  background:#ff4545;
  transform:translateY(-1px);
}

/* 顯示狀態 */
.dfs-video-lightbox.show-fallback .dfs-youtube-fallback{
  display:flex;
}

.dfs-video-lightbox.show-fallback iframe{
  display:none;
}

/* ===============================
   GIF Live Badge
================================ */
.dfs-video-card[data-media="gif"] .dfs-video-thumb::before{
  content:"LIVE";
  position:absolute;
  top:10px;
  left:10px;
  padding:4px 10px;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  color:#fff;
  background:#ff3b30;
  border-radius:999px;
  opacity:0;
  transform:translateY(-4px);
  transition:.3s cubic-bezier(.4,0,.2,1);
}

.dfs-video-card[data-media="gif"]:hover .dfs-video-thumb::before{
  opacity:1;
  transform:translateY(0);
}

/* scrollbar */
.dfs-scrollbar{
  position:relative;
  height:4px;
  background:rgba(255,255,255,.25);
  border-radius:999px;
  margin-top:14px;
  overflow:hidden;
}

.dfs-scroll-thumb{
  position:absolute;
  height:100%;
  width:20%;
  background:rgba(255,255,255,.75);
  border-radius:999px;
  backdrop-filter:blur(6px);
  transition:transform .1s linear;
}