/* ===============================
   VBSX HERO LAYOUT
================================ */

.vbsx-hero{
  position:relative;
  padding: clamp(48px, 6vw, 96px) 0;
  overflow:hidden;
}

.vbsx-hero-inner{  
  margin:0 auto;
  padding:0 clamp(20px, 4vw, 40px);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items:center;
}

/* ======================================================
   TABLET
====================================================== */
@media (max-width: 1023px) {
  .vbsx-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .vbsx-hero-right {
    display: flex;
    justify-content: center;
  }

  .vbsx-canvas-shell {
    max-width: 520px;
    width: 100%;
    aspect-ratio: 9 / 14;
  }
}

/* ======================================================
   MOBILE
====================================================== */
@media (max-width: 767px) {
  .vbsx-hero {
    padding: 40px 0 56px;
  }

  .vbsx-hero-inner {
    gap: 36px;
  }
}

/* ======================================================
   LEFT COPY RWD
====================================================== */
.vbsx-title {
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.15;
}

.vbsx-subtitle {
  font-size: clamp(16px, 3.5vw, 20px);
  margin-top: 12px;
}

.vbsx-lead {
  font-size: 15px;
  line-height: 1.75;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .vbsx-title {
    font-size: 34px;
  }

  .vbsx-lead {
    font-size: 14.5px;
  }
}

/* ======================================================
   VBSX TAGS RWD（iOS Glass Pills）
====================================================== */

.vbsx-tags {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.vbsx-tag {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .vbsx-tags {
    gap: 10px;
  }

  .vbsx-tag {
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ======================================================
   CANVAS CARD RWD
====================================================== */

.vbsx-canvas-shell {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 9 / 16;
  border-radius: 32px;
}

@media (max-width: 767px) {
  .vbsx-canvas-shell {
    max-width: 320px;
    aspect-ratio: 9 / 18;
    border-radius: 28px;
  }
}

/* ======================================================
   CANVAS TITLE RWD
====================================================== */

.vbsx-canvas-title {
  left: 20px;
  bottom: 20px;
  max-width: calc(100% - 40px);
}

@media (max-width: 767px) {
  .vbsx-canvas-title {
    font-size: 13px;
    padding: 10px 12px;
  }
}

@media (max-width: 640px){
  .vbsx-title{
    font-size:1.8rem;
    line-height:1.25;
  }

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

  .vbsx-tags{
    flex-wrap:wrap;
    gap:10px;
  }

  .vbsx-tag{
    font-size:13px;
    padding:8px 14px;
  }

  .vbsx-canvas-shell{
    aspect-ratio: 1 / 1;
    max-width:360px;
    margin:0 auto;
  }
}


/* ===============================
   VBSX GLASS CARD SYSTEM
================================ */

.vbsx-glass{
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius:18px;
  border:1px solid rgba(255,255,255,.6);

  box-shadow:
    0 10px 30px rgba(80,100,160,.25),
    inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ===============================
  XVBS Hero Canvas Lock
=============================== */
.vbsx-hero{
  padding: 80px 0;
  background: radial-gradient(circle at top, #eef2ff, #f7f9ff);
}


.vbsx-hero-wrap{
  max-width: 1280px;
  margin: auto;
  padding: 60px;
  background: #fff;
  border-radius: 48px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
}

.vbsx-visual-card{
  position: relative;
  height: 420px;
  border-radius: 32px;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(90,120,255,.12), transparent 60%),
    linear-gradient(180deg, #0b1224, #050814);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(20,30,80,.45);
}

#vbsxCanvas{
  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);
}

.vbsx-visual-badge{
  position:absolute;
  left:12px;
  bottom:14px;
  background: rgba(255, 255, 255, 0.784);
  backdrop-filter: blur(2px);
  padding: 5px 13px;
  border-radius: 14px;
  font-size: 13px;
}
/* Default */
.vbsx-tags{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.vbsx-tag{
  position:relative;
  display:inline-flex;
  align-items:center;  
  padding:6px 14px;
  font-size:14px;
  font-weight:600;  
  background: rgba(59,130,246,.18);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.35);
  border-radius:14px;
  transition:.3s;
  color:#47518b;
  gap:6px;
  cursor:pointer;
  transition:background var(--hp-transition-fast),
                 transform var(--hp-transition-fast),
                 box-shadow var(--hp-transition-fast),
                 color var(--hp-transition-fast);
  box-shadow:0 10px 26px rgba(150,170,230,.25);
}

/* Hover  */
.vbsx-tag::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  /* background:
    radial-gradient(circle,
      rgba(99,102,241,.35), transparent 60%); */
  border:1px solid rgba(255,255,255,.35);    
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

/* .vbsx-tag:hover::before{
  opacity:1;
} */

/* .vbsx-tag:hover{
  border-color:#7c83ff;
  transform:translateY(-1px);
  box-shadow:
    0 10px 26px rgba(165, 166, 245, 0.28);
} */

/* Active */
.vbsx-tag.active{
  color:#1e3a8a;
  border-color:#6b7cff;
  background:
    linear-gradient(180deg,
      rgba(240,243,255,.95),
      rgba(255,255,255,.88));

  box-shadow:
    0 10px 30px rgba(99,102,241,.35),
    inset 0 0 0 1px rgba(255,255,255,.7);
}

.vbsx-tag.active::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  /* background:
    radial-gradient(circle,
      rgba(99,102,241,.45),
      transparent 65%); */

  animation:vbsx-breath 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* .vbsx-tag.active::before{
  opacity:1;
  background:
    radial-gradient(circle,
      rgba(99,102,241,.45),
      transparent 65%);
} */

@keyframes vbsx-breath{
  0%,100%{ opacity:.35; }
  50%{ opacity:.75; }
}

/* Icon  */
.vbsx-tag i{
  color:#4b5563;
  transition:color .25s ease;
}

.vbsx-tag:hover i{
  color:#4f6cff;
}

.vbsx-tag.active i{
  color:#4f6cff;
}

.canvas-title{
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 5;

  background: rgba(255, 255, 255, 0.846);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 10px 14px;

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

.canvas-title h4{
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:10px;
}

#phaseIcon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.12);
  color:#c7d2fe;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 6px 18px rgba(40,80,200,.35);
  font-size:14px;
}

.canvas-title p{
  margin: 2px 0 0;
  font-size: .75rem;
  color: #5b6388;
}

/* 動畫背景層 */
.dfs-canvas-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(180,200,255,.45),
      transparent 55%),
    radial-gradient(circle at 80% 70%,
      rgba(255,220,160,.35),
      transparent 60%);
  opacity:.75;
  pointer-events:none;
}

.dfs-canvas-shell::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.18),
      transparent 70%);
  filter: blur(40px);
  animation: dfsFogMove 28s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes dfsFogMove{
  0%{ transform:translate(-4%, -2%); }
  100%{ transform:translate(4%, 3%); }
}


/* ===============================
   VBSR – iOS Glass 
=============================== */

.vbsr-section{
  padding: 120px 0;
  background:
    radial-gradient(circle at top, #ffffffa2, #f6f8ff0e 80%);
  color:#0b1437;
}

.vbsr-head{
  text-align:center;
  margin-bottom: 72px;
}

.vbsr-title{
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color:#0b1437;
}

.vbsr-sub{
  margin-top: 12px;
  color:#5f6b85;
}

/* Grid */
.vbsr-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:28px;
}

/* Card – iOS Glass */
.vbsr-card{
  position:relative;
  padding: 34px 30px 38px;
  border-radius: 26px;

  background: rgba(255,255,255,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(120,140,255,.18);

  box-shadow:
    0 24px 60px rgba(30,60,160,.12);

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

  cursor:pointer;
}

.vbsr-card:hover,
.vbsr-card.active{
  transform: translateY(-8px);
  border-color: rgba(90,120,255,.45);
  box-shadow:
    0 36px 90px rgba(30,60,160,.22);
}

/* Icon – iOS Pill */
.vbsr-ico{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  margin-bottom: 22px;
  font-size:22px;
  color:#fff;

  box-shadow:
    0 10px 26px rgba(0,0,0,.18);

  animation: vbsrBreathSoft 5.5s ease-in-out infinite;
}

.vbsr-ico.blue{background:#4b63ff;}
.vbsr-ico.green{background:#4caf84;}
.vbsr-ico.orange{background:#ff9f43;}
.vbsr-ico.purple{background:#8b5cf6;}

.vbsr-card:hover .vbsr-ico{
  animation:none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 0 22px rgba(90,120,255,.45);
}

/* Text */
.vbsr-card h3{
  font-size: 20px;
  line-height:1.35;
  margin-bottom: 14px;
  color:#0b1437;
}

.vbsr-card p{
  font-size:14px;
  line-height:1.75;
  color:#5f6b85;
}

/* iOS Gentle Breathing */
@keyframes vbsrBreathSoft{
  0%,100%{
    box-shadow:0 10px 26px rgba(0,0,0,.18);
  }
  50%{
    box-shadow:
      0 14px 36px rgba(90,120,255,.35);
  }
}

/* RWD */
@media(max-width:1200px){
  .vbsr-grid{ grid-template-columns: repeat(2,1fr); }
}
@media(max-width:640px){
  .vbsr-grid{ grid-template-columns: 1fr; }
}


/* ===============================
   DFX Unified Stream
================================ */

.dfx-unified-stream{
  padding: 120px 0;
  background: linear-gradient(180deg,#f6f8fcde,#ffffff48);
}

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

/* ===== 主系統面板 ===== */
.dfx-panel{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:64px;
  padding:64px 72px;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.88),
    rgba(248,250,255,.96)
  );
  backdrop-filter: blur(26px);
  border-radius: 36px;

  box-shadow:
    0 40px 90px rgba(120,140,210,.35),
    inset 0 1px 0 rgba(255,255,255,.7);

  position:relative;
  overflow:hidden;
}

.dfx-panel::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(600px 400px at 35% 50%,rgba(140,170,255,.25),transparent 60%),
    radial-gradient(500px 380px at 70% 50%,rgba(160,210,255,.22),transparent 60%);
  pointer-events:none;
}

/* ===============================
   LEFT – INFO
================================ */

.dfx-info{
  padding: 48px;
  max-width:1000px;
}

.dfx-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  background:#eef2ff;
  color:#4f46e5;
  margin-bottom:18px;
}

.dfx-title{
  font-size:34px;
  font-weight:1000;
  color:#121a33;
}

.dfx-desc{
  margin-top:14px;
  color:#4b556d;
  line-height:1.7;
}

.dfx-feature-list{
  list-style:none;
  margin-top:32px;
  padding:0;
}

.dfx-feature-list li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
  cursor:pointer;
  color:#1f2937;
  transition:.25s;
}

.dfx-feature-list li:hover{
  color:#2563eb;
}

.dfx-feature-list li.active{
  color:#2563eb;
  font-weight:600;
}

/* Feature Icon */
.dfx-feature-list .ico{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#2563eb;
  font-size:16px;
  background:rgba(37,99,235,.08);
  border-radius:8px;
  box-shadow:
    inset 0 0 0 1px rgba(37,99,235,.18),
    0 6px 16px rgba(37,99,235,.18);
  transition:.25s ease;
}

.dfx-feature-list li:hover .ico,
.dfx-feature-list li.active .ico{
  background:rgba(37,99,235,.18);
  box-shadow:
    inset 0 0 0 1px rgba(37,99,235,.35),
    0 10px 26px rgba(37,99,235,.35);
}

/* ===============================
   RIGHT – VISUAL
================================ */

.dfx-visual{
  position: relative;
  min-height: 460px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dfx-svg{
  width:100%;
  max-width:720px;
  height:auto;
  display:block;
}

/* ===============================
   STREAM LINES (Flow)
================================ */

.dfx-lines line{
  stroke:#9ccfc0;
  stroke-width:1.4;
  stroke-dasharray:6 10;
  opacity:.9;
  animation:dfx-flow 8s linear infinite;
  transition:stroke .25s, stroke-width .25s;
}

@keyframes dfx-flow{
  to{ stroke-dashoffset:-160; }
}

.dfx-lines line.active{
  stroke:#2563eb;
  stroke-width:2.4;
}

/* ===============================
   STREAM ICONS
================================ */

.dfx-stream rect,
.dfx-stream circle,
.dfx-stream path,
.dfx-stream polygon{
  stroke:#2f3442;
  stroke-width:1.6;
  fill:none;
  transition:.25s;
}

.dfx-stream text{
  font-size:14px;
  fill:#111827;
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

.dfx-stream{
  cursor:pointer;
  transition:transform .25s;
}

.dfx-stream:hover{
  transform:translateY(-2px);
}

.dfx-stream.active rect,
.dfx-stream.active circle,
.dfx-stream.active path,
.dfx-stream.active polygon{
  stroke:#2563eb;
}

/* ===============================
   CORE NODE
================================ */

.dfx-core-outer{
  fill:#e6f2ee;
  stroke:#2f3442;
  stroke-width:1.6;
}

.dfx-core-inner{
  fill:#ffffff;
  stroke:#2f3442;
  stroke-width:1.8;
  animation:coreBreath 7s ease-in-out infinite;
}

@keyframes coreBreath{
  0%,100%{ filter:none; }
  50%{ filter:drop-shadow(0 0 18px rgba(120,150,255,.35)); }
}

.dfx-visual:hover .dfx-core-inner{
  filter:drop-shadow(0 0 26px rgba(120,160,255,.55));
}

.dfx-core-text{
  font-size:20px;
  font-weight:700;
  fill:#000;
  text-anchor:middle;
}

/* ===============================
   POPOVER
================================ */

.dfx-pop{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(20px,-50%);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-radius:14px;
  padding:14px 18px;
  font-size:13px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  opacity:0;
  pointer-events:none;
  transition:.25s;
}

.dfx-pop.show{
  opacity:1;
}

.dfx-packet-dot{
  filter: drop-shadow(0 0 8px rgba(120,160,255,.55));
}

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

@media(max-width:1024px){
  .dfx-panel{
    grid-template-columns:1fr;
    padding:48px 32px;
    gap:40px;
  }
  .dfx-visual{ order:-1; }
}

@media(max-width:640px){
  .dfx-info{ padding:32px; }
  .dfx-title{ font-size:26px; }
}


/* =====================================================
   HX Hardware Access Section
===================================================== */

.hx-hardware-access{
  padding:120px 0;
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(120,150,255,.12), transparent 60%),
    linear-gradient(180deg,#f7f9fe,#ffffff);
}

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

/* ===== Head ===== */
.hx-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 72px;
}

.hx-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#2563eb;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
}

.hx-title{
  font-size:42px;
  font-weight:1100;
  letter-spacing:-.02em;
  color:#0f172a;
}

.hx-title span{
  font-weight:1100;
  background: linear-gradient(
    90deg,
    #4f46e5,
    #6366f1
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition: filter .4s ease, transform .4s ease;
}

.hx-desc{
  margin-top:16px; 
  position: relative;
  max-width: 1080px;
  margin: 24px -24px 56px;
  line-height:1.9;
  color:#475569;
}

@media (min-width: 1280px){
  .hx-desc{
    max-width: 1080px;
  }
}

/* 導引線 */
.hx-desc::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:2px;
  height:42px;
  background:linear-gradient(
    to bottom,
    rgba(99,102,241,.6),
    rgba(99,102,241,0)
  );
}

/* ===== Grid ===== */
.hx-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

/* ===== Card ===== */
.hx-card{
  position:relative;
  z-index: 1;
  padding:28px;
  border-radius:28px;
  background:rgba(255,255,255,.82);
  backdrop-filter: blur(22px);
  box-shadow:
    0 30px 80px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:.35s ease;
  overflow:hidden;
  cursor:pointer;
}

.hx-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(400px 220px at 50% -20%, rgba(120,160,255,.25), transparent 60%);
  opacity:0;
  transition:.4s;
}

.hx-card:hover::before{
  opacity:1;
}

.hx-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 40px 120px rgba(37,99,235,.28),
    inset 0 0 0 1px rgba(37,99,235,.25);
}

/* ===== Badge ===== */
.hx-badge{
  position:absolute;
  top:18px;
  left:18px;
  font-size:12px;
  padding:6px 12px;
  border-radius:999px;
  background:#3b82f6;
  color:#fff;
  z-index: 6;           
  pointer-events: none; /* 避免 hover 被擋 */
}

.hx-badge.purple{ background:#7c3aed; }
.hx-badge.green{ background:#16a34a; }

/* ===== Media Placeholder ===== */
.hx-media-img{
  position: relative;
  z-index: 1;
  height: 180px;
  border-radius: 18px;
  overflow: hidden;

  background:
    linear-gradient(135deg,#eef2ff,#f8fafc);
}

.hx-media-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* 不變形 */
  display: block;

  filter:
    saturate(.95)
    contrast(.95);

  transition:
    transform .6s ease,
    filter .4s ease;
}

.hx-card:hover .hx-media-img img{
  transform: scale(1.05);
  filter:
    saturate(1.05)
    contrast(1.02);
}

.hx-media-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.35) 50%,
      transparent 70%
    );
  opacity:0;
  transform: translateX(-40%);
  transition: .6s ease;
  pointer-events:none;
}

.hx-card:hover .hx-media-img::after{
  opacity:1;
  transform: translateX(40%);
}

.hx-card:hover .hx-detect-box{
  box-shadow:
    0 0 0 2px rgba(99,102,241,.35),
    0 0 36px rgba(99,102,241,.75);
}

.hx-media{
  position: relative;
  overflow: hidden;
  z-index: 1;
  height:180px;
  border-radius:20px;
  margin-bottom:22px;
  background-size:cover;
  background-position:center;
  filter: saturate(.95) contrast(.95);
}
/* 無人機框 */
.hx-card-drone 
.hx-detect-box{
  top:38%;
  left:42%;
  width:26%;
  height:22%;
}

/* 車載影像 */
.hx-card-vehicle 
.hx-detect-box{
  top:34%;
  left:28%;
  width:44%;
  height:32%;
}

.hx-media.fixed{
  background-image:linear-gradient(135deg,#dbeafe,#eff6ff);
}
.hx-media.drone{
  background-image:linear-gradient(135deg,#ede9fe,#f5f3ff);
}
.hx-media.vehicle{
  background-image:linear-gradient(135deg,#dcfce7,#f0fdf4);
}

@keyframes detectPulse{
  0%,100%{
    opacity:.75;
    transform:scale(1);
  }
  50%{
    opacity:1;
    transform:scale(1.04);
  }
}

/* ===== Text ===== */
.hx-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
}

.hx-card p{
  margin-top:10px;
  color:#475569;
  line-height:1.6;
}

/* ===== Tags ===== */
.hx-tags{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hx-tags span{
  padding:6px 12px;
  font-size:12px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#2563eb;
}

/* ===== RWD ===== */
@media(max-width:1024px){
  .hx-grid{ grid-template-columns:1fr; }
}

/* ===== SVG 動畫===== */
.hx-media-svg{
  background: linear-gradient(135deg,#eef2ff,#f8fafc);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hx-monitor-svg{
  width:100%;
  height:100%;
}

/* frame */
.hx-frame{
  fill:rgba(255,255,255,.55);
  stroke:rgba(0,0,0,.15);
  stroke-width:1.2;
}

/* grid */
.hx-gridlines line{
  stroke:rgba(0,0,0,.08);
  stroke-width:1;
}

/* scan line */
.hx-scan{
  fill:rgba(59,130,246,.35);
  animation: hx-scan-move 4s linear infinite;
}

@keyframes hx-scan-move{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(100px); }
}

/* focus box */
.hx-focus{
  fill:none;
  stroke:#3b82f6;
  stroke-width:1.8;
  stroke-dasharray:6 6;
  animation: hx-focus-pulse 2.6s ease-in-out infinite;
}

@keyframes hx-focus-pulse{
  0%,100%{ opacity:.4; }
  50%{ opacity:1; }
}

/* hover  */
.hx-card:hover .hx-scan{
  animation-duration:2.2s;
}

/* ===============================
   AI Overlay Base
================================ */

.hx-ai-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
}

/* 偵測框 */
.hx-detect-box{
  position:absolute;
  top:30%;
  left:30%;
  width:40%;
  height:40%;
  border-radius:10px;
  pointer-events:none;

  border:2px solid rgba(59,130,246,.9);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 0 28px rgba(59,130,246,.45);

  transition:
    transform .8s ease,
    opacity .6s ease,
    box-shadow .6s ease;
}

/* 鎖定中 */
.hx-detect-box.is-lock{
  opacity:1;
  transform: translate(0,0) scale(1);
}

/* 失焦中 */
.hx-detect-box.is-drift{
  opacity:.35;
  transform: translate(14px,-10px) scale(.96);
  box-shadow:
    0 0 0 2px rgba(59,130,246,.12),
    0 0 12px rgba(59,130,246,.25);
}

.hx-detect-box.is-relock{
  opacity:1;
  transform: scale(1.08);
  box-shadow:
    0 0 0 6px rgba(99,102,241,.25),
    0 0 46px rgba(99,102,241,.85);
}

@keyframes hx-lock-drift{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(10px,-6px); }
}

@keyframes hx-lock-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }
}

@keyframes hx-box-float{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(12px,-8px); }
}

@keyframes hx-box-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:1; }}


.hx-card[data-type="fixed"] .hx-detect-box{
  border-color: rgba(59,130,246,.9);
  box-shadow:
    0 0 0 4px rgba(59,130,246,.18),
    0 0 28px rgba(59,130,246,.45);

  animation:
    hx-lock-drift 8s ease-in-out infinite,
    hx-lock-pulse 3.2s ease-in-out infinite;
}

@keyframes hx-scan-vertical{
  0%{ clip-path: inset(0 0 90% 0); }
  100%{ clip-path: inset(90% 0 0 0); }
}

.hx-card[data-type="fixed"] .hx-detect-box::after{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(59,130,246,.35) 50%,
      transparent 100%
    );

  animation: hx-scan-line 3.8s linear infinite;
  pointer-events:none;
}

@keyframes hx-scan-line{
  0%{ transform: translateY(-100%); }
  100%{ transform: translateY(100%); }
}

.hx-card[data-type="drone"] .hx-detect-box{
  border-color: rgba(124,58,237,.9);
  box-shadow:
    0 0 0 6px rgba(124,58,237,.22),
    0 0 34px rgba(124,58,237,.55);

  animation:
    hx-lock-jitter 2.4s ease-in-out infinite,
    hx-lock-pulse 2.2s ease-in-out infinite;
}

.hx-card[data-type="drone"] .hx-detect-box.is-drift{
  transform: translate(-12px,10px) scale(.94);
}

@keyframes hx-lock-jitter{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(6px,-4px); }
  50%{ transform: translate(-4px,6px); }
  75%{ transform: translate(5px,3px); }
  100%{ transform: translate(0,0); }
}

.hx-card[data-type="vehicle"] .hx-detect-box{
  border-color: rgba(34,197,94,.9);
  box-shadow:
    0 0 0 6px rgba(34,197,94,.18),
    0 0 30px rgba(34,197,94,.45);

  animation:
    hx-lock-road 3.6s ease-in-out infinite,
    hx-lock-pulse 2.6s ease-in-out infinite;
}

.hx-card[data-type="vehicle"] .hx-detect-box.is-drift{
  transform: translateX(16px) scale(.96);
}

@keyframes hx-lock-road{
  0%{ transform: translateX(-6px); }
  50%{ transform: translateX(8px); }
  100%{ transform: translateX(-6px); }
}

/* ===============================
   VX Stream Share Section
================================ */
.vx-stream-share{
  padding:120px 0;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(80,120,255,.18), transparent 60%),
    linear-gradient(180deg,#050b1c,#020617);
}

.vx-shell{
  max-width:1320px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:center;
}

/* ===== LEFT ===== */
.vx-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(96,165,250,.15);
  color:#93c5fd;
  font-size:13px;
  font-weight:600;
}

.vx-title{
  margin-top:20px;
  font-size:42px;
  font-weight:800;
  color:#fff;
}

.vx-title span{
  color:#93c5fd;
}

.vx-desc{
  margin-top:18px;
  max-width:520px;
  line-height:1.9;
  color:#cbd5f5;
}

/* points */
.vx-points{
  list-style:none;
  margin-top:40px;
  padding:0;
  display:grid;
  gap:26px;
}

.vx-points li{
  display:flex;
  gap:18px;
  cursor:pointer;
  transition:.3s;
}

.vx-points li:hover{
  transform:translateX(6px);
}

.vx-ico{
  width:42px;
  height:42px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(59,130,246,.18);
  color:#93c5fd;
  font-size:18px;
}

.vx-points strong{
  color:#fff;
  font-size:18px;
}

.vx-points p{
  margin-top:6px;
  color:#c7d2fe;
  line-height:1.6;
}

/* ===== RIGHT VISUAL ===== */
.vx-visual{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  backdrop-filter: blur(28px);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}

.vx-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.65;
}

/* overlay */
.vx-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* nodes */
.vx-node{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#60a5fa;
  box-shadow:0 0 24px rgba(96,165,250,.9);
  animation:pulse 2.6s ease-in-out infinite;
}
.vx-node-label{
  position:absolute;
  top:-34px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  background:rgba(15,23,42,.75);
  backdrop-filter: blur(12px);
  color:#e0e7ff;
  white-space:nowrap;
  opacity:.85;
}
.vx-node.core{
  width:18px;
  height:18px;
  top:52%;
  left:52%;
}

.vx-node.n1{ top:32%; left:22%; }
.vx-node.n2{ top:24%; left:68%; }
.vx-node.n3{ top:72%; left:70%; }

.vx-metric{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:#93c5fd;
  opacity:.75;
}

.vx-node[data-role="traffic"]{
  background:#38bdf8;
  box-shadow:0 0 28px rgba(56,189,248,.9);
}

.vx-node[data-role="police"]{
  background:#fbbf24;
  box-shadow:0 0 28px rgba(251,191,36,.9);
}

.vx-node[data-role="ai"]{
  background:#34d399;
  box-shadow:0 0 28px rgba(52,211,153,.9);
}

.vx-stream-share[data-focus="traffic"] .vx-node[data-role="traffic"],
.vx-stream-share[data-focus="police"] .vx-node[data-role="police"],
.vx-stream-share[data-focus="ai"] .vx-node[data-role="ai"]{
  transform:scale(1.35);
  opacity:1;
}

/* lines */
.vx-line{
  position:absolute;
  height:2px;
  background:linear-gradient(90deg,transparent,#60a5fa,transparent);
  opacity:.7;
  animation:flow 4s linear infinite;
}

.vx-line.l1{
  top:36%;
  left:24%;
  width:30%;
  transform:rotate(12deg);
}

.vx-line.l2{
  top:30%;
  left:52%;
  width:22%;
  transform:rotate(-18deg);
}

.vx-line.l3{
  top:60%;
  left:52%;
  width:26%;
  transform:rotate(22deg);
}

@keyframes pulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}

@keyframes flow{
  from{ background-position:0 0; }
  to{ background-position:200px 0; }
}

/* RWD */
@media(max-width:1024px){
  .vx-shell{
    grid-template-columns:1fr;
  }
}
.vx-site-switch{
  max-width:1320px;
  margin:0 auto 28px;
  padding:0 32px;  
  gap:12px;
  margin-bottom:18px;
}

.vx-site-switch button{
  padding:8px 16px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.6);
  color:#e5e7eb;
  cursor:pointer;
  font-size:13px;
  transition:.25s;
}

.vx-site-switch button.active{
  background:#3b82f6;
  border-color:#3b82f6;
  color:#fff;
  box-shadow:0 0 20px rgba(59,130,246,.6);
}

/* warning */
.vx-stream-share[data-status="warning"] 
.vx-node[data-role="police"]{
  background:#ef4444;
  box-shadow:
    0 0 0 6px rgba(239,68,68,.25),
    0 0 32px rgba(239,68,68,.85);
  animation: failPulse 1.4s ease-in-out infinite;
}

@keyframes failPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.35); }
}

/* Standby Node */
.vx-node.standby{
  background:#22c55e;
  box-shadow:0 0 26px rgba(34,197,94,.8);
  transform:translate(400%,900%);
}

/* Popover  Node */
.vx-pop{
  position:absolute;
  min-width:160px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(15,23,42,.85);
  backdrop-filter: blur(14px);
  color:#e5e7eb;
  font-size:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:20;
}

.vx-pop.show{
  opacity:1;
  pointer-events:auto;
}

.vx-pop strong{
  font-size:13px;
  color:#93c5fd;
}

.vx-pop-row{
  margin-top:6px;
  opacity:.9;
}

/* ===============================
   Video eXchange Panel Section
================================ */
.vxp-head{
  max-width:1400px;
  margin:0 auto 56px;
  padding:0 32px;
  text-align:center;
}

.vxp-head:hover .vxp-eyebrow{
  transform:translateY(-2px);
  box-shadow:0 10px 40px rgba(251,146,60,.25);
  transition:.35s ease;
}

.vxp-eyebrow{
  display:inline-flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  color:#fb923c;
  font-size:13px;
  letter-spacing:.08em;
}

.vxp-eyebrow::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(251,146,60,.65),
    transparent
  );
  animation:eyebrowScan 3.2s linear infinite;
}

@keyframes eyebrowScan{
  to{ left:120%; }
}

.vxp-head-title{
  margin-top:18px;
  font-size:44px;
  font-weight:900;
  color:#0f172a;
  background:linear-gradient(180deg,#fff,#c7d2fe);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.vxp-stream-console{
  padding:120px 0;
  background:
    radial-gradient(800px 500px at 15% 0%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,#050b1c,#020617);
}

.vxp-shell{
  max-width:1400px;
  margin:auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:340px 1fr;
  gap:28px;
}

/* Sidebar */
.vxp-sidebar{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(26px);
  border-radius:28px;
  padding:22px;
  color:#e5e7eb;
}

.vxp-sidebar-head h3{
  font-size:15px;
  letter-spacing:.12em;
}

.vxp-status{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#1e293b;
}

.vxp-status.active{
  position: relative;
  background:#16a34a;
  color:#ecfdf5;
  overflow:hidden;
}

.vxp-status.active::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid rgba(34,197,94,.6);
  animation:statusPulse 2.6s ease-out infinite;
}

@keyframes statusPulse{
  0%{ opacity:.6; transform:scale(.85); }
  70%{ opacity:0; transform:scale(1.25); }
  100%{ opacity:0; }
}

.vxp-group-title{
  margin:26px 0 10px;
  font-size:12px;
  opacity:.7;
}

.vxp-channel{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:14px;
  border:none;
  background:transparent;
  color:#cbd5f5;
  cursor:pointer;
  display:flex;
  gap:10px;
}

.vxp-channel.active{
  background:#4f6ef7;
  color:#fff;
}

.vxp-output select{
  width:100%;
  padding:10px;
  border-radius:12px;
  border:none;
  margin:6px 0 14px;
}

.vxp-apply{
  width:100%;
  padding:12px;
  border-radius:14px;
  background:#1f2937;
  color:#fff;
  border:none;
}

/* Stage */
.vxp-stage{
  /* position:relative; */
  min-height:520px;
}

.vxp-video-wrap{
  position:relative;
  width:100%;
  height:100%;
  min-height:520px;
  overflow:hidden;
  border-radius:32px;  
  background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}

.vxp-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:1;
  pointer-events: none;
  transition:opacity .45s ease;
}

.vxp-video.active{
  opacity:1;
  z-index:2;
  pointer-events: auto;
}

.vxp-detect,
.vxp-hud,
.vxp-controls,
.vxp-failover {
  position: absolute;
  z-index: 5; /* 一定要比 video 大 */
}

.vxp-video.active::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  animation:videoScan 1.8s ease;
  pointer-events:none;
}

@keyframes videoScan{
  from{ transform:translateX(-40%); }
  to{ transform:translateX(140%); }
}

/* HUD */
.vxp-hud{
  position:absolute;
  top:16px;
  left:18px;
  display:flex;
  gap:14px;
  align-items:center;
}

.vxp-hud,
.vxp-failover{
  pointer-events:none;
}

.vxp-rec{
  background:rgba(220,38,38,.85);
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
}

/* Detect Box Base */
.vxp-detect{
  position:absolute;
  z-index:4;
  pointer-events:auto;
  border-radius:8px;
  backdrop-filter: blur(4px); 
  will-change: transform;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .4s ease,
    opacity .3s ease;
}

.vxp-info{
  color:#bfdbfe;
}

/* PERSON */
.vxp-detect[data-ai="person"]{
  border:2px solid #3b82f6;
  box-shadow:0 0 18px rgba(59,130,246,.8);
  color:#bfdbfe;  
}

/* VEHICLE */
.vxp-detect[data-ai="vehicle"]{
  border:2px solid #22c55e;
  box-shadow:0 0 18px rgba(34,197,94,.8);
  color:#bbf7d0;
}

/* DRONE */
.vxp-detect[data-ai="drone"]{
  border:2px solid #a855f7;
  box-shadow:0 0 18px rgba(168,85,247,.8);
  color:#e9d5ff;
}

.vxp-detect.show{ 
  display:block; 
  opacity:1;
  animation: detectBreath 2.6s ease-in-out infinite;
}

@keyframes detectBreath{
  0%,100%{ box-shadow:0 0 14px currentColor; }
  50%{ box-shadow:0 0 26px currentColor; }
}

@keyframes detectPulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}

.vxp-detect::after{
  content:'';
  position:absolute;
  inset:0;
  border:1px dashed rgba(255,255,255,.35);
  animation:scan 2.4s linear infinite;
}

@keyframes scan{
  0%{ opacity:.3 }
  50%{ opacity:.8 }
  100%{ opacity:.3 }
}

.vxp-detect.is-hint{
  animation:hintPulse .6s ease;
  animation: hintFlash .6s ease;
}

@keyframes hintFlash{
  0%{ box-shadow:0 0 0 rgba(255,255,255,0); }
  50%{ box-shadow:0 0 36px rgba(255,255,255,.9); }
  100%{ box-shadow:0 0 18px rgba(0,0,0,0); }
}

@keyframes hintPulse{
  0%{
    box-shadow:0 0 0 rgba(255,255,255,0);
    opacity:.85;
  }
  50%{
    box-shadow:0 0 28px currentColor;
    opacity:1;
  }
  100%{
    box-shadow:0 0 0 rgba(255,255,255,0);
    opacity:.9;
  }
}

/* Controls */
.vxp-controls{
  position:absolute;
  bottom:18px;
  right:18px;
  display:flex;
  gap:12px;
}

.vxp-controls button{
  padding:10px 12px;
  border-radius:14px;
  border:none;
  background:rgba(15,23,42,.8);
  color:#fff;
  pointer-events:auto;
}

.vxp-controls .share{
  background:#22c55e;
}

/* RWD */
@media(max-width:1024px){
  .vxp-shell{
    grid-template-columns:1fr;
  }
}
/* Popover */
.vxp-popover{
  position:absolute;
  min-width:220px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(15,23,42,.92);
  backdrop-filter:blur(20px);
  color:#e5e7eb;
  box-shadow:0 30px 60px rgba(0,0,0,.6);
  font-size:13px;
  z-index:20;
}

.vxp-popover h4{
  margin:0 0 8px;
  font-size:14px;
  color:#93c5fd;
}

.vxp-popover ul{
  list-style:none;
  padding:0;
  margin:0;
}

.vxp-popover li{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  opacity:.9;
}

/* Standby 狀態節點*/
.vxp-failover{
  position:absolute;
  bottom:80px;
  right:28px;
  display:flex;
  gap:10px;
}
/* LIVE 點呼吸*/
.live-dot{
  color:#fb923c;
  animation:liveBlink 1.6s infinite;
}

@keyframes liveBlink{
  0%,100%{ opacity:.3; }
  50%{ opacity:1; }
}

.vxp-failover .node{
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  background:rgba(15,23,42,.75);
  color:#e5e7eb;
  border:1px solid rgba(255,255,255,.12);
}

.vxp-failover .node.active{
  background:#22c55e;
  color:#052e16;
}

.vxp-failover .node.fail{
  background:#ef4444;
  color:#fff;
  animation:failPulse 1.2s infinite;
}

@keyframes failPulse{
  50%{ transform:scale(1.15); }
}

@media(max-width:1024px){
  .vxp-video-wrap{
    min-height:420px;
  }
  .vxp-stage{
    min-height:420px;
  }
}

@media(max-width:640px){
  .vxp-video-wrap{
    min-height:300px;
    border-radius:22px;
  }

  .vxp-head-title{
    font-size:32px;
  }

  .vxp-shell{
    gap:20px;
  }

  .vxp-sidebar{
    padding:18px;
  }
  .vxp-stage{
    min-height:300px;
  }
}


/* Stream icon */
.dfx-stream.is-active rect,
.dfx-stream.is-active circle,
.dfx-stream.is-active path,
.dfx-stream.is-active polygon {
  stroke: #6cf;
  fill: rgba(100,180,255,.25);
  filter: drop-shadow(0 0 8px rgba(120,200,255,.8));
}

/* Lines */
.dfx-lines line {
  stroke: rgba(255,255,255,.2);
  stroke-width: 2;
}
.dfx-lines line.is-active {
  stroke: #7dd3fc;
  stroke-width: 3;
  filter: drop-shadow(0 0 6px rgba(125,211,252,.8));
}

/* Core pulse */
.dfx-core-outer.is-pulse {
  animation: corePulse 1.2s ease-out;
}
@keyframes corePulse {
  0%   { filter: drop-shadow(0 0 0 rgba(120,200,255,0)); }
  50%  { filter: drop-shadow(0 0 18px rgba(120,200,255,.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(120,200,255,0)); }
}

/* Popover */
.dfx-pop {
  transition: opacity .25s ease;
}



/* ===============================
   VBS Architecture Section
================================ */
.vbs-arch-section{
  padding:120px 0;
  background:
    radial-gradient(800px 500px at 20% 0%, rgba(59,130,246,.18), transparent 60%),
    linear-gradient(180deg,#050b1c,#020617);
  color:#e5e7eb;
}

.vbs-arch-shell{
  max-width:1400px;
  margin:auto;
  padding:0 32px;
}

/* Header */
.vbs-arch-head{
  position:relative;
  margin-bottom:64px;
}

.vbs-arch-title{
  font-size:36px;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:12px;
}

.vbs-arch-title .dot{
  width:10px;height:10px;
  background:#3b82f6;
  border-radius:4px;
}

.vbs-arch-desc{
  margin-top:8px;
  opacity:.75;
}

.vbs-arch-ver{
  position:absolute;
  right:0; top:6px;
  font-size:12px;
  opacity:.5;
  letter-spacing:.14em;
}

/* Grid */
.vbs-arch-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:36px;
  align-items:center;
}

/* Columns */
.vbs-arch-col-title{
  font-size:14px;
  letter-spacing:.14em;
  margin-bottom:16px;
  opacity:.8;
}
.vbs-arch-col-title span{
  opacity:.4;
  margin-left:6px;
}

.vbs-arch-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px;
  margin-bottom:16px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  transition:.35s;
}

.vbs-arch-card:hover,
.vbs-arch-card.active{
  background:rgba(59,130,246,.18);
  box-shadow:0 0 0 1px rgba(59,130,246,.6);
}

/* Core */
.vbs-arch-core{
  display:flex;
  justify-content:center;
}

.vbs-core-glass{
  width:100%;
  padding:48px 36px;
  border-radius:28px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(15,23,42,.8), rgba(8,12,24,.9));
  backdrop-filter:blur(26px);
  border:1px solid transparent;
  background-clip: padding-box;
  position:relative;
  box-shadow:0 0 80px rgba(99,102,241,.12);
}

.vbs-core-glass::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  background:linear-gradient(
    135deg,
    var(--blue-main),
    var(--green-main),
    var(--yellow-main)
  );
  opacity:.45;
  z-index:-1;
  filter:blur(1px);
}

.vbs-core-icon{
  width:64px;height:64px;
  border-radius:18px;
  margin:0 auto 18px;
  background:linear-gradient(135deg,#3b82f6,#22c55e);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

.vbs-core-list{
  margin-top:24px;
  text-align:left;
  font-size:14px;
  line-height:1.8;
}
/* Icon 發光 */
.vbs-card-icon{
  background:rgba(255,255,255,.04);
  border-radius:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 18px rgba(255,255,255,.12);
}

/* ===============================
   VBS Architecture Flow Lines
================================ */
.vbs-arch-flow{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.vbs-arch-grid{
  position:relative;
}

/* 共用流線 */
.vbs-arch-flow .flow{
  position:absolute;
  width:2px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(99,102,241,.9),
    transparent
  );
  opacity:.65;
  animation:flowMove 3.6s linear infinite;
}

/* 來源 → 核心 */
.flow.source{
  left:30%;
  height:140px;
}

.flow.source.s1{ top:26%; animation-delay:0s; }
.flow.source.s2{ top:42%; animation-delay:.8s; }
.flow.source.s3{ top:58%; animation-delay:1.6s; }

/* 核心 → 分發 */
.flow.dist{
  right:30%;
  height:140px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(34,197,94,.9),
    transparent
  );
}

.flow.dist.d1{ top:26%; animation-delay:.4s; }
.flow.dist.d2{ top:42%; animation-delay:1.2s; }
.flow.dist.d3{ top:58%; animation-delay:2s; }

@keyframes flowMove{
  0%{ transform:translateY(-40px); opacity:.2; }
  50%{ opacity:1; }
  100%{ transform:translateY(40px); opacity:.2; }
}

/* ===============================
   Core List Centered
================================ */
.vbs-core-list{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
}

.vbs-core-list li{
  list-style:none;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
}

/* ===============================
   Header style = previous section
================================ */
.vbs-arch-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.vbs-arch-title .dot{
  width:10px;
  height:10px;
  background:#6366f1;
  border-radius:4px;
}

/* ===============================
   RWD
================================ */
@media(max-width:1024px){
  .vbs-arch-grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .vbs-arch-flow{
    display:none; /* 平板以下關閉流線，乾淨 */
  }
}

@media(max-width:640px){
  .vbs-core-glass{
    padding:36px 22px;
  }

  .vbs-arch-title{
    font-size:28px;
  }
}
/* 進階邊框 + 光暈 SOURCE*/
.vbs-source-card{
  background: var(--bg-panel);
  border-radius:22px;
  border:1px solid rgba(91,124,250,.35);
  box-shadow:
    inset 0 0 0 1px rgba(91,124,250,.25),
    0 0 28px rgba(91,124,250,.18);
}
/* 行動 / App / 車載*/
.vbs-green{
  border:1px solid rgba(110,214,164,.35);
  box-shadow:
    inset 0 0 0 1px rgba(110,214,164,.25),
    0 0 28px rgba(110,214,164,.18);
}
/* UAV / 第三方 API*/
.vbs-yellow{
  border:1px solid rgba(242,201,76,.45);
  box-shadow:
    inset 0 0 0 1px rgba(242,201,76,.25),
    0 0 30px rgba(242,201,76,.22);
}


/* ===== ROOT ===== */
.vbsx-arch{
  padding:120px 0;
  background:radial-gradient(circle at 50% 0%,#0b1024,#050712);
  color:#e5e7eb;
}

.vbsx-head{text-align:center;margin-bottom:60px}
.vbsx-eyebrow{color:#7aa2ff;letter-spacing:.12em}
.vbsx-title{font-size:42px}
.vbsx-desc{opacity:.7}

/* ===== GRID ===== */
.vbsx-grid{
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 420px 1fr;
  align-items:center;
  position:relative;
}

/* ===== CARDS ===== */
.vbsx-card{
  padding:22px;
  border-radius:20px;
  margin:18px 0;
  background:rgba(15,23,42,.6);
  backdrop-filter:blur(18px);
}

/* Color Variants */
.vbsx-blue{border:1px solid rgba(91,124,250,.5)}
.vbsx-green{border:1px solid rgba(110,214,164,.5)}
.vbsx-yellow{border:1px solid rgba(242,201,76,.5)}

/* ===== CORE ===== */
.vbsx-core-box{
  border-radius:28px;
  padding:36px;
  text-align:center;
  background:linear-gradient(180deg,#0b1024,#050712);
  box-shadow:0 0 80px rgba(99,102,241,.25);
}

.vbsx-core-list{
  list-style:none;
  padding:0;
  margin-top:24px;
  display:flex;
  flex-direction:column;
  align-items:center; /* 置中 */
  gap:12px;
}

/* ===== FLOW LINES ===== */
.vbsx-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.vbsx-line{
  fill:none;
  stroke-width:2.5;
  stroke-dasharray:6 10;
  animation:vbsx-flow 4s linear infinite;
}

.vbsx-line-source{stroke:#5b7cfa}
.vbsx-line-dist{stroke:#6ed6a4}

@keyframes vbsx-flow{
  to{stroke-dashoffset:-120}
}

/* ===== RWD ===== */
@media(max-width:1024px){
  .vbsx-grid{
    grid-template-columns:1fr;
    gap:60px;
  }
  .vbsx-lines{display:none}
}

/* =====================================================
   VBSX NODE SCAN EFFECT (ISOLATED)
===================================================== */
.vbsx-core-box::after{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(91,124,250,.25) 0%,
    rgba(91,124,250,.15) 30%,
    transparent 65%
  );
  animation:vbsx-scan 3.6s ease-in-out infinite;
  pointer-events:none;
}

@keyframes vbsx-scan{
  0%{opacity:0; transform:scale(.92)}
  35%{opacity:.9}
  70%{opacity:.4}
  100%{opacity:0; transform:scale(1.12)}
}

/* 節點通用 */
.vbsx-card,
.vbsx-core-box{
  position:relative;
  overflow:hidden;
}

/* 掃描光圈 */
.vbsx-scan{
  position:absolute;
  inset:-40%;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  animation:vbsx-scan 4.8s ease-in-out infinite;
}

/* 不同層級顏色 */
.vbsx-source 
.vbsx-scan{
  background:radial-gradient(circle,
    rgba(91,124,250,.35) 0%,
    rgba(91,124,250,.18) 30%,
    transparent 60%
  );
}

.vbsx-core-box 
.vbsx-scan{
  background:radial-gradient(circle,
    rgba(139,92,246,.45) 0%,
    rgba(99,102,241,.25) 30%,
    transparent 65%
  );
  animation-duration:3.6s;
}

.vbsx-dist 
.vbsx-scan{
  background:radial-gradient(circle,
    rgba(110,214,164,.35) 0%,
    rgba(110,214,164,.18) 30%,
    transparent 60%
  );
  animation-duration:5.4s;
}

@keyframes vbsx-scan{
  0%{
    transform:scale(.6);
    opacity:0;
  }
  20%{
    opacity:.8;
  }
  60%{
    opacity:.15;
  }
  100%{
    transform:scale(1.2);
    opacity:0;
  }
}

/* =====================================================
   VBSX CORE THROUGHPUT
===================================================== */
.vbsx-throughput{
  position:absolute;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:16px;
  padding:10px 18px;
  border-radius:14px;
  background:rgba(10,14,28,.55);
  backdrop-filter:blur(10px);
  font-size:11px;
  letter-spacing:.08em;
  color:#cfe0ff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
  animation:vbsx-throughput-breath 4.2s ease-in-out infinite;
}

.vbsx-tp{
  display:flex;
  align-items:center;
  gap:6px;
}

.vbsx-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5b7cfa;
  box-shadow:0 0 8px rgba(91,124,250,.9);
  animation:vbsx-dot-pulse 1.6s ease-in-out infinite;
}

.vbsx-dot.out{
  background:#6ee7b7;
  box-shadow:0 0 8px rgba(110,231,183,.9);
}

@keyframes vbsx-dot-pulse{
  0%,100%{opacity:.4}
  50%{opacity:1}
}
@keyframes vbsx-throughput-breath{
  0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
  50%{box-shadow:0 0 22px rgba(91,124,250,.35)}
}
/* =====================================================
   FAILOVER MODE
===================================================== */
.vbsx-failover 
.vbsx-core-box{
  box-shadow:
    0 0 0 1px rgba(251,146,60,.6),
    0 0 38px rgba(251,146,60,.85);
}

.vbsx-failover 
.vbsx-core-box .vbsx-scan{
  background:radial-gradient(circle,
    rgba(251,146,60,.45) 0%,
    rgba(251,146,60,.25) 30%,
    transparent 65%
  );
}

.vbsx-failover 
.vbsx-flow-line{
  stroke-dasharray:8 12;
  animation:vbsx-flow-break 1.2s linear infinite;
}

.vbsx-flow-line{
  opacity:.25;
  transition:opacity .3s ease, filter .3s ease;
}

.vbsx-flow-line.active{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(91,124,250,.9));
}

@keyframes vbsx-flow-break{
  to{stroke-dashoffset:-40}
}

/* 核心狀態標籤 */
.vbsx-core-status{
  position:absolute;
  top:16px;
  right:16px;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.12em;
  background:rgba(91,124,250,.18);
  color:#c7d6ff;
}

.vbsx-failover .vbsx-core-status{
  background:rgba(251,146,60,.25);
  color:#ffd8a8;
}

/* ===============================
   VBSX – Spec Section
=============================== */

.vbsx-spec-section{
  padding: 140px 0;
  background:
    radial-gradient(circle at 50% -10%, #121a38, #05070f 65%);
}

.vbsx-spec-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}

/* ---------- 左側規格 ---------- */
.vbsx-spec-list{
  color: #cfd6ff;
}

.vbsx-spec-title{
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 36px;
}

.vbsx-spec-row{
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.vbsx-spec-row .label{
  color: #7c89b8;
  font-size: 14px;
}

.vbsx-spec-row .value{
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  color: #8fb3ff;
  letter-spacing: .08em;
}

/* ---------- Failover 卡片 ---------- */
.vbsx-failover-card{
  position: relative;
  padding: 40px 220px 40px 44px;
  border-radius: 32px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.45);
  color: #e6ebff;
}

/* 標題列 */
.vbsx-failover-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.vbsx-failover-title{
  font-size: 22px;
  letter-spacing: .04em;
  margin-bottom: 14px;
}

.vbsx-failover-title span{
  font-size: 13px;
  opacity: .6;
}

.vbsx-failover-desc{
  font-size: 14px;
  line-height: 1.9;
  color: #b4c0ff;
  margin-bottom: 26px;
}

.vbsx-failover-status{
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(120,150,255,.15);
  color: #9fb6ff;
  letter-spacing: .14em;
}

/* ---------- 功能 Tag ---------- */
.vbsx-failover-tags{
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

.vbsx-failover-tags .tag{
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .08em;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}

.vbsx-failover-tags .blue{ color:#9fb6ff; }
.vbsx-failover-tags .green{ color:#9ff0c5; }
.vbsx-failover-tags .amber{ color:#ffd58f; }

.vbsx-failover-tags button{
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #dfe6ff;
  font-size: 13px;
  cursor: pointer;
  transition: all .25s ease;
}

.vbsx-failover-tags button:hover{
  background: rgba(120,150,255,.18);
  box-shadow: 0 0 18px rgba(120,150,255,.45);
}

/* ---------- Failover 儀表 ---------- */
.vbsx-fg{
  position:absolute;
  right:36px;
  top:50%;
  transform:translateY(-50%);
  width:168px;
  height:168px;
  border-radius:50%;
  pointer-events:none;
}

.vbsx-fg-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(
      #5a7bff 0deg,
      #7aa2ff 120deg,
      #2b345e 240deg,
      #1c223d 360deg
    );
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  animation: vbsx-fg-rotate 18s linear infinite;
}

@keyframes vbsx-fg-rotate{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.vbsx-fg-glow{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(99,102,241,.35),
    transparent 60%
  );
  filter:blur(10px);
  opacity:.65;
  animation:vbsx-fg-breath 4.8s ease-in-out infinite;
}

@keyframes vbsx-fg-breath{
  0%,100%{ opacity:.45; }
  50%{ opacity:.85; }
}

.vbsx-fg-needle{
  position:absolute;
  width:2px;
  height:70px;
  background:#9db0ff;
  left:50%;
  top:18%;
  transform-origin:bottom center;
  animation:vbsx-fg-needle 6s ease-in-out infinite;
}

@keyframes vbsx-fg-needle{
  0%,100%{ transform:rotate(-30deg); }
  50%{ transform:rotate(28deg); }
}

.vbsx-fg-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:Inter,system-ui;
}

.vbsx-fg-status{
  font-size:12px;
  letter-spacing:.18em;
  color:#9db0ff;
}

.vbsx-fg-ms{
  margin-top:4px;
  font-size:18px;
  font-weight:600;
  color:#e0e7ff;
}

@keyframes vbsx-fg-needle-alert{
  0%,100%{ transform:rotate(-45deg); }
  50%{ transform:rotate(45deg); }
}

.vbsx-failover-gauge{
  position: absolute;
  width: 160px;
  height: 160px;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 20px;
  border-radius: 50%;
  background:
    conic-gradient(#4f6cff 0deg, #2b325c 220deg);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
}

.vbsx-failover-gauge 
.ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(
      #5a7bff 0deg,
      #2b345e 240deg
    );
  mask: radial-gradient(circle, transparent 60%, #000 62%);
  opacity:.85;
}

.vbsx-failover-gauge .needle{
  position: absolute;
  width: 2px;
  height: 70px;
  background: #9db0ff;
  top: 18%;
  left: 50%;
  transform-origin: bottom center;
  animation: vbsx-needle 6s ease-in-out infinite;
}

@keyframes vbsx-needle{
  0%,100%{ transform: rotate(-35deg); }
  50%{ transform: rotate(25deg); }
}
@keyframes vbsx-needle-slow{
  0%,100%{ transform:rotate(-30deg); }
  50%{ transform:rotate(35deg); }
}

/* ---------- RWD ---------- */
@media (max-width: 960px){
  .vbsx-spec-wrap{
    grid-template-columns: 1fr;
  }
  .vbsx-failover-card{
    padding: 36px; 
  }
  .vbsx-failover-gauge{
    position:relative;
    right:auto;
    top:auto;
    transform: none;
    margin:24px auto 0;
  }
  .vbsx-fg{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    margin:28px auto 0;
  }
}


/* =====================================================
   iPhone Header Compact Fix
===================================================== */

@media (max-width: 480px) {

  header,
  .header,
  .site-header,
  .navbar,
  .topbar {
    width: 100%;
    max-width: 100%;
    min-height: 72px;
    padding: 10px 18px;
  }

  .logo img,
  .site-logo img,
  .navbar-brand img {
    max-width: 190px;
    height: auto;
  }

  .menu-toggle,
  .hamburger,
  .navbar-toggler {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }
}

/* =====================================================
   VBS Mobile Overflow Ultimate Fix   
===================================================== */

@media screen and (max-width: 768px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  main,
  section,
  .page-shell,
  .its-hero,
  .its-hero-inner,
  .its-hero-copy,
  .vbsx-hero,
  .vbsx-hero-inner,
  .vbsx-hero-wrap,
  .vbsx-arch,
  .vbsx-grid,
  .vbsx-card,
  .vbsx-core-box,
  .vbsx-spec-section,
  .vbsx-spec-wrap,
  .vbsx-failover-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  main,
  .page-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* =====================================================
     01. Hero / White Card Base
  ===================================================== */

  .its-hero,
  .vbsx-hero,
  .vbsx-arch,
  .vbsx-spec-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  .its-hero-inner,
  .vbsx-hero-inner,
  .vbsx-hero-wrap,
  .vbsx-grid,
  .vbsx-spec-wrap {
    display: block !important;
    grid-template-columns: 1fr !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }

  .its-hero-copy,
  .vbsx-card,
  .vbsx-core-box {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* =====================================================
     02. Core Competence / Heterogeneous Streams Card
  ===================================================== */

  .vbsx-card {
    padding: 34px 22px 40px !important;
    border-radius: 34px !important;
    margin: 0 auto 28px !important;
  }

  .vbsx-title,
  .vbsx-card h2,
  .vbsx-card h3,
  .vbsx-core-box h2,
  .vbsx-core-box h3 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 38px !important;
    line-height: 1.18 !important;
    letter-spacing: -0.045em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-wrap: balance;
  }

  .vbsx-card p,
  .vbsx-desc,
  .vbsx-core-box p {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .vbsx-core-list {
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .vbsx-core-list li {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 42px 1fr !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  .vbsx-core-list li i,
  .vbsx-core-list li svg {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }

  /* 若該區塊有類似 feature list 的命名，也一起收斂 */
  .vbsx-feature-list,
  .vbsx-features,
  .vbsx-points {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .vbsx-feature-list li,
  .vbsx-features li,
  .vbsx-points li {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* =====================================================
     03. SVG / Canvas Topology Fix
  ===================================================== */

  .vbsx-visual-card,
  .vbsx-canvas-shell,
  .vbs-topology-wrap,
  .vbs-topology-wrap-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 420px !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    border-radius: 30px !important;
  }

  #vbsxCanvas,
  .vbsx-visual-card svg,
  .vbsx-canvas-shell svg,
  .vbs-topology-wrap svg,
  .vbs-topology-wrap-hero svg {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block !important;
    transform: scale(.78) !important;
    transform-origin: center center !important;
  }

  /* =====================================================
     04. Failover Section Final Fix
  ===================================================== */

  .vbsx-spec-section {
    padding: 72px 0 86px !important;
  }

  .vbsx-spec-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 28px !important;
  }

  .vbsx-spec-list {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 28px !important;
  }

  .vbsx-spec-row {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .vbsx-spec-row .label,
  .vbsx-spec-row .value {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .vbsx-spec-row .value {
    margin-top: 6px !important;
  }

  .vbsx-failover-card {
    position: relative !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 30px 20px 36px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .vbsx-failover-head {
    display: block !important;
    width: 100% !important;
    margin-bottom: 18px !important;
  }

  .vbsx-failover-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 21px !important;
    line-height: 1.35 !important;
    letter-spacing: .02em !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .vbsx-failover-title span {
    display: block !important;
    margin-top: 6px !important;
  }

  .vbsx-failover-desc {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .vbsx-failover-tags {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 24px 0 30px !important;
    overflow: visible !important;
  }

  .vbsx-failover-tags .tag,
  .vbsx-failover-tags button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 11px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* 避免出現兩個圓環 */
  .vbsx-failover-gauge {
    display: none !important;
  }

  .vbsx-fg {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 146px !important;
    height: 146px !important;
    margin: 30px auto 0 !important;
  }

  .vbsx-fg-needle {
    height: 58px !important;
  }

  /* =====================================================
     05. Final Media Guard
  ===================================================== */

  img,
  svg,
  canvas,
  iframe,
  video {
    max-width: 100% !important;
  }
}


/* iPhone 12 / 390px */
@media screen and (max-width: 390px) {

  .its-hero-inner,
  .vbsx-hero-inner,
  .vbsx-hero-wrap,
  .vbsx-grid,
  .vbsx-spec-wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .its-title,
  .vbsx-title,
  .vbsx-card h2,
  .vbsx-card h3,
  .vbsx-core-box h2,
  .vbsx-core-box h3 {
    font-size: 34px !important;
  }

  .vbsx-card,
  .vbsx-core-box {
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 28px !important;
  }

  .vbsx-visual-card,
  .vbsx-canvas-shell,
  .vbs-topology-wrap,
  .vbs-topology-wrap-hero {
    min-height: 400px !important;
  }

  #vbsxCanvas,
  .vbsx-visual-card svg,
  .vbsx-canvas-shell svg,
  .vbs-topology-wrap svg,
  .vbs-topology-wrap-hero svg {
    transform: scale(.72) !important;
  }

  .vbsx-failover-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .vbsx-fg {
    width: 132px !important;
    height: 132px !important;
  }
}

/* iPhone 14 Pro Max / 430px */
@media screen and (min-width: 391px) and (max-width: 430px) {

  .its-title {
    font-size: 38px !important;
  }

  .vbsx-title,
  .vbs-arch-title {
    font-size: 38px !important;
  }
}

@media screen and (max-width: 768px) {
  [class*="shell"],
  [class*="wrap"],
  [class*="inner"],
  [class*="section"] {
    max-width: 100% !important;
  }
}