/* ==================================================
   ITS – 深紫藍 Cyber Glow 全域設定（main 區域）
================================================== */
body{
  font-family:"IBM Plex Sans","Noto Sans TC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* background:#050814; */
  color:#f4f6ff;
}

/* 只包住 ITS 內容的 main，避免影響其他頁 */
.its-main{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%,#262b6f 0,transparent 55%),
    radial-gradient(circle at 90% 100%,#3b1466 0,transparent 60%),
    radial-gradient(circle at 50% 120%,#0a1229 0,#020313 60%);
}

/* 霧化雲層 + 粒子 + 光束只套在 ITS main */
.its-ultra-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  overflow:hidden;
}

/* Fog Layers */
.its-fog-layer{
  position:absolute;
  inset:-25%;
  mix-blend-mode: screen;
  filter: blur(40px);
  opacity:.5;
  animation:fogDrift 70s linear infinite;
}

.fog-back{
  background-image:
    radial-gradient(circle at 15% 10%,#4b5bff33 0,transparent 55%),
    radial-gradient(circle at 90% 80%,#b13cff33 0,transparent 55%);
  opacity:.35;
}

.fog-mid{
  background-image:
    radial-gradient(circle at 5% 80%,#46e0ff33 0,transparent 55%),
    radial-gradient(circle at 95% 15%,#9a73ff33 0,transparent 55%);
  opacity:.5;
  animation-duration:55s;
}

.fog-front{
  background-image:
    radial-gradient(circle at 40% 0%,#ffffff1f 0,transparent 55%),
    radial-gradient(circle at 60% 80%,#9ce9ff24 0,transparent 60%);
  opacity:.65;
  filter: blur(26px);
  animation-duration:45s;
}

@keyframes fogDrift{
  0%{ transform:translate3d(-30px,20px,0) scale(1.03); }
  50%{ transform:translate3d(25px,-30px,0) scale(1.05); }
  100%{ transform:translate3d(-30px,20px,0) scale(1.03); }
}

/* 粒子 */
.its-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.its-particle{
  position:absolute;
  border-radius:999px;
  background:radial-gradient(circle at 30% 20%,#ffffffd0 0,#8ad7ff55 35%,transparent 70%);
  width:8px;
  height:8px;
  opacity:.2;
  filter:blur(.3px);
  animation:particleFloat linear infinite;
}

@keyframes particleFloat{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:.1; }
  30%{ opacity:.28; }
  50%{ transform:translate3d(-18px,-24px,0) scale(1.1); opacity:.18; }
  80%{ opacity:.3; }
  100%{ transform:translate3d(20px,16px,0) scale(1.05); opacity:.12; }
}

/* 光束 */
.its-beams{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.its-beam-line{
  position:absolute;
  left:-40%;
  width:160%;
  height:3px;
  background:linear-gradient(90deg,transparent 0,#4fe2ff 35%,#f0f6ff 50%,#a46bff 65%,transparent 100%);
  opacity:0;
  filter:blur(1px);
  mix-blend-mode:screen;
  animation:beamSweep linear infinite;
}

@keyframes beamSweep{
  0%{ transform:translate3d(-10%,0,0); opacity:0; }
  10%{ opacity:.28; }
  50%{ opacity:.48; }
  85%{ opacity:.18; }
  100%{ transform:translate3d(20%,0,0); opacity:0; }
}

/* 內容層 */
.its-main-inner{
  position:relative;
  z-index:5;
}

/* 共用容器 */
.its-shell{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.section-header{
  text-align:center;
  margin-bottom:32px;
}

.eyebrow,
.section-header .eyebrow{
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7d8fff;
  margin-bottom:8px;
}

.section-title{
  font-size:28px;
  font-weight:800;
  color:#040614ea;
  margin-bottom:8px;
}

.section-desc{
  max-width:820px;
  margin:0 auto;
  font-size:14px;
  color:#c4cff8;
  line-height:1.9;
}

/* Scroll reveal 基礎 */
.reveal-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease-out,transform .55s ease-out;
}

.reveal-on-scroll.visible{
  opacity:1;
  transform:translateY(0);
}

/* ==================================================
   ITS Architecture
================================================== */
.its-architecture{
  padding:54px 0 42px;
}

.arch-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  color:#1b2044;
}

.arch-sub{
  text-align:center;
  margin-top:6px;
  font-size:13px;
  color:#9fb3ff;
}

.its-hud-wrap{
  margin-top:18px;
}

.info-panel{
  margin-top:10px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(90,124,255,.28),rgba(8,15,48,.96));
  border:1px solid rgba(158,188,255,.85);
  color:#e3e7ff;
  font-size:13px;
  box-shadow:0 18px 40px rgba(0,0,0,.7);
}

/* ==================================================
   ITS HERO – Cyber Glow
================================================== */
.its-hero{
  position:relative;
  padding:74px 0 82px;
  color:#0a1130;
}

.hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr);
  gap:40px;
  align-items:center;
}

.hero-eyebrow{
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#98b1ff;
  margin-bottom:10px;
}

.hero-title{
  font-size:32px;
  line-height:1.25;
  font-weight:800;
  margin-bottom:14px;
}

.hero-title .accent{
  background:linear-gradient(130deg,#b5c4ff,#4fe2ff,#f1b6ff);
  -webkit-background-clip:text;
  color:transparent;
}

.hero-desc{
  font-size:14px;
  color:#c1ccff;
  max-width:520px;
  line-height:1.9;
}

/* 左側 DBS 標籤保持 iOS glass 風格 */
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.hero-tags 
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  font-size:12px;
  border:1px solid #b4c6ff;
  background:#fff;
  color:#1f2937;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.7);
  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .16s ease,
    border-color .18s ease;
}

.hero-tags 
.tag:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(64,120,255,.6);
}

.hero-tags 
.tag.active{
  background:linear-gradient(115deg,#6b77ff,#46e0ff);
  border-color:#cbe6ff;
  color:#050816;
  box-shadow:0 0 26px rgba(116,194,255,.9);
}

.hero-tag{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  padding:6px 14px;
  font-size:.78rem;
  color:#4b5563;
  background:rgba(248,250,252,.8);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  transition:all .18s ease-out;
}

.hero-tag i{
  font-size:.8rem;
}

/* active 狀態 */
.hero-tag.active{
  border-color:rgba(79,70,229,.7);
  background:linear-gradient(135deg,#4e46e5e0,#6366f1);
  color:#f9fafb;
  box-shadow:0 10px 26px rgba(79,70,229,.45);
}

/* 給右側整塊一點 3D 透視深度 */
.ai-hero-right{
  position:relative;
  perspective: 1400px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:420px;
}

/* Canvas 外框支援旋轉，保持 iOS glass 風格 */
.vidaware-canvas-wrap{
  position:relative;
  min-height:420px;
  border-radius:32px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 30px 80px rgba(15,23,42,.22);
  overflow:hidden;

  transform-style:preserve-3d;
  transform-origin:center center;
  transition:transform .18s ease-out;
}

/* HERO metrics */
.hero-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  transform-style:preserve-3d;
}

.metric-card{
  position:relative;
  padding:16px 16px 14px;
  border-radius:18px;
  background:rgba(11,17,52,.92);
  border:1px solid rgba(129,158,255,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.85);
  overflow:hidden;
  cursor:pointer;
  transform:translateZ(0);
  transition:
    transform .25s ease,
    box-shadow .3s ease,
    border-color .25s ease,
    background .25s ease;
}

.metric-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0 0,rgba(79,226,255,.38),transparent 60%);
  opacity:0;
  transition:opacity .3s ease-out,transform .3s ease-out;
  transform:translate3d(-20px,10px,0);
}

.metric-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.28) 45%,transparent 100%);
  transform:translateX(-130%);
  opacity:0;
  transition:transform .65s ease-out,opacity .45s ease-out;
}

.metric-card:hover{
  transform:translate3d(0,-6px,18px) scale(1.02);
  box-shadow:0 22px 60px rgba(42,118,255,.7);
  border-color:rgba(178,204,255,.9);
}

.metric-card:hover::before{
  opacity:1;
  transform:translate3d(0,0,0);
}

.metric-card:hover::after{
  opacity:1;
  transform:translateX(130%);
}

.metric-card.active{
  background:radial-gradient(circle at top,#2733a8,#0b112f);
  border-color:#8fd9ff;
  box-shadow:0 0 32px rgba(125,208,255,.9);
}

.metric-label{
  font-size:11px;
  color:#a5b7ff;
}

.metric-value{
  display:block;
  margin-top:4px;
  font-size:18px;
  font-weight:700;
}

.metric-note{
  margin-top:2px;
  font-size:11px;
  color:#ced7ff;
}

/* 細格線背景 */
.hero-grid-bg{
  position:absolute;
  inset:16% 6% 12%;
  background-image:
    linear-gradient(#1f2f5d55 1px,transparent 1px),
    linear-gradient(90deg,#1f2f5d55 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.32;
  pointer-events:none;
}

/* ==================================================
   Overview – 三層架構玻璃卡片
================================================== */
.its-overview{
  padding:72px 0 40px;
}

.overview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:30px;
}

.overview-card{
  position:relative;
  padding:22px 20px 20px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(9,13,43,.98));
  border:1px solid rgba(137,162,255,.55);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(0,0,0,.95);
  overflow:hidden;
  transform:translateY(18px);
  opacity:0;
  transition:
    transform .45s ease-out,
    opacity .45s ease-out,
    box-shadow .3s ease,
    border-color .3s ease;
  color:#dde4ff;
}

.overview-card.visible{
  transform:translateY(0);
  opacity:1;
}

.overview-card::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:radial-gradient(circle at 0 0,rgba(79,226,255,.26),transparent 55%);
  opacity:.35;
  mix-blend-mode:screen;
}

.overview-card::after{
  content:attr(data-layer);
  position:absolute;
  top:12px;
  right:-8px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#6f7fd7;
  transform:rotate(90deg);
}

.overview-card:hover{
  box-shadow:0 26px 70px rgba(24,106,255,.9);
  border-color:rgba(196,214,255,.95);
  transform:translateY(-6px);
}

.card-icon-badge{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
  position:relative;
  background:radial-gradient(circle at 25% 15%,#ffffffee,#7cd8ff66 55%,transparent 100%);
  box-shadow:
    0 0 24px rgba(132,206,255,.8),
    0 12px 28px rgba(0,0,0,.8);
}

.card-icon-badge::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.7);
  opacity:.9;
}

.card-icon-badge i{
  font-size:22px;
  color:#050816;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.85));
}

.overview-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:8px;
  color:#f5f7ff;
}

.overview-card ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:13px;
  color:#cbd4ff;
}

.overview-card li+li{
  margin-top:6px;
}

/* ==================================================
   Modules – 四大 AI 模組玻璃卡
================================================== */
.its-modules{
  padding:64px 0 42px;
}

.modules-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}

.module-card{
  position:relative;
  padding:20px 20px 18px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(7,10,35,.98));
  border:1px solid rgba(140,166,255,.55);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 58px rgba(0,0,0,.92);
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.module-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0 0,rgba(130,200,255,.3),transparent 55%);
  opacity:.18;
  pointer-events:none;
}

.module-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.25) 45%,transparent 100%);
  transform:translateX(-130%);
  opacity:0;
  pointer-events:none;
}

.module-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 72px rgba(32,110,255,.9);
  border-color:rgba(196,214,255,.96);
}

.module-card:hover::after{
  opacity:1;
  transform:translateX(130%);
  transition:transform .6s ease-out,opacity .4s ease-out;
}

.module-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 30% 20%,#ffffffee,#7dd8ff66 55%,transparent 100%);
  box-shadow:0 0 22px rgba(131,204,255,.9);
  color:#050816;
  margin-bottom:8px;
}

.module-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:11px;
  background:rgba(218, 222, 247, 0.911);
  border:1px solid rgba(175,190,255,.8);
  color:#f7f8ff;
  margin-bottom:6px;
}

.module-card h3{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
  color:#f5f7ff;
}

.module-card p{
  font-size:13px;
  color:#cdd6ff;
  line-height:1.9;
  margin-bottom:8px;
}

.module-card ul{
  font-size:12px;
  color:#030e5a;
  padding-left:18px;
}

.module-card li+li{
  margin-top:4px;
}

/* ==================================================
   ViDA.ai ITS 雲端平台 – 城市 + 雲動畫
================================================== */
.its-platform{
  padding:70px 0 52px;
  position:relative;
}

.platform-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr);
  gap:40px;
  align-items:flex-start;
}

.platform-copy .section-title{
  color:#f7f8ff;
}

.platform-copy .section-desc{
  color:#c4cff8;
  margin-left:0;
}

.platform-list{
  margin-top:16px;
  padding-left:18px;
  font-size:13px;
  color:#d4ddff;
  line-height:1.9;
}

/* 城市 + 雲 + 光束背景 */
.platform-panel{
  position:relative;
}

.platform-orbit-scene{
  position:absolute;
  inset:-40px -32px auto -32px;
  height:180px;
  pointer-events:none;
  overflow:hidden;
}

.city-silhouette{
  position:absolute;
  bottom:-10px;
  left:50%;
  width:160%;
  height:160px;
  transform:translateX(-50%);
  background:
    linear-gradient(to top,rgba(5,6,22,1) 0,rgba(5,6,22,0) 70%),
    repeating-linear-gradient(90deg,#111731 0 28px,#131833 28px 34px),
    linear-gradient(to top,#4b5b9f 0,#0a0e25 60%);
  clip-path:polygon(0% 60%,5% 50%,10% 58%,16% 40%,23% 55%,30% 35%,40% 52%,50% 32%,60% 50%,70% 36%,78% 56%,86% 42%,93% 58%,100% 50%,100% 100%,0% 100%);
  opacity:.9;
}

.city-window-grid{
  position:absolute;
  inset:0 8%;
  background-image:
    radial-gradient(circle,#ffe8a1 0,#ffe8a100 55%);
  background-size:120px 70px;
  background-repeat:repeat;
  mix-blend-mode:screen;
  opacity:.35;
  animation:cityGlow 10s ease-in-out infinite alternate;
}

@keyframes cityGlow{
  0%{ opacity:.3; }
  50%{ opacity:.55; }
  100%{ opacity:.32; }
}

.cloud-ring{
  position:absolute;
  top:8px;
  left:50%;
  width:220px;
  height:220px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,#6cd8ff44 0,#4f5dff22 35%,transparent 70%);
  filter:blur(2px);
  opacity:.65;
  animation:ringPulse 8s ease-in-out infinite;
}

@keyframes ringPulse{
  0%{ transform:translateX(-50%) scale(.9); opacity:.55; }
  50%{ transform:translateX(-50%) scale(1.08); opacity:.9; }
  100%{ transform:translateX(-50%) scale(.92); opacity:.6; }
}

.orbit-beam{
  position:absolute;
  top:40px;
  left:50%;
  width:260px;
  height:2px;
  transform-origin:center;
  background:linear-gradient(90deg,transparent 0,#4fe2ff 50%,transparent 100%);
  opacity:.6;
  filter:blur(1px);
}

.orbit-beam-1{ transform:translateX(-50%) rotate(12deg); animation:orbitSweep1 7s linear infinite; }
.orbit-beam-2{ transform:translateX(-50%) rotate(-14deg); animation:orbitSweep2 9s linear infinite; }

@keyframes orbitSweep1{
  0%{ transform:translateX(-50%) rotate(12deg) translateX(-120px); opacity:0; }
  25%{ opacity:.6; }
  50%{ transform:translateX(-50%) rotate(12deg) translateX(0); opacity:.9; }
  75%{ opacity:.5; }
  100%{ transform:translateX(-50%) rotate(12deg) translateX(120px); opacity:0; }
}
@keyframes orbitSweep2{
  0%{ transform:translateX(-50%) rotate(-14deg) translateX(140px); opacity:0; }
  30%{ opacity:.7; }
  50%{ transform:translateX(-50%) rotate(-14deg) translateX(0); opacity:.95; }
  80%{ opacity:.6; }
  100%{ transform:translateX(-50%) rotate(-14deg) translateX(-140px); opacity:0; }
}

/* 平台玻璃卡 + KPI */
.platform-glass{
  position:relative;
  margin-top:80px;
  padding:20px 18px 16px;
  border-radius:22px;
  background:radial-gradient(circle at 0 0,rgba(118,181,255,.55),rgba(9,11,32,.98));
  border:1px solid rgba(176,206,255,.9);
  box-shadow:0 26px 90px rgba(0,0,0,1);
  backdrop-filter:blur(20px);
}

.platform-glass h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:10px;
}

.kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:6px;
}

.kpi{
  position:relative;
  padding:10px 10px 8px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(5,9,40,.95));
  border:1px solid rgba(154,187,255,.75);
  box-shadow:0 16px 48px rgba(0,0,0,.95);
  cursor:pointer;
  transform:translateZ(0);
  transition:
    transform .22s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease;
}

.kpi::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0 0,rgba(255,255,255,.35),transparent 55%);
  opacity:.12;
  pointer-events:none;
}

.kpi:hover{
  transform:translate3d(0,-6px,16px);
  box-shadow:0 22px 60px rgba(42,118,255,.85);
  border-color:rgba(205,222,255,.95);
}

.kpi.active{
  background:linear-gradient(130deg,#6b77ff,#48e2ff);
  border-color:#d8f0ff;
  box-shadow:0 0 30px rgba(127,211,255,.9);
}

.kpi-label{
  display:block;
  font-size:11px;
  color:#c1cfff;
}

.kpi-value{
  display:block;
  margin-top:3px;
  font-size:17px;
  font-weight:700;
}

.kpi-trend{
  margin-top:2px;
  font-size:11px;
}

.kpi-up{ color:#79f5c8; }
.kpi-down{ color:#ffc47f; }

.kpi-footnote{
  font-size:11px;
  color:#d4ddff;
}

/* ==================================================
   垂直應用情境
================================================== */
.its-scenarios{
  padding:70px 0 50px;
}

.scenario-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:26px;
}

.scenario-card{
  position:relative;
  padding:18px 16px 16px;
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(6,10,34,.98));
  border:1px solid rgba(143,168,255,.6);
  backdrop-filter:blur(16px);
  box-shadow:0 22px 60px rgba(0,0,0,.97);
  font-size:13px;
  color:#d7e0ff;
  overflow:hidden;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.scenario-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 0 0,rgba(103,182,255,.28),transparent 55%);
  opacity:.2;
}

.scenario-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0,rgba(255,255,255,.2) 45%,transparent 100%);
  transform:translateX(-130%);
  opacity:0;
}

.scenario-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 72px rgba(34,118,255,.9);
  border-color:rgba(198,214,255,.96);
}

.scenario-card:hover::after{
  opacity:1;
  transform:translateX(130%);
  transition:transform .6s ease-out,opacity .4s ease-out;
}

.scenario-card h3{
  font-size:15px;
  font-weight:700;
  margin-bottom:6px;
  color:#f6f7ff;
}

.scenario-card h3 i{
  margin-right:6px;
  color:#4fe2ff;
}

.scenario-card p{
  margin-bottom:6px;
  line-height:1.8;
}

.scenario-card ul{
  padding-left:18px;
  font-size:12px;
}

/* ==================================================
   Projects + CTA
================================================== */
.its-projects-cta{
  padding:66px 0 78px;
}

.projects-layout{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr);
  gap:40px;
  align-items:flex-start;
}

.projects-copy .section-title{
  color:#f7f8ff;
}

.projects-copy .section-desc{
  color:#c6d1ff;
  margin-left:0;
}

.projects-list{
  margin-top:14px;
  padding-left:18px;
  font-size:13px;
  color:#d6dfff;
  line-height:1.9;
}

.cta-panel{
  padding:20px 22px 18px;
  border-radius:24px;
  background:radial-gradient(circle at 0 0,rgba(116,186,255,.5),rgba(5,8,32,.98));
  border:1px solid rgba(184,214,255,.95);
  box-shadow:0 30px 96px rgba(0,0,0,1);
  backdrop-filter:blur(20px);
}

.cta-panel h3{
  font-size:18px;
  margin-bottom:6px;
}

.cta-panel p{
  font-size:13px;
  color:#e0e7ff;
  line-height:1.9;
  margin-bottom:14px;
}

.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.btn-primary,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  transition:
    background .2s ease-out,
    color .2s ease-out,
    border-color .2s ease-out,
    transform .2s ease-out,
    box-shadow .2s ease-out;
}

.btn-primary{
  background:#4fe2ff;
  color:#050816;
  font-weight:600;
  border:1px solid #4fe2ff;
  box-shadow:0 12px 26px rgba(79,226,255,.7);
}

.btn-primary:hover{
  background:#9df0ff;
  border-color:#9df0ff;
  box-shadow:0 18px 40px rgba(143,234,255,.9);
  transform:translateY(-1px);
}

.btn-ghost{
  border:1px solid rgba(174,196,255,.85);
  color:#f4f6ff;
  background:transparent;
}

.btn-ghost:hover{
  background:rgba(169,190,255,.2);
  box-shadow:0 14px 32px rgba(99,137,255,.7);
  transform:translateY(-1px);
}

/* ==================================================
   RWD
================================================== */
@media (max-width:1024px){
  .hero-layout,
  .platform-layout,
  .projects-layout{
    grid-template-columns:minmax(0,1fr);
  }
  .hero-metrics{ margin-top:20px; }
  .platform-panel{ margin-top:18px; }
}

@media (max-width:900px){
  .overview-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .modules-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .scenario-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:640px){
  .its-hero{ padding-top:52px; }
  .hero-layout{ gap:26px; }
  .hero-title{ font-size:24px; }
  .hero-metrics{
    grid-template-columns:minmax(0,1fr);
  }
  .scenario-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ==================================================
   M2：Fog Layer（霧化雲層）
================================================== */
.fog-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('img/fog.png') repeat;
  opacity: 0.25;
  animation: fogMove 60s linear infinite;
  mix-blend-mode: screen;
}

@keyframes fogMove {
  0% { background-position: 0 0; }
  100% { background-position: -2000px 0; }
}

/* ==================================================
   M3：Particle Field（粒子場）
================================================== */
.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #7f9cff 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(2px);
  animation: particleFloat 12s ease-in-out infinite;
}

@keyframes particleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-80px) scale(1.4); opacity: 0.8; }
  100% { transform: translateY(0) scale(1); opacity: 0.3; }
}
/* ==================================================
 M4：Slow Beams（光束）
================================================== */
.beam-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.beam {
  position: absolute;
  width: 180px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6ea8ff, transparent);
  opacity: 0.25;
  filter: blur(4px);
  animation: beamMove 12s linear infinite;
}

@keyframes beamMove {
  0% { transform: translateX(-20%) translateY(var(--y)); }
  100% { transform: translateX(120%) translateY(var(--y)); }
}
/* ==================================================
M5：透明玻璃卡片（Glass Card）
================================================== */
.glass-card {
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 30px rgba(180,150,255,0.08),
              0 6px 30px rgba(0,0,0,0.35);
  transition: 0.35s ease;
}
/* ==================================================
M6：卡片互動 → 點擊變色 + 浮動立體
================================================== */
.glass-card.active {
  border-color: #5e8dff;
  box-shadow:
    0 0 24px #4062ff88,
    0 12px 40px rgba(0,0,0,0.4);
  transform: translateY(-6px) scale(1.02);
}
/* ==================================================
M7：Icon Neon Badge（霓光徽章）
================================================== */

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120,140,255,0.18);
  border: 1px solid rgba(180,180,255,0.25);
  backdrop-filter: blur(14px);
  box-shadow:
    0 0 18px #7a8bff99,
    inset 0 0 12px #b8c2ff33;
  color: #dfe6ff;
  font-size: 22px;
}
/*==========================
 M8：ViDA.ai 城市＋雲動畫
==========================*/
.vida-cloud-scene {
  position: relative;
  height: 320px;
}

.cityline {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 140px;
  background: url("img/cityline.svg") center/contain repeat-x;
  opacity: 0.45;
  animation: cityFloat 12s ease-in-out infinite;
}

@keyframes cityFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.city-fog {
  position: absolute;
  inset: 0;
  background: url("img/fog.png") repeat-x;
  opacity: 0.25;
  animation: fogSlide 40s linear infinite;
}

.city-beams .beam {
  position: absolute;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #67a1ff, transparent);
  opacity: 0.3;
  animation: beamSlide 10s linear infinite;
}


/* ===============================
   HERO GRID
================================ */
.its-hero-inner{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:48px;
  align-items:center;
}

@media(max-width:900px){
  .its-hero-inner{
    grid-template-columns:1fr;
  }
}

/* ===============================
   RIGHT CANVAS PANEL
================================ */
.vidaware-canvas-wrap{
  position:relative;
  width:100%;
  max-width:520px;
  min-height:320px;
  border-radius:26px;
  background:radial-gradient(circle at 10% 0%,#dbeafe 0,rgba(255,255,255,.92) 45%,#e5edff 100%);
  padding:14px;
  box-shadow:0 24px 60px rgba(15,23,42,.25);
  overflow:hidden;
}

#vidawareCanvas{
  width:100%;
  height:100%;
  display:block;
  border-radius:20px;
}

/* ===============================
   CANVAS TITLE
================================ */
.canvas-title{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  align-items:baseline;
  gap:10px;

  padding:10px 18px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  color:#e5e7eb;
  box-shadow:0 18px 40px rgba(15,23,42,.65);

  pointer-events:none;   /* 不要擋滑鼠滑過 tilt */
}

.canvas-title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;0.

  box-shadow:0 0 0 6px rgba(34,197,94,.3);
  flex-shrink:0;
}

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

.canvas-title h4{
  font-size:.78rem;
  font-weight:700;
  margin:0;
  color:#bfdbfe;
}

.canvas-title p{
  font-size:.72rem;
  margin:0;
  color:#9ca3af;
  white-space:nowrap;
}

/* ===============================
   HERO TAG ACTIVE
================================ */
.hero-tag.active{
  background:#4DA3FF;
  color:#fff;
}


/* ===============================
   BLUEPRINT
================================ */
*{box-sizing:border-box;}
body{
  margin:0;
  background: radial-gradient(circle at top,#eef2ff,#f7f9ff);
  font-family: -apple-system, BlinkMacSystemFont, "Inter","Noto Sans TC",sans-serif;
  color:var(--text-main);
}

.orchestrator{
  display:grid;
  grid-template-columns: 280px 1fr 280px;
  align-items: center;          /* 關鍵：垂直對齊 */
  gap: 32px;
  grid-template-rows: 1fr 180px; 
  padding:24px;
  height:100vh;  
}

/* 左右 panel 垂直置中 */
.orchestrator .panel.left,
.orchestrator .panel.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

/* 中央 panel 固定高度，讓 canvas 有參考 */
.orchestrator .panel.center {
  position: relative;
  height: 420px;                /* 關鍵：不要 auto */
}

/* Canvas 撐滿中間 */
#orchestratorCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* GLASS PANEL */
.panel{
  background:var(--glass-bg);
  backdrop-filter: blur(22px);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}

/* LEFT */
.left h4{
  font-size:13px;
  letter-spacing:.12em;
  opacity:.6;
}
.stream-card{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--glass-border);
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}
.stream-card .tag{
  float:right;
  font-size:10px;
  background:#eef2ff;
  padding:2px 8px;
  border-radius:999px;
}
.stream-card small{
  display:block;
  opacity:.6;
  margin-top:4px;
}

.stream-icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}

/* 類型配色（與 Pod / GPU 對齊） */
.stream-icon.face{
  color:#4DA3FF;
  box-shadow:0 0 12px rgba(77,163,255,.35);
}
.stream-icon.beh{
  color:#3BC9A9;
  box-shadow:0 0 12px rgba(59,201,169,.35);
}
.stream-icon.lpr{
  color:#8B7CFF;
  box-shadow:0 0 12px rgba(139,124,255,.35);
}

/* 文字 */
.stream-text{
  line-height:1.3;
}

/* Hover 強化（會和 Canvas 動畫呼應） */
.stream-card:hover .stream-icon{
  box-shadow:
    0 0 0 1px currentColor,
    0 0 18px currentColor;
  transform:translateY(-1px);
  transition:.25s ease;
}

/* CENTER */
.center{
  position:relative;
}
#orchestratorCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%; 
  z-index: 1;
}
.policy-box{
  position:relative;
  z-index: 5;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.65);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding:10px 18px;
  font-size:12px;
  text-align:center;
}

.policy-box,
.orchestrator .panel.center > small {
  position: relative;
  z-index: 5;
}

/* RIGHT */
.res-card{
  position: relative;
  padding: 14px 16px 16px 18px;
  margin-bottom: 14px;

  background: rgba(10, 9, 22, 0.774);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 12px 32px rgba(0,0,0,.55);

  font-family: "Inter","IBM Plex Sans","JetBrains Mono",sans-serif;
}

/* 左側節點識別色條 */
.res-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:3px;
  height:100%;
  background:#4DA3FF;
}

/* GPU / NPU / CPU 顏色 */
.res-card.gpu::before{ background:#4DA3FF; }
.res-card.cpu::before{ background:#9CA3AF; }
.res-card.npu::before{ background:#A855F7; }

/* 標題列 */
.res-card h5{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:0 0 6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  color:#e5e7eb;
  text-transform:uppercase;
}

/* 子標 */
.res-card small{
  display:block;
  font-size:11px;
  color:#9ca3af;
  margin-bottom:8px;
}

/* 架構 Tag（x86 / CUDA / ARM） */
.res-card .arch{
  font-size:10px;
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:2px;
  color:#e5e7eb;
  letter-spacing:.06em;
}
/* =========================================
   PROGRESS BAR
========================================= */

.res-card .bar{
  position:relative;
  height:6px;
  margin-top:8px;

  background:rgba(255,255,255,.08);
  border-radius:2px;
  overflow:hidden;
}

.res-card .bar span{
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:40%;

  background:#4DA3FF;
  box-shadow:0 0 10px rgba(77,163,255,.65);

  transition: width .6s ease, background .4s ease;
}

/* GPU */
.res-card.gpu .bar span{
  background:#4DA3FF;
}

/* NPU */
.res-card.npu .bar span{
  background:#A855F7;
  box-shadow:0 0 10px rgba(168,85,247,.65);
}

/* =========================================
   LOAD TEXT（右側百分比）
========================================= */

.res-card .load-text{
  position:absolute;
  right:14px;
  bottom:16px;

  font-size:11px;
  color:#e5e7eb;
  letter-spacing:.05em;
}

/* =========================================
   HIGH LOAD / OVERLOAD
========================================= */

.res-card.hot .bar span{
  background:#f59e0b;
  box-shadow:0 0 14px rgba(245,158,11,.8);
}

.res-card.overload .bar span{
  background:#ef4444;
  box-shadow:0 0 16px rgba(239,68,68,.9);
}

.res-card.overload{
  border-color:rgba(239,68,68,.6);
}

.bar{
  height:6px;
  border-radius:999px;
  background:#e6ebff;
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,var(--blue),#7fb7ff);
  transition:width .8s ease;
}
.bar.purple span{
  background:linear-gradient(90deg,var(--purple),#b6a9ff);
}

/* BOTTOM */
.bottom{
  grid-column:1/4;
}
#tpsCanvas{
  width:100%;
  height:100%;
}

.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;
}

#orchestratorCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

.policy-box{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.65);
  border-radius:14px;
  padding:10px 18px;
  font-size:12px;
  text-align:center;
}


/* ===== 高權重 Pod 金色描邊 ===== */
.pod-priority{
  stroke: #FFD36A;
  stroke-width: 1.5;
}

/* ===== Mobile GPU Gauge ===== */
@media(max-width: 900px){
  .right .res-card{ display:none; }

  .gpu-gauge{
    position:relative;
    width:160px;
    height:160px;
    margin:20px auto 0;
  }
}

/* ===== Legend 解說模式 ===== */
.legend-panel{
  position:absolute;
  right:250px;
  bottom:20px;
  width:200px;
  padding:5px 18px;
  border-radius:14px;
  background:rgba(10,14,35,.85);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  font-size:12px;
  color:#cdd6ff;
}

.legend-panel h4{
  font-size:13px;
  margin-bottom:10px;
  color:#fff;
}

.legend-item{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  opacity:.75;
  cursor:pointer;
}

.legend-item:hover{
  opacity:1;
}

.legend-item .dot{
  width:8px;
  height:8px;
  border-radius:50%;
}

.dot.face{background:#8B7CFF}
.dot.core{background:#4DA3FF}
.dot.gpu{background:#8B7CFF}
.dot.cpu{background:#3BC9A9}
.dot.alert{background:#FF6A6A}


body[data-focus="gpu"] .res-card.gpu{
  box-shadow:0 0 28px rgba(139,124,255,.8);
}

/* ===== GPU 卡片動畫（關鍵 ===== */
.res-card.gpu.scale-out{
  animation: gpuScale 1.2s ease infinite;
}

@keyframes gpuScale{
  0%{ box-shadow:0 0 18px rgba(255,100,100,.6); }
  50%{ box-shadow:0 0 42px rgba(255,120,120,.9); }
  100%{ box-shadow:0 0 18px rgba(255,100,100,.6); }
}

/* ===== 點選卡片 → 光暈效果（Stream / CPU / GPU / NPU）===== */
.card-glow{
  box-shadow:
    0 0 0 1px rgba(120,160,255,.35),
    0 0 28px rgba(120,160,255,.8);
  transform: translateY(-2px);
}

.card-glow-gpu{
  box-shadow:
    0 0 0 1px rgba(160,120,255,.4),
    0 0 34px rgba(160,120,255,.9);
}

.card-glow-npu{
  box-shadow:
    0 0 0 1px rgba(120,255,200,.35),
    0 0 28px rgba(120,255,200,.8);
}

/* ===== 單一 Pod 詳細資訊浮層===== */
.pod-detail{
  position:absolute;
  min-width:220px;
  padding:14px 16px;
  border-radius:12px;
  background:rgba(15,18,40,.92);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  font-size:12px;
  color:#e6ebff;
  display:none;
  z-index:50;
}

.pod-detail h4{
  margin-bottom:8px;
  font-size:13px;
}

/* =====背景 Grid「呼吸感」===== */
.orchestrator::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.64) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.54) 1px, transparent 1px);
  background-size:32px 32px;
  animation:gridPulse 8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes gridPulse{
  0%,100%{opacity:.35;}
  50%{opacity:.55;}
}

/* =====Scheduler 外圈「狀態語意化」===== */
.scheduler-core{
  box-shadow:
    0 0 0 1px rgba(120,200,255,.6),
    0 0 30px rgba(120,200,255,.25);
  transition:box-shadow .4s ease;
}

body[data-overload="true"] .scheduler-core{
  box-shadow:
    0 0 0 1px rgba(180,120,255,.8),
    0 0 45px rgba(180,120,255,.5);
}

/* =====stream-card / res-card Hover 光暈===== */
.stream-card:hover,
.res-card:hover{
  box-shadow:
    0 0 0 1px rgba(120,200,255,.8),
    0 0 28px rgba(120,200,255,.35);
}

/* ==GPU 100% → 紅色 VRAM Bar=== */
.res-card.gpu.overload{
  box-shadow:
    0 0 0 1px rgba(255,90,90,.9),
    0 0 40px rgba(255,90,90,.55);
}

.res-card.gpu.overload h5{
  color:#ff6b6b;
}

.bar.red span{
  background:linear-gradient(
    90deg,
    #ff6b6b,
    #ff2d2d
  );
}

/* ==Scheduler 進入「急促狀態」（白圈強化）=== */
body[data-overload="true"] .scheduler-core{
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 60px rgba(255,255,255,.6);
}

/* ==SVG=== */
.ch-btn.alert svg {
  color: #ff6b6b;
  filter: drop-shadow(0 0 6px rgba(255,107,107,.45));
}

/* ==Notification 系統化關鍵=== */
.notify{
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(20px);
  border:1px solid rgba(120,150,255,.25);
  border-radius:18px;
  padding:16px;
}

.notify-hd{
  font-size:11px;
  letter-spacing:.14em;
  opacity:.6;
  margin-bottom:10px;
}

/* ==主告警（Critical）=== */
.alarm{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(255,120,120,.35);
}

.alarm.active{
  box-shadow:0 0 0 0 rgba(255,90,90,.6);
  animation: alarmPulse 1.6s infinite;
}

@keyframes alarmPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,90,90,.5); }
  70%{ box-shadow:0 0 0 14px rgba(255,90,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,90,90,0); }
}

/* ==通知通道（Line / E-mail）=== */
.channels{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.ch-btn{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(120,150,255,.25);
  font-size:12px;
  cursor:pointer;
  position:relative;
  transition:.3s;
}

.ch-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
}

/* ==狀態語意=== */
.ch-btn.realtime{
  color:#4da3ff;
}

.ch-btn.log{
  color:#6b7280;
}

.ch-btn.active{
  background:linear-gradient(145deg,#eef3ff,#ffffff);
  box-shadow:0 8px 20px rgba(90,120,255,.25);
}

/* ==即時狀態點（Line Live）=== */
.ico-wrap{
  position:relative;
  display:grid;
  place-items:center;
}

.dot.live{
  position:absolute;
  right:-3px;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4da3ff;
  box-shadow:0 0 6px rgba(77,163,255,.9);
}

/* ===============================
   VIDAWARE – Advantage Modules
=============================== */

.its-advantage{
  margin-top: 80px;
  position: relative;
}

/* ---------- Core Advantage Cards ---------- */
.adv-core-grid{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
  margin-top: 48px;
}

@media (max-width: 1100px){
  .adv-core-grid{ grid-template-columns: 1fr; }
}

.adv-card{
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px 22px 26px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}

.adv-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,.45);
}

.adv-card.highlight{
  border-color: rgba(153,102,255,.45);
  box-shadow: 0 0 0 1px rgba(153,102,255,.15),0 30px 70px rgba(153,102,255,.25);
}

.adv-media{
  height: 170px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 20%,rgba(120,160,255,.25),transparent 60%);
  margin-bottom: 18px;
  overflow: hidden;
}

.adv-media img{
  width:100%;height:100%;
  object-fit: cover;
  opacity:.9;
}

.adv-card h3{
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.adv-card p{
  font-size: 14px;
  line-height: 1.7;
  color: #cfd6ff;
}

/* ---------- Tenant Weight Panel ---------- */
.adv-tenant{
  margin-top: 90px;
}

.adv-section-title{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.adv-section-desc{
  color:#aab2ff;
  font-size:14px;
  margin-bottom: 28px;
}

.tenant-panel{
  background: linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 26px;
}

.tenant-bar{
  position: relative;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  background: rgba(255,255,255,.06);
  margin-bottom: 26px;
}

.tenant-bar .seg{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
}

.seg.r{background:#5b7cfa;width:44%;}
.seg.s{background:#9a63ff;width:38%;}
.seg.d{background:#e07a33;width:50%;}

.tenant-bar .total{
  position:absolute;
  right:14px;top:50%;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:800;
  color:#ff6b6b;
}

/* ---------- Tenant Sliders ---------- */
.tenant-item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items:center;
  margin-top: 18px;
}

.tenant-item label{
  font-size:14px;
}

.tag.high{
  background: rgba(153,102,255,.2);
  color:#cdb8ff;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  margin-left:6px;
}

.slider{
  grid-column: 1 / -1;
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow:hidden;
}

.slider span{
  position:absolute;
  top:50%;
  width:14px;height:14px;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px rgba(255,255,255,.15);
}

.tenant-item em{
  font-style: normal;
  font-weight:700;
  color:#9fd1ff;
}

/* ---------- L3 Management ---------- */
* { box-sizing: border-box; }

.l3-layer{
  max-width:1200px;
  margin:80px auto;
  padding:80px 0;
  position: relative;   /* ★ 關鍵 */
  overflow: hidden;     /* ★ 防止線條外溢 */
}

.block-title{
  position: relative;
  padding-left:18px;
  font-size:28px;
  font-weight:800;
  color:#1e2a55; 
  display:flex;
  gap:12px;
  align-items:center;
}

.block-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:28px;   /* ★ 固定高度 */
  border-radius:3px;
  background:#7aa2ff;
  pointer-events:none;
}

.l3-layer + section::before{
  display:none;
}

.block-sub{
  color:#6b78a8;
  margin:8px 0 40px;
}

.block-sub{
  opacity:.7;
  margin-bottom:36px;
}

.l3-layout{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:32px;
}


.adv-l3{
  margin-top: 90px;
}

.adv-l3 .badge{
  display:inline-block;
  background:#7c5cff;
  color:#fff;
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:10px;
}

.l3-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:18px;
  margin-top:40px;
}

.l3-card {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(255,255,255,.72)
  );
  border-radius: 18px;
  padding: 22px;
  color: #1e2a55;
  box-shadow: 0 20px 50px rgba(40,60,120,.18);
  cursor: pointer;
  transition: .35s;
}

.l3-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(80,120,255,.35);
}

.l3-card i {
  font-size: 24px;
  color: #4f6cff;
  margin-bottom:10px;
}  

.l3-card.sec{border-left:4px solid #45d483}
.l3-card.ten{border-left:4px solid #f0b44c}
.l3-card.alarm{border-left:4px solid #6cb4ff}
.l3-card h4{color:#010425;margin-bottom:6px;}
.l3-card p{color:#37367c;}

.l3-card.wide{
  grid-row: span 2;
}

.chart-placeholder{
  margin-top:18px;
  height:220px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(120,160,255,.25),transparent),
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.08),
      rgba(255,255,255,.08) 1px,
      transparent 1px,
      transparent 24px
    );
}

/* ============================
   現場與 AI 導入 – layout
============================ */
.ai-case-section{
  padding: 80px 0 96px;
  background: radial-gradient(circle at top,#eef2ff 0,#f8fafc 38%,#f9fafb 100%);
}

.ai-case-shell{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Head */
.ai-case-head{
  text-align: center;
  margin-bottom: 32px;
}

.ai-case-pill-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  backdrop-filter:blur(18px);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#64748b;
}

.ai-case-pill-icon{
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#4f46e5,#818cf8);
  color:#eef2ff;
  font-size:.65rem;
}

.ai-case-title{
  margin-top:18px;
  font-size:32px;
  letter-spacing:.08em;
  font-weight:800;
  color:#0f172a;
}

.ai-case-title-ai{
  color:#4f46e5;
  text-shadow:0 0 18px rgba(79,70,229,.32);
}

.ai-case-subtitle{
  margin-top:10px;
  font-size:.95rem;
  color:#6b7280;
}

/* Filters */
.ai-case-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin:26px auto 26px;
}

.ai-case-filter-btn{
  border:none;
  outline:none;
  cursor:pointer;
  padding:7px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:
    0 14px 40px rgba(15,23,42,.08),
    0 0 0 1px rgba(148,163,184,.32);
  backdrop-filter:blur(18px);
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.8rem;
  color:#4b5563;
  transition:background .22s ease, box-shadow .22s ease, transform .18s ease, color .22s ease;
}

.ai-case-filter-btn .ai-case-filter-ico{
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(79,70,229,.08);
  color:#4f46e5;
  font-size:.7rem;
}

.ai-case-filter-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 45px rgba(15,23,42,.12),
    0 0 0 1px rgba(129,140,248,.4);
}

.ai-case-filter-btn.is-active{
  background:linear-gradient(135deg,#4f46e5,#6366f1);
  color:#f9fafb;
  box-shadow:
    0 20px 55px rgba(79,70,229,.45),
    0 0 0 1px rgba(191,219,254,.85);
}

.ai-case-filter-btn.is-active .ai-case-filter-ico{
  background:rgba(15,23,42,.08);
  color:#e5e7eb;
}

/* Scroller */
.ai-case-scroller-wrap{
  margin-top:8px;
  padding-top:8px;
}

.ai-case-scroller{
  display:flex;
  gap:18px;
  overflow-x:auto;
  padding-bottom:12px;
  scroll-snap-type:x mandatory;
}

.ai-case-scroller::-webkit-scrollbar{
  height:6px;
}
.ai-case-scroller::-webkit-scrollbar-track{
  background:transparent;
}
.ai-case-scroller::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.6);
  border-radius:999px;
}

/* Cards */
.ai-case-card{
  flex:0 0 320px;
  max-width:320px;
  background:rgba(255,255,255,.9);
  border-radius:24px;
  box-shadow:
    0 20px 60px rgba(15,23,42,.16),
    0 0 0 1px rgba(226,232,240,.9);
  backdrop-filter:blur(22px);
  overflow:hidden;
  scroll-snap-align:start;
  transform-origin:center bottom;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
}

.ai-case-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(129,140,248,.16),transparent 45%,rgba(59,130,246,.12));
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}

.ai-case-card:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:
    0 26px 80px rgba(15,23,42,.24),
    0 0 0 1px rgba(191,219,254,.9);
}

.ai-case-card:hover::before{
  opacity:1;
}

/* Thumbnail */
.ai-case-thumb{
  position:relative;
  height:190px;
  overflow:hidden;
}

.ai-case-thumb-img{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.04);
  filter:brightness(.97) contrast(1.02) saturate(1.05);
  transition:transform .6s ease;
}

.ai-case-card:hover .ai-case-thumb-img{
  transform:scale(1.08);
}

/* ============================
   Play Button：半透 YouTube 風
============================ */
.ai-case-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:88px;
  height:56px;
  border-radius:20px;
  border:1px solid rgba(148, 163, 184, 0.344);
  background:rgba(15, 23, 42, 0.103);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 18px 50px rgba(48, 51, 56, 0.65),
    0 0 0 1px rgba(58, 62, 72, 0.35);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

/* 內部 YouTube 紅色膠囊 */
.ai-case-play-icon{
  position:relative;
  width:52px;
  height:36px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ef4444,#f97373);
  box-shadow:
    0 8px 18px rgba(248,113,113,.7),
    0 0 0 1px rgba(248,250,252,.22);
  color:#fff;
  font-size:1.1rem;
}

/* 三角形 icon 微調，接近 YouTube 視覺 */
.ai-case-play-icon i{
  margin-left:2px;
}

/* 外圈半透明波紋 */
.ai-case-play-pulse{
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle,
              rgba(248,113,113,.25),
              transparent 65%);
  opacity:.7;
  animation:aiCasePlayRing 1.9s ease-out infinite;
}

/* hover 狀態：略放大＋更亮 */
.ai-case-play:hover{
  transform:translate(-50%, -50%) scale(1.05);
  background:rgba(15,23,42,.55);
  border-color:rgba(248,250,252,.85);
  box-shadow:
    0 24px 60px rgba(15,23,42,.75),
    0 0 0 1px rgba(191,219,254,.9);
}

/* 波紋動畫 */
@keyframes aiCasePlayRing{
  0%{
    transform:scale(.7);
    opacity:.85;
  }
  70%{
    transform:scale(1.25);
    opacity:0;
  }
  100%{
    transform:scale(1.4);
    opacity:0;
  }
}

@keyframes aiCasePlayPulse{
  0%{ transform:scale(.6); opacity:.8; }
  70%{ transform:scale(1.3); opacity:0; }
  100%{ transform:scale(1.45); opacity:0; }
}

/* Duration tag */
.ai-case-duration{
  position:absolute;
  right:10px;
  bottom:10px;
  padding:3px 8px;
  border-radius:999px;
  font-size:.72rem;
  background:rgba(15,23,42,.86);
  color:#e5e7eb;
  box-shadow:0 10px 25px rgba(15,23,42,.7);
}

/* Body */
.ai-case-body{
  padding:16px 18px 18px;
}

.ai-case-name{
  font-size:.95rem;
  font-weight:700;
  color:#111827;
  line-height:1.4;
}

.ai-case-tag-prefix{
  color:#4b5563;
  font-weight:600;
}

.ai-case-meta{
  margin-top:8px;
  font-size:.78rem;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color:#6b7280;
}

.ai-case-meta-item i{
  margin-right:4px;
  color:#4f46e5;
}

.ai-case-meta-dot{
  opacity:.5;
}

/* Tip text */
.ai-case-tip{
  margin-top:18px;
  text-align:right;
  font-size:.78rem;
  color:#9ca3af;
}

.ai-case-tip-icon{
  display:inline-flex;
  width:16px;
  height:16px;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:rgba(248,113,113,.08);
  color:#f97316;
  font-size:.7rem;
}

/* Hidden card when filter 不符合 */
.ai-case-card.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(10px) scale(.97);
}

/* RWD */
@media (max-width: 960px){
  .ai-case-section{
    padding:64px 0 80px;
  }
  .ai-case-card{
    flex:0 0 82%;
    max-width:82%;
  }
}

@media (max-width: 640px){
  .ai-case-card{
    flex-basis:88%;
    max-width:88%;
  }
}

/* ===========================
   DBS Simulator Section
   命名全部以 dbs-sim-* 開頭
=========================== */

.dbs-sim{
  padding: 96px 0 110px;
  background:
    radial-gradient(circle at 0 0, #e0f2ff 0, rgba(224,242,255,0) 40%),
    radial-gradient(circle at 100% 100%, #e0e7ff 0, rgba(224,231,255,0) 45%),
    #f5f6fb;
}

.dbs-sim-shell{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Noto Sans TC", sans-serif;
}

.dbs-sim-header{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 32px;
}

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

.dbs-sim-title{
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.dbs-sim-desc{
  font-size: 14px;
  line-height: 1.8;
  color: #6b7280;
}

/* ---- 主 Panel ---- */

.dbs-sim-panel{
  margin-top: 24px;
  border-radius: 32px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow:
    0 26px 80px rgba(15,23,42,0.15),
    0 0 0 1px rgba(148,163,184,0.2);
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1.1fr) minmax(0, 290px);
  column-gap: 24px;
  padding: 28px 32px 30px;
  position: relative;
  overflow: hidden;
}

.dbs-sim-col{
  position: relative;
  z-index: 2;
}

.dbs-sim-col-title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 16px;
}

/* ---- 左右卡片 ---- */

.dbs-sim-card{
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(145deg,#ffffff,#f5f7fb);
  border: 1px solid rgba(148,163,184,0.25);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.dbs-sim-card + .dbs-sim-card{
  margin-top: 12px;
}

.dbs-sim-card-ico{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* Icon 色系 */
.badge-traffic{
  background: radial-gradient(circle at 30% 20%,#c4d4ff 0,#4f46e5 60%);
  box-shadow: 0 0 0 1px rgba(79,70,229,0.45);
}
.badge-ai{
  background: radial-gradient(circle at 30% 20%,#fed7e2 0,#db2777 60%);
  box-shadow: 0 0 0 1px rgba(219,39,119,0.5);
}
.badge-iot{
  background: radial-gradient(circle at 30% 20%,#bbf7d0 0,#16a34a 60%);
  box-shadow: 0 0 0 1px rgba(22,163,74,0.5);
}

.dbs-sim-card-ico span{
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
}

/* 卡片文字 */
.dbs-sim-card-body h3{
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.dbs-sim-card-body p{
  font-size: 12px;
  margin-top: 2px;
  color: #6b7280;
}

/* 左側為 button */
.dbs-sim-source{
  border: none;
  background: none;
  padding: 0;
}

.dbs-sim-source.dbs-sim-card{
  transition: transform .22s ease, box-shadow .22s ease,
              border-color .22s ease, background .22s ease;
  cursor: pointer;
}

.dbs-sim-source.is-active{
  transform: translateY(-3px);
  border-color: rgba(56,189,248,0.9);
  box-shadow:
    0 22px 46px rgba(59,130,246,0.28),
    0 0 0 1px rgba(59,130,246,0.25);
  background: linear-gradient(145deg,#f9fbff,#eef5ff);
}

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

/* ---- 中央 Core ---- */

.dbs-sim-col-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.dbs-sim-center-inner{
  position: relative;
  width: 100%;
  max-width: 420px;
  min-height: 320px;
}

/* Canvas 用來畫弧線 */
#dbsSimCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* DBS 圓形玻璃卡 */
.dbs-sim-core-chip{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.dbs-sim-core-circle{
  width: 188px;
  height: 188px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 15%,#ffffff 0,#f2f5ff 40%,#e5edff 100%);
  box-shadow:
    0 30px 70px rgba(15,23,42,0.2),
    0 0 0 1px rgba(148,163,184,0.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position: relative;
  overflow: hidden;
}

.dbs-sim-core-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #1d4ed8;
}

.dbs-sim-core-sub{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-top: 4px;
}

.dbs-sim-core-note{
  font-size: 11px;
  color: #6b7280;
  margin-top: 10px;
  white-space: nowrap;
}

/* 內部光暈 */
.dbs-sim-core-pulse{
  position:absolute;
  inset:24%;
  border-radius:999px;
  border:1px solid rgba(129,140,248,0.7);
  box-shadow: 0 0 30px rgba(129,140,248,0.7);
  opacity:0.35;
  animation: dbsCorePulse 3s ease-out infinite;
}

@keyframes dbsCorePulse{
  0%{ transform: scale(0.8); opacity:0.6; }
  70%{ transform: scale(1.1); opacity:0; }
  100%{ transform: scale(1.15); opacity:0; }
}

/* 自動模擬開關 */

.dbs-sim-play-toggle{
  position:absolute;
  bottom: 18px;
  right: 20px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 11px;
  color: #4b5563;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(15,23,42,0.15);
  z-index:3;
}

.dbs-sim-play-toggle:hover{
  border-color:#60a5fa;
}

.dbs-sim-play-dot{
  width: 9px;
  height: 9px;
  border-radius:999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.25);
  transition: background .2s ease, box-shadow .2s ease;
}

.dbs-sim-play-toggle.is-paused .dbs-sim-play-dot{
  background:#9ca3af;
  box-shadow:none;
}

/* ---- 右側事件 ---- */

.dbs-sim-event-list .dbs-sim-card{
  cursor:default;
}

.dbs-sim-tag{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius:999px;
  background: rgba(239,246,255,0.9);
  color:#1d4ed8;
  font-size:10px;
  font-weight:600;
  margin-bottom:4px;
}

.dbs-sim-card[data-source="ai"] .dbs-sim-tag{
  background: rgba(252,231,243,0.95);
  color:#be185d;
}
.dbs-sim-card[data-source="iot"] .dbs-sim-tag{
  background: rgba(220,252,231,0.95);
  color:#15803d;
}

.dbs-sim-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#e5e7eb;
  overflow:hidden;
  margin-top:8px;
}

.dbs-sim-bar-fill{
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4f46e5,#22c55e);
}

.dbs-sim-metric{
  margin-top:6px;
  font-size:11px;
  color:#6b7280;
}

/* 高亮中的事件：條件動畫更誇張 */
.dbs-sim-event.is-highlight{
  box-shadow:
    0 22px 46px rgba(56,189,248,0.28),
    0 0 0 1px rgba(37,99,235,0.3);
  border-color:rgba(56,189,248,0.9);
}

.dbs-sim-event.is-highlight .dbs-sim-bar-fill{
  animation: dbsSimBarFlow 2.2s ease-in-out infinite;
}

@keyframes dbsSimBarFlow{
  0%  { width:0; }
  45% { width:100%; }
  100%{ width:40%; }
}

/* ---- RWD ---- */

@media (max-width: 1024px){
  .dbs-sim-panel{
    grid-template-columns: minmax(0,1fr);
    row-gap: 22px;
  }
  .dbs-sim-col-center{
    order:-1;
  }
  .dbs-sim-center-inner{
    max-width:none;
    min-height:260px;
  }
}

@media (max-width: 640px){
  .dbs-sim-panel{
    padding: 20px 18px 22px;
    border-radius: 24px;
  }
  .dbs-sim-core-circle{
    width:154px;
    height:154px;
  }
}