/* ================================
   VBS Hub Orbit – Layout & Glass
================================ */

.huborbit-section{
  margin:80px auto;
  padding:0 24px;
}

.huborbit-shell{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:40px;
  align-items:stretch;
}

/* 左側文字區 */
.huborbit-left{
  align-self:center;
}

.huborbit-eyebrow{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9aa4c6;
  margin-bottom:6px;
}
.huborbit-title{
  font-size:2.1rem;
  font-weight:800;
  color:#141933;
  margin:0 0 10px;
}
.huborbit-lead{
  font-size:.96rem;
  line-height:1.8;
  color:#555b78;
  max-width:520px;
}

/* detail 卡片 */
.huborbit-detail{
  margin-top:22px;
  padding:16px 18px 18px;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,246,255,.98));
  border:1px solid rgba(209,213,255,.9);
  box-shadow:0 14px 30px rgba(148,163,184,.35);
}
.huborbit-detail-label{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9aa4c6;
  margin-bottom:6px;
}
.huborbit-detail-title{
  margin:0 0 4px;
  font-size:1.02rem;
  font-weight:750;
  color:#111827;
}
.huborbit-detail-desc{
  margin:0;
  font-size:.86rem;
  line-height:1.7;
  color:#4b5563;
}

/* 右側玻璃卡 */
.huborbit-right{
  min-height:360px;
}
.huborbit-glass{
  height:100%;
  border-radius:28px;
  padding:18px 18px 16px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(240,243,255,.99));
  border:1px solid rgba(209,213,255,1);
  box-shadow:0 26px 60px rgba(148,163,184,.55);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Canvas：深色場景 */
.huborbit-canvas{
  position:relative;
  flex:1 1 auto;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,#253659 0,#020617 52%,#020617 100%),
    linear-gradient(180deg,#020617,#020617);
  box-shadow:inset 0 0 40px rgba(15,23,42,.9);
}

/* 垂直線背景 */
.huborbit-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.65;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(148,163,184,.06) 0,
      rgba(148,163,184,.06) 1px,
      transparent 1px,
      transparent 22px
    );
  mix-blend-mode:screen;
}

/* 同心圓 */
.huborbit-rings{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.huborbit-rings span{
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.16);
}
.huborbit-rings span:nth-child(1){width:220px;height:220px;}
.huborbit-rings span:nth-child(2){width:360px;height:360px;}
.huborbit-rings span:nth-child(3){width:520px;height:520px;}

/* 中央核心 */

.huborbit-core{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.huborbit-core-glow{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:999px;
  background:radial-gradient(circle,#38bdf8 0,rgba(15,23,42,0) 72%);
  opacity:.68;
}
.huborbit-core-circle{
  position:relative;
  width:160px;
  height:160px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%,#bef2ff 0,#22c1c3 40%,#020617 100%);
  box-shadow:
    0 0 0 4px rgba(56,189,248,.4),
    0 18px 40px rgba(15,23,42,.9);
  display:flex;
  align-items:center;
  justify-content:center;
}
.huborbit-core-icon svg{
  width:64px;
  height:64px;
  fill:#e0f9ff;
}

/* ================================
   Orbits & Cards
================================ */

.huborbit-orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center center;
  animation:huborbit-spin 32s linear infinite;
}

.huborbit-orbit--outer{width:520px;height:520px;}
.huborbit-orbit--mid  {width:360px;height:360px;}
.huborbit-orbit--inner{width:230px;height:230px;}

/* 第二個 mid  */
.huborbit-orbit--right{
  animation-duration:26s;
  animation-direction:reverse;
}

/* 卡片通用樣式 */
.huborbit-card{
  position:absolute;
  top:5%;
  left:50%;
  transform:translate(-50%,0) rotate(-6deg);
  transform-origin:center center;
  padding:8px 14px 9px;
  border-radius:14px;
  border:none;
  background:#020617;
  color:#e5e7eb;
  font-family:inherit;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:2px;
  box-shadow:
    0 10px 26px rgba(15,23,42,.9),
    0 0 0 1px rgba(15,23,42,.85);
  cursor:pointer;
  white-space:nowrap;
  font-size:.8rem;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* 內圈卡片位置往下 */
.huborbit-orbit--inner .huborbit-card{
  top:2%;
}
.huborbit-card-tag{
  font-size:.78rem;
  font-weight:650;
  padding:3px 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
}
.huborbit-card-desc{
  font-size:.78rem;
  opacity:.9;
}

/* 各卡色系 */
.huborbit-card-tag--gold{
  background:#facc15;
  color:#1f2937;
}
.huborbit-card-tag--purple{
  background:#c4b5fd;
  color:#111827;
}
.huborbit-card-tag--red{
  background:#fb7185;
  color:#111827;
}
.huborbit-card-tag--green{
  background:#4ade80;
  color:#064e3b;
}

/* 高亮 + hover */
.huborbit-card:hover,
.huborbit-card.is-active{
  box-shadow:
    0 14px 30px rgba(0,0,0,.95),
    0 0 0 1px rgba(59,130,246,1);
  background:#020617;
  transform:translate(-50%,0) rotate(-3deg) scale(1.04);
}

/* 底部提示 */
.huborbit-bottom-hint{
  font-size:.78rem;
  color:#9ca3af;
  text-align:right;
}

/* 動畫暫停時 */
.huborbit-section.is-paused .huborbit-orbit{
  animation-play-state:paused;
}

/* ================================
   Animations
================================ */

@keyframes huborbit-spin{
  0%{transform:translate(-50%,-50%) rotate(0deg);}
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}

/* RWD */
@media (max-width:1024px){
  .huborbit-shell{
    grid-template-columns:1fr;
    gap:32px;
  }
  .huborbit-right{
    order:-1;
  }
}
@media (max-width:768px){
  .huborbit-section{
    margin:60px auto;
  }
  .huborbit-glass{
    padding:14px;
  }
}
@media (max-width:640px){
  .huborbit-orbit--outer{width:420px;height:420px;}
  .huborbit-orbit--mid  {width:300px;height:300px;}
  .huborbit-orbit--inner{width:200px;height:200px;}
  .huborbit-core-circle{width:130px;height:130px;}
}


/* ========== keyframes ========== */

@keyframes huborbit-core-breath{
  0%{
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(56,189,248,.35),
      0 18px 40px rgba(15,23,42,.9);
  }
  50%{
    transform: scale(1.04);
    box-shadow:
      0 0 0 6px rgba(56,189,248,.55),
      0 26px 52px rgba(15,23,42,1);
  }
  100%{
    transform: scale(1);
    box-shadow:
      0 0 0 4px rgba(56,189,248,.35),
      0 18px 40px rgba(15,23,42,.9);
  }
}

@keyframes huborbit-glow-pulse{
  0%  { opacity:.55; transform:scale(1);   }
  50% { opacity:.9;  transform:scale(1.08);}
  100%{ opacity:.55; transform:scale(1);   }
}

/* 旋轉軌道 */
@keyframes huborbit-spin{
  0%{
    transform:translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}

/* 卡片上下微浮動 */
@keyframes huborbit-card-float{
  0%  { transform:translate(-50%,0) rotate(-4deg); }
  50% { transform:translate(-50%,-6px) rotate(-2deg);}
  100%{ transform:translate(-50%,0) rotate(-4deg); }
}

/* =========================
   HERO：平板 / 手機版修正   
========================= */

/* 1024 以下：上下堆疊，左卡片撐滿 */
@media (max-width: 1024px){
  .its-hero-inner{
    display: block;           
    padding: 24px 16px;
    border-radius: 10px;
  }

  /* 左側文案卡片 */
  .its-hero-copy{
    width: 100%;
    max-width: 480px;          
    margin: 0 auto 20px;
    padding: 24px 20px;
    border-radius: 10px;
  }

  .its-title{
    font-size: 1.6rem;         
    line-height: 1.35;
    word-break: keep-all;      
  }

  .its-subtitle{
    font-size: 1rem;
  }

  .its-lead{
    font-size: .92rem;
  }

  /* 右側動畫卡片 */
  .its-hero-right{
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  .its-hero-right .huborbit-section{
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .huborbit-right{
    max-width: 100%;
  }
}

/* 640 以下*/
@media (max-width: 640px){
  .its-hero-inner{
    padding: 18px 12px;
  }

  .its-hero-copy{
    max-width: 100%;
    padding: 20px 16px;
  }

  .its-title{
    font-size: 1.45rem;
  }

  .its-subtitle{
    font-size: .95rem;
  }

  .its-lead{
    font-size: .9rem;
  }

  .its-hero-right{
    max-width: 380px;
  }
}
/* =========================
   外層區塊
========================= */
.vbsu-scenes{
  padding:96px 0;
  background:#f4f5ff;
}

.vbsu-shell{
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
}

.vbsu-head{
  text-align:center;
  margin-bottom:32px;
}

.vbsu-eyebrow{
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#9ca3af;
}

.vbsu-title{
  margin:8px 0 10px;
  font-size:2.1rem;
  font-weight:800;
  color:#111827;
}

.vbsu-sub{
  max-width:660px;
  margin:0 auto;
  font-size:.95rem;
  line-height:1.8;
  color:#4b5563;
}

/* =========================
   上排 3 張卡片
========================= */
.vbsu-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-bottom:26px;
}

.vbsu-card{
  border:none;
  padding:18px 18px 16px;
  border-radius:22px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 56px rgba(148,163,184,.55);
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
  border:1px solid rgba(209,213,255,.8);
}

.vbsu-card-head{
  display:flex;
  gap:12px;
  align-items:center;
}

.vbsu-card-ico{
  width:40px;
  height:40px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f9fafb;
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}

.vbsu-card-ico i{
  font-size:20px;          
}

/* 安防監控： */
.vbsu-card-ico.security{
  background:linear-gradient(135deg,#2563eb,#22c1c3);
}

/* 活動人潮： */
.vbsu-card-ico.event{
  background:linear-gradient(135deg,#7c3aed,#f97316);
}

/* VBS Hub： */
.vbsu-card-ico.hub{
  background:linear-gradient(135deg,#0ea5e9,#4f46e5);
}

.vbsu-card-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.vbsu-card-tag{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9ca3af;
}

.vbsu-card-title{
  font-size:.98rem;
  font-weight:750;
  color:#111827;
}

.vbsu-card-text{
  font-size:.86rem;
  line-height:1.7;
  color:#4b5563;
}

.vbsu-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.vbsu-chip{
  font-size:.74rem;
  border-radius:999px;
  padding:3px 10px;
  background:#eff3ff;
  color:#4b5563;
}

.vbsu-card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 62px rgba(148,163,184,.7);
}

.vbsu-card.is-active{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(224,231,255,.99));
  border-color:rgba(129,140,248,.85);
  box-shadow:
    0 20px 64px rgba(129,140,248,.65),
    0 0 0 1px rgba(129,140,248,.8);
}

/* =========================
   Detail Panel
========================= */

.vbsu-detail{
  position:relative;
  min-height:320px;
}

.vbsu-detail-inner{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:28px;
  padding:22px 24px;
  border-radius:26px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(235,241,255,.99));
  border:1px solid rgba(209,213,255,.95);
  box-shadow:0 28px 70px rgba(148,163,184,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:
    opacity .24s ease,
    transform .24s ease,
    visibility .24s linear;
  position:absolute;
  inset:0;
}

.vbsu-detail-inner.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.vbsu-detail-copy{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.vbsu-detail-tag{
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#9ca3af;
}

.vbsu-detail-title{
  margin:0;
  font-size:1.4rem;
  font-weight:800;
  color:#111827;
}

.vbsu-detail-lead{
  font-size:.93rem;
  line-height:1.8;
  color:#4b5563;
}

.vbsu-detail-list{
  margin:4px 0 0;
  padding-left:0;
  list-style:none;
  font-size:.9rem;
  color:#374151;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vbsu-detail-list li::before{
  content:"•";
  margin-right:6px;
  color:#4f46e5;
}

/* =========================
   情境圖
========================= */
/* 右側情境圖玻璃框 */
.vbsu-detail-visual{
  flex:1 1 50%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.vbsu-visual-canvas{
  position:relative;
  border-radius:24px;
  padding:14px;
  background:
    radial-gradient(circle at 50% 0%,#1e293b 0,#020617 60%,#020617 100%);
  box-shadow:
    0 22px 50px rgba(15,23,42,.9);
  overflow:hidden;  
  transform:
    perspective(1200px)
    rotateX(var(--vbsu-tilt-x,0deg))
    rotateY(var(--vbsu-tilt-y,0deg));
  transition:
    transform .28s ease-out,
    box-shadow .28s ease-out,
    filter .28s ease-out;
  min-height:240px;
}

.vbsu-visual-canvas::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:repeating-linear-gradient(
    to right,
    rgba(148,163,184,.12) 0,
    rgba(148,163,184,.12) 1px,
    transparent 1px,
    transparent 26px
  );
  opacity:.6;
  mix-blend-mode:screen;
  pointer-events:none;
}

.vbsu-visual-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  width:320px;
  height:320px;
  margin:auto;
  border-radius:999px;
  border:1px solid rgba(96,165,250,.15);
  box-shadow:
    0 0 0 90px rgba(96,165,250,.04),
    0 0 0 180px rgba(96,165,250,.02);
  pointer-events:none;
}

.vbsu-visual-caption{
  font-size:.78rem;
  color:#9ca3af;
  text-align:right;
}

.vbsu-visual-canvas:hover{
  filter:saturate(1.08);
  box-shadow:
    inset 0 0 40px rgba(15,23,42,1),
    0 22px 56px rgba(15,23,42,.95);
}

/* =========================
   Security 情境
========================= */

.vbsu-sec-room{
  position:relative;
  width:100%;
  height:100%;
}

.vbsu-sec-wall{
  position:absolute;
  top:10%;
  left:8%;
  right:8%;
  height:48%;
  border-radius:16px;
  background:#020617;
  box-shadow:0 0 0 1px rgba(148,163,184,.6);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:1fr;
  gap:6px;
  padding:6px;
}

.vbsu-sec-screen{
  border-radius:6px;
  background:radial-gradient(circle at 50% 0%,#22c1c3 0,#0f172a 80%);
  position:relative;
  overflow:hidden;
}
.vbsu-sec-screen::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(
    120deg,
    transparent 0,
    rgba(148,163,184,.45) 30%,
    transparent 60%
  );
  transform:translateX(-60%);
  animation:vbsu-screen-scan 6s linear infinite;
  opacity:.45;
}
.vbsu-sec-screen--event{
  box-shadow:0 0 0 2px rgba(248,113,113,1);
  animation:vbsu-event-pulse 1.6s ease-out infinite;
}

.vbsu-sec-console{
  position:absolute;
  left:12%;
  right:12%;
  bottom:18%;
  height:20%;
  border-radius:16px;
  background:linear-gradient(180deg,#020617,#020617);
  box-shadow:0 -4px 18px rgba(15,23,42,.9);
}

.vbsu-sec-operator{
  position:absolute;
  bottom:7%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.vbsu-sec-operator-head{
  width:22px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(circle,#e5e7eb 0,#9ca3af 60%,#020617 100%);
}
.vbsu-sec-operator-body{
  width:30px;
  height:16px;
  border-radius:999px;
  background:linear-gradient(135deg,#4f46e5,#06b6d4);
  box-shadow:0 0 0 3px rgba(15,23,42,.8);
}

/* =========================
   Broadcast × Crowd 情境
========================= */

.vbsu-bc-crowd{
  position:relative;
  width:100%;
  height:100%;
}

/* 中央廣場 / 場館 */
.vbsu-bc-plaza{
  position:absolute;
  inset:22% 10% 20%;
  border-radius:50% / 60%;
  background:radial-gradient(circle,#1fb8ff 0,#0f172a 55%,#020617 100%);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.8),
    0 0 50px rgba(56,189,248,.45);
}

/* 壅塞熱區  */
.vbsu-bc-hotspot{
  position:absolute;
  top:40%;
  left:40%;
  width:26%;
  height:22%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(248,113,113,.95) 0,rgba(248,113,113,0) 70%);
  mix-blend-mode:screen;
  animation:vbsu-hotspot-pulse 2.1s ease-in-out infinite;
}

/* 攝影機節點 */
.vbsu-bc-cam{
  position:absolute;
  width:26px;
  height:18px;
  border-radius:8px;
  background:linear-gradient(145deg,#020617,#0b1120);
  box-shadow:0 0 0 1px rgba(148,163,184,.9);
}
.vbsu-bc-cam::after{
  content:"";
  position:absolute;
  right:4px;
  top:4px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle,#22c1c3 0,#0ea5e9 60%,#020617 100%);
  box-shadow:0 0 8px rgba(56,189,248,.9);
}

.vbsu-bc-cam--tl{top:18%;left:16%;}
.vbsu-bc-cam--tr{top:16%;right:18%;}
.vbsu-bc-cam--br{bottom:16%;right:18%;}

/* 疏散路徑箭頭 */
.vbsu-bc-flow{
  position:absolute;
  width:80px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(34,197,94,0) 0,rgba(34,197,94,1) 60%);
  opacity:.85;
  box-shadow:0 0 14px rgba(34,197,94,.75);
  overflow:hidden;
}
.vbsu-bc-flow::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(236,252,203,0) 0,rgba(236,252,203,1) 40%,rgba(236,252,203,0) 80%);
  transform:translateX(-100%);
  animation:vbsu-flow-run 1.6s linear infinite;
}
.vbsu-bc-flow--left{
  bottom:32%;
  left:18%;
  transform:rotate(-12deg);
}
.vbsu-bc-flow--right{
  bottom:30%;
  right:16%;
  transform:rotate(18deg);
}

/* 人群點位 */
.vbsu-bc-dots{
  position:absolute;
  inset:30% 16% 26%;
}
.vbsu-bc-dots span{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(226,232,240,.95);
  box-shadow:0 0 8px rgba(148,163,184,.8);
  animation:vbsu-crowd-jitter 3.4s ease-in-out infinite;
}

/* 手動排點位 */
.vbsu-bc-dots span:nth-child(1){left:18%;top:18%;}
.vbsu-bc-dots span:nth-child(2){left:32%;top:26%;animation-delay:.3s;}
.vbsu-bc-dots span:nth-child(3){left:46%;top:30%;animation-delay:.6s;}
.vbsu-bc-dots span:nth-child(4){left:60%;top:22%;animation-delay:.9s;}
.vbsu-bc-dots span:nth-child(5){left:24%;top:50%;animation-delay:.2s;}
.vbsu-bc-dots span:nth-child(6){left:38%;top:46%;animation-delay:.7s;}
.vbsu-bc-dots span:nth-child(7){left:52%;top:52%;animation-delay:1.1s;}
.vbsu-bc-dots span:nth-child(8){left:66%;top:48%;animation-delay:1.4s;}
.vbsu-bc-dots span:nth-child(9){left:30%;top:66%;animation-delay:.4s;}
.vbsu-bc-dots span:nth-child(10){left:44%;top:64%;animation-delay:.8s;}
.vbsu-bc-dots span:nth-child(11){left:58%;top:68%;animation-delay:1.2s;}
.vbsu-bc-dots span:nth-child(12){left:70%;top:60%;animation-delay:1.6s;}

/* AI 壅塞告警 badge */
.vbsu-bc-alert{
  position:absolute;
  top:30%;
  right:21%;
  width:28px;
  height:28px;
  border-radius:999px;
  background:radial-gradient(circle,#f97373 0,#b91c1c 80%);
  box-shadow:0 0 16px rgba(248,113,113,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:vbsu-alert-pop 1.6s ease-out infinite;
}
.vbsu-bc-alert-icon{
  font-size:15px;
  font-weight:800;
  color:#f9fafb;
}

/* keyframes */

@keyframes vbsu-hotspot-pulse{
  0%{transform:scale(.9);opacity:.6;}
  50%{transform:scale(1.05);opacity:1;}
  100%{transform:scale(.9);opacity:.6;}
}

@keyframes vbsu-flow-run{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

@keyframes vbsu-crowd-jitter{
  0%,100%{transform:translate(0,0);opacity:.7;}
  50%{transform:translate(0,-3px);opacity:1;}
}

@keyframes vbsu-alert-pop{
  0%{transform:scale(0.9);box-shadow:0 0 10px rgba(248,113,113,.7);}
  50%{transform:scale(1.05);box-shadow:0 0 18px rgba(248,113,113,1);}
  100%{transform:scale(0.9);box-shadow:0 0 10px rgba(248,113,113,.7);}
}

/* =========================
   VBS Hub 情境
========================= */

.vbsu-hub-map{
  position:relative;
  width:100%;
  height:100%;
}

/* 中央 Hub 圓盤 */
.vbsu-hub-core{
  position:absolute;
  inset:32% 32%;
  border-radius:50%;
  background:radial-gradient(circle,#22c1c3 0,#0ea5e9 40%,#020617 100%);
  box-shadow:
    0 0 0 3px rgba(56,189,248,.9),
    0 18px 40px rgba(15,23,42,1);
  animation:vbsu-hub-breath 4.2s ease-in-out infinite;
}

/* Hub內部多串流節點 */
.vbsu-hub-dot{
  position:absolute;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#e0f9ff;
  box-shadow:0 0 10px rgba(56,189,248,.95);
}
.vbsu-hub-dot--c{top:50%;left:50%;transform:translate(-50%,-50%);}
.vbsu-hub-dot--1{top:24%;left:52%;}
.vbsu-hub-dot--2{top:60%;left:30%;}
.vbsu-hub-dot--3{top:70%;left:64%;}

/* 四個場域節點：Security / Stadium / Factory / Port */

.vbsu-hub-node{
  position:absolute;
  min-width:96px;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(15,23,42,.98);
  box-shadow:
    0 10px 24px rgba(15,23,42,.95),
    0 0 0 1px rgba(15,23,42,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:vbsu-node-float 5s ease-in-out infinite;
}
.vbsu-hub-node-label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#e5e7eb;
}

/* 各節點位置與漸層 */
.vbsu-hub-node--sec{
  top:14%;
  left:10%;
  background:linear-gradient(135deg,#1d4ed8,#0f172a);
}
.vbsu-hub-node--stadium{
  top:18%;
  right:8%;
  background:linear-gradient(135deg,#7c3aed,#0f172a);
}
.vbsu-hub-node--factory{
  bottom:15%;
  left:12%;
  background:linear-gradient(135deg,#f97316,#0f172a);
}
.vbsu-hub-node--port{
  bottom:12%;
  right:10%;
  background:linear-gradient(135deg,#10b981,#0f172a);
}

/* 串流線路：Hub ↔ 四個節點 */

.vbsu-hub-link{
  position:absolute;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(56,189,248,.1),rgba(56,189,248,.9),rgba(56,189,248,.1));
  opacity:.9;
  overflow:hidden;
}
.vbsu-hub-link::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(236,252,203,0),rgba(236,252,203,1),rgba(236,252,203,0));
  transform:translateX(-100%);
  animation:vbsu-link-flow 2.2s linear infinite;
}

/* 粗略畫四條線（用位置＋旋轉） */
.vbsu-hub-link--1{
  top:28%;
  left:24%;
  width:24%;
  transform:rotate(-10deg);
}
.vbsu-hub-link--2{
  top:34%;
  right:24%;
  width:22%;
  transform:rotate(12deg);
}
.vbsu-hub-link--3{
  bottom:26%;
  left:26%;
  width:22%;
  transform:rotate(8deg);
}
.vbsu-hub-link--4{
  bottom:24%;
  right:26%;
  width:24%;
  transform:rotate(-12deg);
}

/* keyframes */

@keyframes vbsu-hub-breath{
  0%{transform:scale(1);}
  50%{transform:scale(1.05);}
  100%{transform:scale(1);}
}

@keyframes vbsu-node-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}

@keyframes vbsu-link-flow{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}


/* ============================
   VBS Usage – Layout
============================ */
.vbsu-usage{
  padding:96px 0;
  background:#f4f6ff;
}

.vbsu-usage-shell{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

.vbsu-usage-head{
  text-align:center;
  margin-bottom:40px;
}

.vbsu-eyebrow{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#98a2ff;
  margin-bottom:6px;
}

.vbsu-title{
  font-size:2.1rem;
  margin:0 0 8px;
  color:#111827;
}

.vbsu-intro{
  max-width:700px;
  margin:0 auto;
  font-size:.95rem;
  color:#4b5563;
  line-height:1.7;
}

.vbsu-usage-layout{
  display:grid;
  grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:32px;
  align-items:stretch;
}

/* ============================
   左側 Scenario Nav
============================ */
.vbsu-scenario-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.vbsu-scenario-btn{
  position:relative;
  display:flex;
  width:100%;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 30px rgba(15,23,42,.08);
  cursor:pointer;
  text-align:left;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    transform .15s ease;
}

.vbsu-scenario-btn:hover{
  box-shadow:0 18px 40px rgba(15,23,42,.14);
  transform:translateY(-2px);
}

.vbsu-scenario-btn.is-active{
  border-color:rgba(99,102,241,1);
  box-shadow:
    0 18px 40px rgba(79,70,229,.26),
    0 0 0 1px rgba(129,140,248,.7);
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(226,232,255,.98));
}

.vbsu-scenario-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:12px;
  flex-shrink:0;
  color:#fff;
  font-size:1.1rem;
}

.vbsu-scenario-icon--blue{
  background:linear-gradient(145deg,#3b82f6,#6366f1);
}
.vbsu-scenario-icon--violet{
  background:linear-gradient(145deg,#a855f7,#6366f1);
}
.vbsu-scenario-icon--teal{
  background:linear-gradient(145deg,#14b8a6,#22c1c3);
}

.vbsu-scenario-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.vbsu-scenario-kicker{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9ca3af;
}

.vbsu-scenario-title{
  font-size:.96rem;
  font-weight:700;
  color:#111827;
}

.vbsu-scenario-desc{
  font-size:.82rem;
  color:#6b7280;
}

/* ============================
   右側 Detail Panel
============================ */
.vbsu-detail-stack{
  position:relative;
  border-radius:26px;
  background:radial-gradient(circle at 0 0,#f3f4ff 0,rgba(255,255,255,.98) 42%,#e5ebff 100%);
  box-shadow:0 30px 80px rgba(15,23,42,.15);
  padding:22px 22px 22px;
  overflow:hidden;
}

.vbsu-detail{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr);
  gap:24px;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  position:absolute;
  inset:22px;
  transition:
    opacity .26s ease,
    transform .26s ease;
}

.vbsu-detail.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
  position:relative;
  inset:auto;
}

.vbsu-detail-copy{
  padding:4px 4px 4px 2px;
}

.vbsu-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:8px;
}

.vbsu-tag{
  font-size:.72rem;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  color:#4b5563;
}
.vbsu-tag--blue{
  background:rgba(59,130,246,.1);
  color:#1d4ed8;
}
.vbsu-tag--violet{
  background:rgba(168,85,247,.08);
  color:#7c3aed;
}
.vbsu-tag--teal{
  background:rgba(20,184,166,.08);
  color:#047857;
}

.vbsu-detail-title{
  font-size:1.4rem;
  margin:0 0 6px;
  color:#020617;
}

.vbsu-detail-lead{
  font-size:.94rem;
  color:#4b5563;
  line-height:1.7;
  margin:0 0 10px;
}

.vbsu-detail-list{
  margin:0;
  padding-left:18px;
  font-size:.9rem;
  color:#374151;
  line-height:1.8;
}
.vbsu-detail-list li+li{
  margin-top:4px;
}

/* ============================
   Detail – 圖片區
============================ */
.vbsu-detail-media{
  position:relative;
  min-height:260px;
  transform:
    perspective(1200px)
    rotateX(var(--vbsu-tilt-x, 0deg))
    rotateY(var(--vbsu-tilt-y, 0deg));
  transition:transform .25s ease-out;
}

.vbsu-media-glass{
  position:relative;
  height:100%;
  border-radius:24px;
  padding:12px;
  background:linear-gradient(145deg,rgba(15,23,42,1),rgba(15,23,42,.9));
  box-shadow:
    0 20px 50px rgba(15,23,42,.75),
    0 0 0 1px rgba(15,23,42,.7);
  overflow:hidden;
}

.vbsu-media-img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

/* 情境示意 label */
.vbsu-media-label{
  position:absolute;
  left:16px;
  top:16px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  color:#e5e7eb;
  font-size:.78rem;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}
.vbsu-media-label i{
  font-size:.8rem;
}

/* 不同情境 */
.vbsu-media-label--violet{
  background:linear-gradient(135deg,rgba(129,140,248,.96),rgba(168,85,247,.96));
  color:#0f172a;
}
.vbsu-media-label--teal{
  background:linear-gradient(135deg,rgba(45,212,191,.96),rgba(56,189,248,.96));
  color:#022c22;
}

/* 暗部光暈 */
.vbsu-media-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%,rgba(56,189,248,.35),transparent 55%),
    radial-gradient(circle at 0 100%,rgba(59,130,246,.45),transparent 60%);
  mix-blend-mode:screen;
  opacity:.7;
  transition:opacity .25s ease;
}
.vbsu-media-glow--violet{
  background:
    radial-gradient(circle at 60% 30%,rgba(168,85,247,.4),transparent 55%),
    radial-gradient(circle at 0 100%,rgba(59,130,246,.45),transparent 60%);
}
.vbsu-media-glow--teal{
  background:
    radial-gradient(circle at 40% 30%,rgba(34,211,238,.4),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(45,212,191,.4),transparent 60%);
}

/* hover 亮一點 */
.vbsu-detail-media:hover .vbsu-media-glow{
  opacity:1;
}

/* ============================
   RWD
============================ */
@media (max-width:1024px){
  .vbsu-usage{
    padding:72px 0;
  }
  .vbsu-usage-layout{
    grid-template-columns:1fr;
  }
  .vbsu-detail-stack{
    margin-top:6px;
  }
  .vbsu-detail{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .vbsu-usage-shell{
    padding:0 16px;
  }
  .vbsu-title{
    font-size:1.7rem;
  }
  .vbsu-usage-layout{
    gap:20px;
  }
  .vbsu-detail-stack{
    padding:18px 16px;
  }
}


/* =========================
       一句話說明區塊
    ========================= */
    .vbs-oneliner-section{
      padding:96px 20px;
      display:flex;
      justify-content:center;
    }

    .vbs-oneliner-shell{
      max-width:1200px;
      width:100%;
      border-radius:32px;
      background:linear-gradient(135deg,
        rgba(255,255,255,.92),
        rgba(243,246,255,.98));
      box-shadow:var(--vbs-shadow-soft);
      padding:40px 40px 44px;
      position:relative;
      overflow:hidden;
    }

    /* 背景光暈 */
    .vbs-oneliner-shell::before{
      content:"";
      position:absolute;
      width:420px;
      height:420px;
      border-radius:999px;
      background:radial-gradient(circle at 30% 10%,
        rgba(129,140,248,.33),
        rgba(56,189,248,.0) 70%);
      filter:blur(6px);
      inset:auto auto 0 -10%;
      opacity:.75;
      pointer-events:none;
      transition:transform .6s ease-out,opacity .6s ease-out;
    }

    .vbs-oneliner-shell.is-pointer-active::before{
      opacity:.95;
      transform:translate3d(var(--vbs-glow-x,0px),var(--vbs-glow-y,0px),0);
    }

    /* 標題區 */
    .vbs-oneliner-eyebrow{
      font-size:.8rem;
      letter-spacing:.25em;
      text-transform:uppercase;
      color:#9ca3af;
      margin-bottom:14px;
    }

    .vbs-oneliner-title{
      font-size:2.1rem;
      font-weight:800;
      color:var(--vbs-text-main);
      line-height:1.3;
      margin-bottom:24px;
    }

    .vbs-oneliner-title span{
      display:block;
    }

    .vbs-oneliner-highlight{
      color:var(--vbs-accent-blue);
    }

    .vbs-oneliner-sub{
      max-width:1120px;
      font-size:.98rem;
      color:var(--vbs-text-sub);
      margin-bottom:28px;
    }

    /* Grid 容器 */
    .vbs-oneliner-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:22px;
    }

    /* 卡片 */
    .vbs-oneliner-card{
      position:relative;
      border-radius:24px;
      padding:22px 22px 20px;
      background:
        linear-gradient(145deg,
          rgba(255,255,255,.95),
          rgba(238,242,255,.9));
      border:1px solid rgba(209,213,255,.9);
      box-shadow:0 18px 40px rgba(148,163,184,.35);
      overflow:hidden;
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      cursor:pointer;
      transform:translateY(10px) scale(.98);
      opacity:0;
      transition:
        transform .4s cubic-bezier(.21,.72,.23,.99),
        box-shadow .3s ease,
        opacity .4s ease,
        border-color .3s ease;
    }

    .vbs-oneliner-card::before{
      content:"";
      position:absolute;
      inset:-20%;
      background:
        radial-gradient(circle at 0 0,rgba(59,130,246,.12),transparent 55%),
        radial-gradient(circle at 100% 100%,rgba(56,189,248,.15),transparent 60%);
      opacity:0;
      pointer-events:none;
      transition:opacity .35s ease;
    }

    .vbs-oneliner-card-inner{
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:14px;
    }

    .vbs-oneliner-iconwrap{
      width:38px;
      height:38px;
      border-radius:18px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(135deg,#3b82f6,#6366f1);
      box-shadow:0 12px 25px rgba(59,130,246,.45);
      color:#f9fafb;
      font-size:1.1rem;
    }

    .vbs-oneliner-iconwrap--latency{
      background:linear-gradient(135deg,#fb7185,#f97316);
      box-shadow:0 12px 25px rgba(248,113,113,.45);
    }

    .vbs-oneliner-iconwrap--rbac{
      background:linear-gradient(135deg,#22c55e,#14b8a6);
      box-shadow:0 12px 25px rgba(34,197,94,.45);
    }

    .vbs-oneliner-card-title{
      font-size:1.02rem;
      font-weight:700;
      color:var(--vbs-text-main);
    }

    .vbs-oneliner-card-sub{
      font-size:.8rem;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:#9ca3af;
    }

    .vbs-oneliner-card-desc{
      font-size:.9rem;
      color:var(--vbs-text-sub);
    }

    /* hover / active 效果 */
    .vbs-oneliner-card.is-visible{
      opacity:1;
      transform:translateY(0) scale(1);
    }

    .vbs-oneliner-card:hover{
      box-shadow:0 24px 55px rgba(15,23,42,.28);
      border-color:rgba(129,140,248,1);
      transform:translateY(-4px) scale(1.015);
    }

    .vbs-oneliner-card:hover::before{
      opacity:1;
    }

    /* 小型進度條動畫 */
    .vbs-oneliner-meter{
      width:100%;
      height:4px;
      border-radius:999px;
      background:rgba(148,163,184,.25);
      overflow:hidden;
      margin-top:4px;
      position:relative;
    }

    .vbs-oneliner-meter-bar{
      position:absolute;
      inset:0;
      width:34%;
      border-radius:999px;
      background:linear-gradient(90deg,#3b82f6,#38bdf8);
      animation:vbs-meter-move 2.6s ease-in-out infinite;
    }

    .vbs-oneliner-meter-bar--latency{
      background:linear-gradient(90deg,#fb7185,#f97316);
      animation-duration:2.1s;
    }
    .vbs-oneliner-meter-bar--rbac{
      background:linear-gradient(90deg,#22c55e,#14b8a6);
      animation-duration:3s;
    }

    @keyframes vbs-meter-move{
      0%{transform:translateX(-40%);}
      50%{transform:translateX(80%);}
      100%{transform:translateX(140%);}
    }

    /* RWD */
    @media (max-width:1024px){
      .vbs-oneliner-shell{
        padding:28px 22px 32px;
        border-radius:28px;
      }
      .vbs-oneliner-title{
        font-size:1.9rem;
      }
      .vbs-oneliner-grid{
        grid-template-columns:1fr;
        gap:18px;
      }
    }

    @media (max-width:640px){
      .vbs-oneliner-section{
        padding:72px 16px;
      }
      .vbs-oneliner-title{
        font-size:1.6rem;
      }
    }