/* ===============================
   MRNM OVERVIEW
================================ */
.mrnm-overview{
  padding: 96px 0;
  background: linear-gradient(180deg,#f5f7ff,#ffffff);
}

/* MRNM 左側文字區塊 */
.mrnm-copy{
  transform: translateY(-36px); 
}

.mrnm-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 40px;

  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

/* LEFT */
.mrnm-eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  color:#7c86c7;
}

.mrnm-title{
  font-size:42px;
  line-height:1.15;
  margin:14px 0;
}

.mrnm-title span{
  color:#4f6cff;
}

.mrnm-desc{
  font-size:15px;
  line-height:1.8;
  color:#4b5563;
  max-width:520px;
}

.mrnm-steps{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:28px;
}

.mrnm-step{
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  border:1px solid rgba(180,190,255,.7);
  background: rgba(59,130,246,.18);
  color:#47518b;
  cursor:pointer;

  box-shadow:0 8px 22px rgba(150,170,230,.25);
  transition:.25s;
}

.mrnm-step.active,
.mrnm-step:hover{
  color:#1e3a8a;
  border-color:#6b7cff;
  box-shadow:0 12px 30px rgba(99,102,241,.35);
}

/* RIGHT */
.mrnm-glass-card{
  position:relative;
  height:420px;
  border-radius:32px;
  overflow:hidden;

  background:rgba(255,255,255,.82);
  backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.6);

  box-shadow:
    0 30px 80px rgba(40,60,140,.25),
    inset 0 0 0 1px rgba(255,255,255,.5);
}

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

  background:   
    radial-gradient(120% 90% at 20% 10%,
      rgba(255,255,255,.18),
      transparent 55%),
    
    radial-gradient(80% 60% at 85% 25%,
      rgba(110,140,255,.22),
      transparent 60%),
    
    radial-gradient(60% 50% at 70% 85%,
      rgba(255,210,160,.18),
      transparent 65%),
    
    linear-gradient(180deg,
      #0b1224 0%,
      #070b1a 55%,
      #050814 100%);

  border-radius:26px;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 -40px 80px rgba(0,0,0,.55),
    0 40px 90px rgba(10,15,40,.55);
}

.mrnm-card-badge{
  position:absolute;
  left:16px;
  bottom:16px;

  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);
  padding:12px 16px;
  border-radius:16px;

  box-shadow:0 10px 26px rgba(120,140,210,.25);
}

.mrnm-card-badge strong{
  display:block;
  font-size:14px;
}

.mrnm-card-badge span{
  font-size:12px;
  color:#5b6388;
}

/* iOS Glass 指標卡 */
.mrnm-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:36px;
}

/* ===============================
   MRNM DARK GLASS METRICS
================================ */
.mrnm-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:36px;
}

.mrnm-metric{
  position:relative;
  padding:18px 3px;
  border-radius:18px;
  text-align:center;
  background:
    linear-gradient(145deg,
      rgba(18,24,55,.92),
      rgba(8,12,32,.96));

  backdrop-filter: blur(14px);
  border:1px solid rgba(120,140,255,.25);

  box-shadow:
    0 16px 40px rgba(20,30,80,.45),
    inset 0 0 0 1px rgba(255,255,255,.04);

  color:#e8ecff;
  overflow:hidden;

  transition:transform .35s ease, box-shadow .35s ease;
}

/* 光暈層 */
.mrnm-metric::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(120,160,255,.35),
      transparent 60%);
  opacity:.6;
  filter:blur(40px);
  animation:mrnmGlow 14s ease-in-out infinite alternate;
}

@keyframes mrnmGlow{
  from{ transform:translate(-4%,-2%); }
  to{ transform:translate(4%,3%); }
}

.mrnm-metric:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px rgba(60,80,200,.55);
}

.mrnm-metric .label{
  font-size:12px;
  letter-spacing:.08em;
  color:#aab2ff;
}

.mrnm-metric strong{
  font-size:28px;
  margin-top:6px;
  display:block;
  color:#ffffff;
}

.mrnm-metric span{
  font-size:13px;
  opacity:.75;
}

/* ===============================
   MRNM RWD
================================ */

@media (max-width:1023px){
  .mrnm-wrap{
    grid-template-columns:1fr;
    gap:48px;
  }

  .mrnm-glass-card{
    max-width:560px;
    margin:auto;
  }
}

@media (max-width:767px){
  .mrnm-metrics{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .mrnm-title{
    font-size:32px;
  }
}

@media (max-width:480px){
  .mrnm-metrics{
    grid-template-columns:1fr;
  }

  .mrnm-glass-card{
    height:300px;
    border-radius:24px;
  }
}

/* ===============================
   VIDA MAP v2 (IMAGE BASED)
================================ */
.vida-map2-section{
  padding:80px 0;
  background: radial-gradient(circle at top, #0c1224, #050814);
  color:#eef1ff;
}

.vida-map2-wrap{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:32px;
  padding:0 32px;
}

/* MAP */
.vida-map2-canvas{
  position:relative;
  background:rgba(255,255,255,.04);
  border-radius:28px;
  padding:24px;
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.vida-map2-head h3{margin:0;font-size:22px;}
.vida-map2-head p{margin:6px 0 16px;font-size:13px;color:#9aa6ff;}

.vida-map2-stage{
  position:relative;
  width:100%;
  border-radius:20px;
  overflow:hidden;
}

.vida-map2-stage img{
  width:100%;
  display:block;
  opacity:.9;
}

/* NODE LAYER */
.vida-map2-nodes{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.vida-map2-node{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.node-ok{ background:#7ce3b3; }
.node-alert{
  background:#ff6b6b;
  animation:nodePulse 1.6s infinite;
}
.node-off{ background:#9aa0c6; }

@keyframes nodePulse{
  0%{ box-shadow:0 0 0 0 rgba(255,107,107,.6); }
  70%{ box-shadow:0 0 0 14px rgba(255,107,107,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,107,107,0); }
}

/* FLOAT CARD */
.vida-map2-card{
  position:absolute;
  right:24px;
  top:120px;
  width:240px;
  background:rgba(20,28,58,.92);
  border-radius:18px;
  padding:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  display:none;
}

.vida-map2-card .head{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

.tag.critical{
  background:#ff6b6b;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
}

.vida-map2-card ul{
  list-style:none;
  padding:0;
  margin:10px 0;
  font-size:13px;
}

.vida-map2-card button{
  width:100%;
  border:none;
  border-radius:10px;
  padding:8px;
  background:#ff6b6b;
  color:#fff;
}

/* SUMMARY */
.vida-map2-summary{
  background:rgba(255,255,255,.04);
  border-radius:28px;
  padding:28px;
  backdrop-filter:blur(18px);
}

.vida-map2-ring{
  width:160px;
  height:160px;
  border-radius:50%;
  border:10px solid #7ce3b3;
  margin:24px auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.vida-map2-ring .value{font-size:42px;font-weight:700;}

.vida-map2-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.stat{
  background:rgba(255,255,255,.05);
  border-radius:14px;
  padding:14px;
  text-align:center;
}

.stat.ok{color:#7ce3b3;}
.stat.alert{color:#ff6b6b;}
.stat.off{color:#9aa0c6;}
.stat.health{color:#8cc4ff;}

@media(max-width:1023px){
  .vida-map2-wrap{grid-template-columns:1fr;}
}
/* ====== 區塊命名完全隔離 ====== */
.vida-eqmap{
  padding:64px 0;
  background:radial-gradient(circle at 30% 0,#18233f,#050812);
  color:#e8efff;
}

.vida-eqmap-head{
  max-width:1200px;
  margin:0 auto 24px;
  position:relative;
}

.vida-eqmap-head h2{
  font-size:32px;
  font-weight: 700;
  padding: 5px 32px;
}

.vida-eqmap-head h2 span{
  color: #f0e9a2;
}

.vida-eqmap-head p{
  padding: 5px 32px;
  opacity:.7;
  margin-top:6px;
  font-size:13px;
}

.vida-eqmap-legend{
  position:absolute;right:0;top:4px;font-size:13px;
}
.vida-eqmap-legend span{
  margin-left:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:12px;
  font-size:13px;
}

/* 跳動動畫 */
@keyframes statusBlink{
  0%   { transform:scale(1); opacity:.7 }
  40%  { transform:scale(1.35); opacity:1 }
  100% { transform:scale(1); opacity:.8 }
}

@keyframes statusAlert{
  0%   { box-shadow:0 0 0 0 rgba(239,68,68,.6) }
  70%  { box-shadow:0 0 0 10px transparent }
  100% { box-shadow:0 0 0 0 transparent }
}

.legend-blink{
  animation: statusBlink .6s ease;
}

.legend-alert{
  animation: statusAlert 1.2s ease;
}

.ok{color:#6ee7b7}
.warn{color:#fb7185}
.off{color:#94a3b8}

.vida-eqmap-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:24px;
}

/* Map */
.vida-map-card{
  background:rgba(255,255,255,.04);
  border-radius:24px;
  padding:18px;
  position:relative;
}

.vida-map-wrap{
  position:relative;
  border-radius:18px;
  overflow:hidden;
}

.vida-map-img{
  width:100%;
  display:block;
  opacity:.85;
}

.vida-map-nodes{
  position:absolute;inset:0;
}

.vida-node{
  position:absolute;
  width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);
  animation:pulse 2s infinite;
}

.vida-node.ok{background:#6ee7b7}
.vida-node.warn{background:#fb7185}
.vida-node.off{background:#94a3b8}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 currentColor}
  70%{box-shadow:0 0 0 10px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.vida-map-alert{
  position:absolute;inset:0;
  background:radial-gradient(circle,rgba(255,0,0,.35),transparent 65%);
  opacity:0;
  pointer-events:none;
  transition:.4s;
}

/* Stat */
.vida-stat-card{
  background:rgba(255,255,255,.04);
  border-radius:24px;
  padding:24px;
}

.vida-ring{
  position:relative;width:140px;height:140px;margin:0 auto 16px;
}
.vida-ring svg{width:100%;height:100%;}
.vida-ring circle{fill:none;stroke:#1f2937;stroke-width:10}
#vidaRing{stroke:#6ee7b7;stroke-dasharray:327;stroke-dashoffset:60}

.vida-ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}

.vida-stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;margin-top:16px;
}

.stat{
  background:rgba(255,255,255,.05);
  border: 1px solid rgba(6, 145, 127, 0.7);
  border-radius:14px;padding:14px;font-size:13px;
}
.stat strong{font-size:22px}

.vida-stat-note{
  margin-top:16px;
  font-size:12px;
  opacity:.7;
}

.vida-btn-alert{
  margin-top:14px;
  width:100%;
  background:#ee2a2a75;
  border: 3px solid rgb(197, 17, 4);
  color:#fff;border:0;
  padding:12px;border-radius:12px;
  cursor:pointer;
}

/* RWD */
@media(max-width:900px){
  .vida-eqmap-grid{grid-template-columns:1fr}
}

/* 告警層級 × 漸層呼吸 */
.vida-device-card{
  position:absolute;
  right:18px;
  top:18px;
  width:260px;
  background:rgba(18, 27, 40, 0.76);
  border: 1px solid rgba(6, 145, 127, 0.7);
  border-radius:16px;
  padding:16px;
  color:#e5edff;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  display:none;
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.card-head span{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
}

/* 告警層級 */
.card-head .critical{
  background:linear-gradient(135deg,#ef4444,#7f1d1d);
  animation:alertPulse 1.4s infinite;
}
.card-head .warning{
  background:linear-gradient(135deg,#f59e0b,#92400e);
}
.card-head .ok{
  background:linear-gradient(135deg,#10b981,#064e3b);
}

@keyframes alertPulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  70%{box-shadow:0 0 0 12px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}

.card-time{
  font-size:12px;
  opacity:.6;
  margin:6px 0 10px;
}

.card-info{
  list-style:none;
  padding:0;
  margin:0;
  font-size:13px;
}
.card-info li{margin-bottom:6px}

.card-btn{
  width:100%;
  margin-top:10px;
  background:#7f1d1d;
  color:#fff;
  border:0;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}

.vida-inc-section{
  padding:120px 20px;
  background:
    radial-gradient(circle at 30% 0%, #eef3ff, #f7f9ff 60%);
}

.vida-inc-container{
  max-width:1200px;
  margin:auto;
}

.vida-inc-head{
  text-align:center;
  margin-bottom:56px;
}

.vida-inc-head h2{
  font-size:32px;
  letter-spacing:.04em;
}

.vida-inc-head p{
  margin-top:12px;
  color:#5a6a85;
}

/* ===== GRID ===== */
.vida-inc-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:48px;
}

@media(max-width:960px){
  .vida-inc-grid{
    grid-template-columns:1fr;
  }
}

/* ===== GLASS ===== */
.glass{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px);
  border-radius:24px;
  box-shadow:0 30px 60px rgba(90,120,180,.18);
}

/* ===== LIST ===== */
.vida-inc-list{
  padding:24px;
}

.vida-inc-scroll{
  max-height:420px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ===== ITEM ===== */
.vida-inc-item{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:18px;
  position:relative;
  transition:.35s;
}

.vida-inc-item:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.vida-inc-item.critical{
  background:linear-gradient(135deg,#fff5f5,#ffecec);
}

.vida-inc-item.warning{
  background:linear-gradient(135deg,#fffaf0,#fff2d8);
}

.inc-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ff6b6b;
  color:#fff;
  font-weight:bold;
}

.warning .inc-icon{
  background:#f4b740;
}

.inc-body strong span{
  color:#7a8ca8;
  font-weight:400;
}

.inc-meta{
  font-size:12px;
  color:#6b7c99;
  display:flex;
  gap:16px;
  margin-top:6px;
}

.inc-badge{
  position:absolute;
  right:16px;
  top:16px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#ff4d4f;
  color:#fff;
}

.warning .inc-badge{
  background:#f4b740;
}

/* ===== FEATURES ===== */
.vida-inc-feature{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.vida-inc-feature-item{
  display:flex;
  gap:18px;
}

.f-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(80,120,255,.15);
  display:grid;
  place-items:center;
  font-size:22px;
}

.vida-inc-chips span{
  display:inline-block;
  margin-right:8px;
  padding:4px 10px;
  border-radius:10px;
  background:rgba(120,160,255,.18);
  font-size:12px;
}


/* ===============================
   通報表單管理
================================ */

/* ====== 右側卡片 ====== */
.hp-card{
  background:rgba(255,255,255,.06);
  border-radius:24px;
  padding:22px;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.hp-ring{
  position:relative;
  width:140px;margin:20px auto;
}
.hp-ring svg{transform:rotate(-90deg)}
.hp-ring circle{
  fill:none;
  stroke-width:8;
  stroke:#1c274a;
}
#hpRing{
  stroke:#6dd6a3;
  stroke-dasharray:264;
  stroke-dashoffset:40;
}
.hp-ring-text{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}

.hp-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.hp-stats .health{grid-column:span 2}

.hp-device-detail button{
  width:100%;
  margin-top:16px;
  padding:12px;
  border-radius:12px;
  background:#ff5c5c;
  color:#fff;
  border:none;
  cursor:pointer;
}
/* ===============================
   VIDA Incident – Glass Section
================================ */

.vida-incident-glass{
  padding:120px 6vw;
  background:linear-gradient(180deg,#f6f8ff,#ffffff);
  color:#1b2540;
}

/* ---------- Head ---------- */
.vida-incident-head{
  text-align:center;
  margin-bottom:60px;
}
.vida-incident-head h2{
  font-size:36px;
  font-weight:700;
}
.vida-incident-head h2 span{ color:#5b6cff; }
.vida-incident-head p{
  margin-top:12px;
  font-size:14px;
  color:#7a849e;
}

/* ---------- Grid ---------- */
.vida-incident-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
}

/* ---------- Board ---------- */
.vida-incident-board{
  background:linear-gradient(180deg,rgba(34,38,55,.95),rgba(24,28,42,.9));
  backdrop-filter:blur(18px);
  border-radius:22px;
  box-shadow:0 40px 80px rgba(0,0,0,.25);
  padding:18px;
}

.board-top{
  display:flex;
  gap:8px;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dot{width:10px;height:10px;border-radius:50%}
.red{background:#ff5f57}
.yellow{background:#febc2e}
.green{background:#28c840}
.board-title{
  margin-left:auto;
  font-size:12px;
  opacity:.5;
}

.incident-list{
  margin-top:16px;
  max-height:480px;
  overflow:auto;
}

/* ---------- Incident Card ---------- */
.incident-card{
  border-radius:16px;
  padding:18px 20px;
  margin-bottom:14px;
  color:#fff;
  background:linear-gradient(135deg,rgba(255,120,120,.16),rgba(120,40,40,.22));
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  animation:incidentIn .9s cubic-bezier(.22,.61,.36,1) forwards;
  opacity:0;
}

.incident-card h5{font-size:15px;margin-bottom:6px}
.incident-card p{font-size:13px;opacity:.75}
.incident-meta{margin-top:8px;font-size:12px;opacity:.55}

/* hover 展開 */
.incident-expand{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.15);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 16px;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(6px);
  transition:.45s cubic-bezier(.22,.61,.36,1);
}
.incident-card:hover .incident-expand{
  max-height:160px;
  opacity:1;
  transform:translateY(0);
}

.expand-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
}

/* ---------- Features ---------- */
.vida-incident-features{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.feature{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px);
  border-radius:22px;
  padding:22px;
  display:flex;
  gap:18px;
  box-shadow:0 30px 70px rgba(40,60,140,.15);
}

.ico.glass{
  width:48px;height:48px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(120,220,180,.35),rgba(255,255,255,.6));
  display:flex;align-items:center;justify-content:center;
  color:#3bbf9b;
  position:relative;
}

/* 光暈互動 */
.feature-interactive{position:relative;overflow:hidden}
.feature-interactive::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(120,160,255,.22),transparent 60%);
  opacity:0;
  transition:.35s;
}
.feature-interactive:hover::after{opacity:1}

.chips span{
  display:inline-block;
  margin-top:8px;
  margin-right:6px;
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  background:rgba(0,0,0,.05);
}

/* ---------- Anim ---------- */
@keyframes incidentIn{
  to{opacity:1;transform:none}
}

/* ---------- RWD ---------- */
@media(max-width:900px){
  .vida-incident-grid{grid-template-columns:1fr}
}


/* ===============================
   Incident – Pulse Alert
================================ */

.incident-card.pulse{
  animation: pulseAlert 2.6s ease-in-out infinite;
}

@keyframes pulseAlert{
  0%   { box-shadow:0 0 0 rgba(255,90,90,0); }
  50%  { box-shadow:0 0 28px rgba(255,90,90,.28); }
  100% { box-shadow:0 0 0 rgba(255,90,90,0); }
}

/* ===============================
   Keynote Entrance
================================ */

.vida-incident-board .incident-card{
  opacity:0;
  transform:translateY(14px) scale(.985);
  filter:blur(6px);
  animation:incidentIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}

.vida-incident-board .incident-card:nth-child(1){animation-delay:.05s}
.vida-incident-board .incident-card:nth-child(2){animation-delay:.12s}
.vida-incident-board .incident-card:nth-child(3){animation-delay:.19s}
.vida-incident-board .incident-card:nth-child(4){animation-delay:.26s}
.vida-incident-board .incident-card:nth-child(5){animation-delay:.33s}

@keyframes incidentIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* =====================================================
   RIGHT – Feature Cards
===================================================== */

.vida-incident-features{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.9),
      rgba(245,247,255,.85)
    );
  backdrop-filter: blur(18px);
  border-radius:22px;
  padding:28px 30px;
  box-shadow:
    0 30px 70px rgba(40,60,140,.15),
    inset 0 0 0 1px rgba(255,255,255,.7);
  display:flex;
  flex-direction:column;
  gap:36px;
  position:relative;
  overflow:hidden;
}

/* floating glow */
.vida-incident-features::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(120,180,255,.18),
      transparent 60%
    );
  opacity:.6;
  animation: glassGlow 6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes glassGlow{
  0%   { transform:translate(0,0); opacity:.4 }
  50%  { transform:translate(40px,20px); opacity:.7 }
  100% { transform:translate(0,0); opacity:.4 }
}

/* ===============================
   Feature Item
================================ */

.feature{
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(14px);
  border-radius:20px;
  padding:22px 24px;
  box-shadow:
    0 20px 60px rgba(40,60,140,.12),
    inset 0 0 0 1px rgba(255,255,255,.6);
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* icon */
.ico.glass{
  width:48px;
  height:48px;
  border-radius:14px;
  background:
    linear-gradient(
      135deg,
      rgba(120,220,180,.25),
      rgba(255,255,255,.45)
    );
  color:#3bbf9b;
  border: 1px solid rgba(19, 232, 8, 0.7);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* icon pulse */
.ico.glass::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(120,220,180,.35), transparent 60%);
  opacity:.6;
  animation: icoPulse 3.6s ease-in-out infinite;
}

@keyframes icoPulse{
  0%,100%{ transform:scale(.92); opacity:.4 }
  50%{ transform:scale(1.05); opacity:.75 }
}

.feature h4{
  margin-bottom:6px;
  font-size:20px;
  color:#191d7e;
}

.feature p{
  font-size:14px;
  color:#5f6b85;
}

/* chips */
.chips span{
  display:inline-block;
  margin-top:10px;
  margin-right:6px;
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  background:rgba(120,140,255,.1);
  color:#4b5cff;
}

/* ===============================
   Feature 高亮 / 聚焦狀態
================================ */

.feature{
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease,
    filter .45s ease,
    opacity .45s ease;
}

/* 非聚焦 */
.vida-incident-features.dim .feature{
  opacity:.45;
  filter: blur(1.2px);
}

/* 高亮 */
.feature.active{
  opacity:1 !important;
  filter:none !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 30px 80px rgba(80,120,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.75);
}

/* 光暈 */
.feature.active::after{
  opacity:1 !important;
}

/* 事件卡被選中 */
.incident-card.active{
  outline:1px solid rgba(255,255,255,.25);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.15),
    0 30px 70px rgba(120,140,255,.28);
}

/* ================
   RWD
================= */

@media(max-width:900px){
  .vida-incident-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
}

/* ===============================
   Feature 
================================ */

.feature-interactive{
  position:relative;
  overflow:hidden;
  transition:
    transform .4s ease,
    box-shadow .4s ease;
}

.feature-interactive:hover{
  transform: translateY(-4px);
  box-shadow:
    0 28px 80px rgba(60,80,160,.18),
    inset 0 0 0 1px rgba(255,255,255,.75);
}

/* 動態光暈層 */
.feature-interactive::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(120,160,255,.22),
      transparent 60%
    );
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}

.feature-interactive:hover::after{
  opacity:1;
}

/* ===============================
   VIDA Decision Glass
================================ */
.vida-decision-glass{
  padding:120px 6vw;
  background:radial-gradient(circle at 20% 0%,#111836,#05070f 70%);
  color:#e8eeff;
}

.vida-decision-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:48px;
  align-items:start;
}

/* ===== Intro ===== */
.vida-decision-intro h2{
  font-size:36px;
  margin-bottom:14px;
}
.vida-decision-intro h2 span{
  color:#7da6ff;
  margin-left:6px;
}
.vida-decision-intro p{
  color:#9aa6c6;
  max-width:420px;
}

/* KPI */
.vida-decision-kpis{
  margin-top:40px;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.kpi-card{
  flex:1;
  min-width:220px;
  padding:20px 22px;
  border-radius:18px;
  backdrop-filter:blur(18px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:.35s ease;
}
.kpi-green{
  background:linear-gradient(135deg,rgba(80,200,140,.35),rgba(40,80,60,.35));
}
.kpi-blue{
  background:linear-gradient(135deg,rgba(80,120,255,.35),rgba(40,60,120,.35));
}
.kpi-card strong{
  display:block;
  font-size:28px;
  margin:4px 0;
}

/* ===== Cards ===== */
.vida-decision-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border-radius:26px;
  padding:26px 28px;
  backdrop-filter:blur(20px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;
  overflow:hidden;
}
.vida-decision-card h4{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
}

/* DONUT */
.ring-bg{
  fill:none;
  stroke:rgba(255,255,255,.08);
  stroke-width:10;
}

.ring-val{
  fill:none;
  stroke:#6fa8ff;
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray:327;
  stroke-dashoffset:327;
  transition:stroke-dashoffset 1s ease;
}
.ring-green{
  stroke:#6fe2b5;
}
.ring-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Trend */
canvas{
  width:100%;
  height:180px;
}

/* RWD */
@media(max-width:1100px){
  .vida-decision-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
}


/* ===============================
   Multi Donut Ring
================================ */
.vida-ring-wrap{
  position:relative;
  width:240px;
  margin:0 auto;
}

svg{display:block}

.donut{
  fill:none;
  stroke-width:10;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin:50% 50%;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease,
    filter .35s ease;

  stroke-dasharray:327;
  stroke-dashoffset:327;  
  filter: drop-shadow(0 0 12px rgba(255,255,255,.25));  
  cursor:pointer;
  transition: stroke .35s ease, filter .35s ease, opacity .35s ease;
}


.donut.cpu{ stroke:#7da6ff; }
.donut.net{ stroke:#6fe2b5; }
.donut.disk{ stroke:#f6c177; }

.donut:hover{
  filter: drop-shadow(0 0 12px rgba(140,180,255,.65));
  opacity:1;
}

.donut.dim{
  opacity:.25;
}

.vida-decision-donut:hover 
.donut{
  opacity:.25;
}

.vida-decision-donut:hover 
.donut:hover{
  opacity:1;
}

.donut-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Legend */
.donut-legend{
  list-style: none;     
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
  gap: 28px;
}

.donut-legend li{
  list-style: none;     
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.donut-legend span{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}

.donut-legend li span{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px currentColor;
}

.donut-legend li .cpu{
  background:#8fa9ff;
  color:#8fa9ff;
}

.donut-legend li .net{
  background:#7fe0b3;
  color:#7fe0b3;
}

.donut-legend li .disk{
  background:#f5c77a;
  color:#f5c77a;
}

.donut-legend .cpu{background:#7da6ff}
.donut-legend .net{background:#6fe2b5}
.donut-legend .disk{background:#f6c177}
/* ===============================
   TREND
================================ */
canvas{width:100%;
    height:180px}
.trend-note{
  margin-top:12px;
  color:#9aa6c6;
}
/* ===============================
   Icon 微動畫
================================ */
.icon-animate{
  margin-right:8px;
  animation: iconFloat 4s ease-in-out infinite;
}

@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ===============================
   VIDA Glass Card
================================ */
.vida-glass-card{
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.04)
    );
  border-radius: 26px;
  padding: 34px 36px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 40px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease;
  overflow: hidden;
}

.vida-glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.22),
      transparent 70%
    );
  opacity:.18;
  transform: translateX(-60%);
  transition: transform .9s ease;
  pointer-events:none;
}

.vida-glass-card:hover::before{
  transform: translateX(60%);
}

.vida-glass-card:hover{
  transform: translateY(-10px) scale(1.01);
  box-shadow:
    0 55px 120px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.vida-glass-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(
      135deg,
      rgba(120,255,200,.35),
      rgba(80,160,140,.25)
    );
  box-shadow:
    0 10px 30px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.35);
  margin-bottom:22px;
}

.vida-glass-icon i{
  font-size:22px;
  color:#eafff4;
  filter: drop-shadow(0 0 6px rgba(120,255,200,.6));
}

.vida-glass-card.is-primary{
  background:
    linear-gradient(
      180deg,
      rgba(120,255,200,.18),
      rgba(80,160,140,.10)
    );
  box-shadow:
    0 60px 140px rgba(0,0,0,.75),
    0 0 0 1px rgba(120,255,200,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.vida-glass-card li{
  position:relative;
  padding-left:26px;
}

.vida-glass-card li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:2px;
  color:#7fe0b3;
  opacity:.9;
  transform: scale(.9);
  transition: transform .35s ease;
}

.vida-glass-card:hover li::before{
  transform: scale(1.1);
}


@media (max-width: 1024px){
  .vida-glass-grid{
    grid-template-columns: 1fr;
    gap:28px;
  }
}

/* ===============================
   VIDA Capability Glass
================================ */
.vida-capability-glass{
  padding:120px 6vw;
  background:radial-gradient(circle at 50% 0%, #0e1533, #05070f 70%);
}

.vcg-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

/* ===== Card ===== */
.vcg-card{
  position:relative;
  transform: translateZ(30px);
  padding:36px 34px 38px;
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  backdrop-filter:blur(20px);
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:.45s cubic-bezier(.22,.61,.36,1);
  color:#e8eeff;
}

.vcg-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.12),
      transparent 40%
    );
  opacity:.0;
  transition:opacity .4s ease;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}

.vcg-card:hover::after{
  opacity:.6;
}

.vcg-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 60px 140px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Highlight card */
.vcg-focus{
  transform: translateZ(0) scale(1.04);
  box-shadow:
    0 60px 140px rgba(0,0,0,.65),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* ===== Icon ===== */
.vcg-icon{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:22px;
  background:rgba(120,200,160,.25);
  color:#b9f3d8;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);  
  position:relative;
  isolation:isolate;
  position:relative;
  transform-style:preserve-3d;
  perspective:1200px;
  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .6s ease;
}

.vcg-icon::before{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:18px;
  background:
    radial-gradient(
      circle,
      rgba(120,220,180,.35),
      transparent 65%
    );
  filter: blur(12px);
  opacity:.45;
  animation: iconAura 4.8s ease-in-out infinite;
  z-index:-1;
}

@keyframes iconAura{
  0%,100%{
    transform:scale(.92);
    opacity:.35;
  }
  50%{
    transform:scale(1.08);
    opacity:.7;
  }
}

.vcg-icon.glow{
  box-shadow:
    0 0 0 1px rgba(120,255,200,.35),
    0 0 30px rgba(120,255,200,.45);
}

.vcg-card:hover .vcg-icon{
  transform:translateY(-2px) scale(1.05);
}

/* ===== Text ===== */
.vcg-card h3{
  margin:0 0 18px;
  font-size:22px;
}

.vcg-card ul{
  margin:0;
  padding:0;
  list-style:none;
}

.vcg-card li{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0;
  color:#cfd7ff;
  opacity:.85;
  transition:.35s ease;
}

.vcg-card li::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:#6fe2b5;
  box-shadow:0 0 8px rgba(120,255,200,.6);
}

/* Hover reveal */
.vcg-card:hover li{
  opacity:1;
}

/* ===============================
   RWD
================================ */
@media (pointer: coarse){
  .vcg-card{
    transform:none !important;
  }
  .vcg-icon::before{
    animation:none;
    opacity:.45;
  }
}

@media(max-width:1100px){
  .vcg-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .vcg-grid{
    grid-template-columns:1fr;
  }
}