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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hero-tags{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hero-tags .tag{
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(145,170,255,.55);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(32,46,118,.9));
  color:#dfe6ff;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.7);
  transition:
    background .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


.vbs-vida{
  padding:80px 0;
  background:radial-gradient(circle at top left,#15224b 0,#050f3a 50%,#020412 100%);
  color:#e7edff;
}

.vbs-vida-shell{
  max-width:1320px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr);
  gap:56px;
  align-items:flex-start;
}

/* 左側文案區 */
.vbs-vida-eyebrow{
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8fd6ff;
  margin-bottom:10px;
}

.vbs-vida-title{
  font-size:2.3rem;
  line-height:1.35;
  margin:0 0 14px;
}

.vbs-vida-title span{
  display:inline-block;
  font-size:1.1rem;
  font-weight:500;
  color:#9fb6ff;
  margin-top:6px;
}

.vbs-vida-lead{
  font-size:.98rem;
  line-height:1.8;
  color:#ccd6ff;
  max-width:640px;
}

.vbs-vida-pill-group{
  margin:22px 0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.vbs-vida .pill{
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(159,182,255,.45);
  background:rgba(12,24,70,.9);
  font-size:.78rem;
  white-space:nowrap;
}

.vbs-vida-highlights{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  max-width:640px;
}

.vh-item h3{
  font-size:1rem;
  margin-bottom:4px;
}

.vh-item p{
  font-size:.9rem;
  line-height:1.7;
  color:#c2cff8;
}

/* 右側架構區 */
.vbs-vida-right{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.vbr-layer{
  border-radius:18px;
  padding:18px 18px 16px;
  position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.vbr-layer h4{
  font-size:1rem;
  margin-bottom:4px;
}

.vbr-layer p{
  font-size:.86rem;
  line-height:1.6;
}

/* Edge 層 */
.vbr-edge{
  background:linear-gradient(135deg,rgba(32,52,110,.9),rgba(35,86,138,.95));
}

.vbr-tags{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.vbr-tags span{
  font-size:.78rem;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(4,12,40,.75);
  border:1px solid rgba(166,199,255,.6);
}

/* Core 層 */
.vbr-core{
  background:linear-gradient(135deg,rgba(16,41,112,1),rgba(98,128,255,.95));
}

.vbr-core-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}

.vida-chip{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(4,14,48,.85);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.vbr-core-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:6px;
}

.core-box{
  background:rgba(6,20,68,.9);
  border-radius:12px;
  padding:10px 10px 9px;
  font-size:.8rem;
}

.core-box h5{
  font-size:.82rem;
  margin-bottom:4px;
}

/* App 層 */
.vbr-app{
  background:linear-gradient(135deg,rgba(22,57,120,1),rgba(23,110,143,.95));
}

.vbr-app-list{
  margin:10px 0 0 16px;
  padding:0;
  font-size:.84rem;
  line-height:1.7;
}

/* 連接箭頭 */
.vbr-arrow{
  align-self:center;
  margin:4px 0;
  padding:4px 12px;
  border-radius:999px;
  border:1px dashed rgba(160,190,255,.7);
  font-size:.78rem;
  color:#bcd3ff;
  background:rgba(5,16,52,.9);
}

/* RWD */
@media (max-width:960px){
  .vbs-vida-shell{
    grid-template-columns:minmax(0,1fr);
    gap:42px;
  }
}

@media (max-width:640px){
  .vbs-vida{
    padding:60px 0;
  }
  .vbs-vida-title{
    font-size:1.9rem;
  }
  .vbr-core-grid{
    grid-template-columns:minmax(0,1fr);
  }
}
/* vbs ai */
.vbs-ia{padding:90px 0;background:radial-gradient(circle at top,#14204e,#050b22);}
.vbs-ia-shell{max-width:1400px;margin:auto;padding:0 24px;color:#e8eeff;}
.vbs-ia-title{text-align:center;margin-bottom:40px}
.vbs-ia-title .eyebrow{color:#7ce6ff;font-size:.8rem;letter-spacing:.2em}
.vbs-ia-title h2{font-size:2.2rem;margin:6px 0}
.vbs-ia-title .desc{color:#bcd3ff}

.vbs-svg{width:100%;height:auto}

.ia-node rect{
  fill:#08163e;
  stroke:#7bd5ff;
  stroke-width:1.8;
  transition:.25s;
}
.ia-node text{fill:#e9f1ff;font-size:15px;text-anchor:middle}

.ia-node:hover rect{fill:#0c2a7a;filter:drop-shadow(0 0 10px #00eaff)}

.core rect{fill:#102f88;stroke:#38ffb3}
.core-title{font-size:17px;font-weight:700}
.core-sub{font-size:13px;fill:#bafce8}

.flow{
  fill:none;
  stroke:url(#flowCyan);
  stroke-width:3;
  stroke-dasharray:14 10;
  animation:flowMove 1.6s linear infinite;
}

@keyframes flowMove{
  to{stroke-dashoffset:-48}
}

.vbs-ia-panel{
  margin:30px auto 0;
  max-width:520px;
  background:rgba(5,20,60,.9);
  border:1px solid rgba(120,220,255,.6);
  border-radius:18px;
  padding:18px 22px;
  text-align:center;
}


.vbs-boxflow{
  position:relative;
  max-width:1400px;
  margin:100px auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  font-family:Inter,system-ui;
}

.vbs-title{
  text-align:center;
  font-weight:800;
  letter-spacing:.1em;
  color:#17b6c8;
  margin-bottom:20px;
}

.vbs-col{
  background:#f7f9fc;
  border-radius:24px;
  padding:20px 18px 26px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  position:relative;
}

.vbs-box{
  background:#fff;
  border-radius:14px;
  padding:14px;
  margin:14px 0;
  text-align:center;
  font-weight:600;
  border:1px solid #dde5f2;
}

.vbs-core{
  background:#eef3ff;
}

.vbs-box.core{
  background:#3f63ff;
  color:white;
}

.vbs-mini{
  margin-top:10px;
  text-align:center;
  font-size:.8rem;
  color:#4f6fff;
}

/* 動態線 */
.vbs-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

.flow{
  fill:none;
  stroke:#17b6c8;
  stroke-width:3;
  stroke-dasharray:10 12;
  animation:dash 1.2s linear infinite;
}

.flow.purple{
  stroke:#7b6cff;
}

@keyframes dash{
  to{stroke-dashoffset:-44}
}


/* ======================================================
   HUBORBIT – Mode Animations 
====================================================== */
.huborbit-glass{ position:relative; }
.huborbit-glass .huborbit-fx{
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 5; /* above rings/cards but still subtle */
}

/* tiny sparks for multi-source mode */
.huborbit-spark{
  position:absolute;
  left:50%; top:50%;
  width: var(--s, 6px);
  height: var(--s, 6px);
  border-radius:999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 18px rgba(96,165,250,.55);
  transform:
    translate(-50%,-50%)
    rotate(var(--rot, 0deg))
    translateX(var(--r, 120px));
  opacity: 0;
}

/* shared pulses */
@keyframes hubPulse {
  0%   { transform: translateZ(0) scale(1);   filter:saturate(1);   }
  45%  { transform: translateZ(0) scale(1.03); filter:saturate(1.15); }
  100% { transform: translateZ(0) scale(1);   filter:saturate(1);   }
}
@keyframes hubGlow {
  0%   { opacity:.08; transform:scale(1); }
  40%  { opacity:.18; transform:scale(1.04); }
  100% { opacity:.08; transform:scale(1); }
}
@keyframes hubSparkOrbit {
  0%{
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(var(--rot,0deg))
      translateX(var(--r,120px));
  }
  12%{ opacity:.9; }
  65%{ opacity:.55; }
  100%{
    opacity: 0;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--rot,0deg) + 320deg))
      translateX(var(--r,120px));
  }
}
@keyframes hubSequence {
  0%{ box-shadow: 0 0 0 rgba(0,0,0,0); transform: translateZ(0) scale(1); }
  45%{ box-shadow: 0 22px 55px rgba(79,70,229,.18), inset 0 1px 0 rgba(255,255,255,.7); transform: translateZ(0) scale(1.03); }
  100%{ box-shadow: 0 0 0 rgba(0,0,0,0); transform: translateZ(0) scale(1); }
}
@keyframes hubMeter {
  0%{ transform:scaleX(.18); opacity:.35; }
  40%{ transform:scaleX(.82); opacity:.78; }
  100%{ transform:scaleX(.38); opacity:.45; }
}
@keyframes hubGovScan {
  0%{ transform: translateY(-18%); opacity:.0; }
  22%{ opacity:.55; }
  60%{ opacity:.35; }
  100%{ transform: translateY(18%); opacity:.0; }
}

/* --- Base: right-side cards get a tiny  --- */
.huborbit-card{ position:relative; }
.huborbit-card::after{
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:10px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  opacity:0;
  transform-origin:left center;
}

/* --- MODE: MULTI SOURCE --- */
.huborbit-glass.hub-mode-multi .huborbit-core-glow{
  animation: hubGlow 1.25s ease-in-out infinite;
}
.huborbit-glass.hub-mode-multi .huborbit-rings span{
  opacity: .9;
  filter: saturate(1.05);
}
.huborbit-glass.hub-mode-multi .huborbit-spark{
  animation: hubSparkOrbit var(--d, 1600ms) ease-in-out infinite;
  animation-delay: var(--delay, 0ms);
}

/* highlight multiple cards softly */
.huborbit-glass.hub-mode-multi [data-huborbit-card="rtsp"],
.huborbit-glass.hub-mode-multi [data-huborbit-card="event"],
.huborbit-glass.hub-mode-multi [data-huborbit-card="client"]{
  animation: hubPulse 1.1s ease-in-out infinite;
}

/* --- MODE: RELAY  --- */
/* sequential “dispatch” feel: rtsp -> cloud -> client -> event */
.huborbit-glass.hub-mode-relay .huborbit-core-glow{
  animation: hubGlow 900ms ease-in-out infinite;
}
.huborbit-glass.hub-mode-relay [data-huborbit-card="rtsp"]{
  animation: hubSequence 1.35s ease-in-out infinite;
}
.huborbit-glass.hub-mode-relay [data-huborbit-card="cloud"]{
  animation: hubSequence 1.35s ease-in-out infinite;
  animation-delay: .22s;
}
.huborbit-glass.hub-mode-relay [data-huborbit-card="client"]{
  animation: hubSequence 1.35s ease-in-out infinite;
  animation-delay: .44s;
}
.huborbit-glass.hub-mode-relay [data-huborbit-card="event"]{
  animation: hubSequence 1.35s ease-in-out infinite;
  animation-delay: .66s;
}

/* --- MODE: BANDWIDTH--- */
/* show meters on all cards, “throttle” rhythm */
.huborbit-glass.hub-mode-bandwidth .huborbit-card::after{
  opacity:1;
  background: linear-gradient(90deg, rgba(96,165,250,.95), rgba(79,70,229,.95));
  animation: hubMeter 1.15s ease-in-out infinite;
}
.huborbit-glass.hub-mode-bandwidth .huborbit-rings span{
  opacity:.75;
}
.huborbit-glass.hub-mode-bandwidth .huborbit-core-glow{
  animation: hubGlow 1.6s ease-in-out infinite;
}

/* --- MODE: GOVERNANCE  --- */
/* governance scan overlay + stronger “event log” emphasis */
.huborbit-glass.hub-mode-govern::before{
  content:"";
  position:absolute; inset:10px;
  border-radius: 26px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.00), rgba(96,165,250,.20), rgba(255,255,255,.00));
  mix-blend-mode: screen;
  opacity:0;
  animation: hubGovScan 1.35s ease-in-out infinite;
}
.huborbit-glass.hub-mode-govern .huborbit-core-circle{
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 28px 90px rgba(79,70,229,.25);
}
.huborbit-glass.hub-mode-govern [data-huborbit-card="event"]{
  animation: hubPulse 980ms ease-in-out infinite;
}
.huborbit-glass.hub-mode-govern [data-huborbit-card="rtsp"],
.huborbit-glass.hub-mode-govern [data-huborbit-card="cloud"],
.huborbit-glass.hub-mode-govern [data-huborbit-card="client"]{
  filter: saturate(.92);
  opacity: .96;
}


/* ======================================================
   HUBORBIT – 4 Modes with Phase Story 
====================================================== */

.huborbit-glass{ position:relative; }
.huborbit-glass .huborbit-fx{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:5;
}
/* ---------- phase tags  ---------- */

/* subtle core glow baseline */
@keyframes hubCoreBreath{
  0%{ opacity:.10; transform:translateZ(0) scale(1); }
  45%{ opacity:.20; transform:translateZ(0) scale(1.04); }
  100%{ opacity:.10; transform:translateZ(0) scale(1); }
}

/* scanning / policy */
@keyframes hubScan{
  0%{ transform: translateY(-22%); opacity:0; }
  20%{ opacity:.55; }
  60%{ opacity:.30; }
  100%{ transform: translateY(22%); opacity:0; }
}

/* card pulse */
@keyframes hubCardPulse{
  0%{ transform:translateZ(0) scale(1); box-shadow:none; }
  45%{ transform:translateZ(0) scale(1.035); box-shadow:0 22px 55px rgba(79,70,229,.18), inset 0 1px 0 rgba(255,255,255,.70); }
  100%{ transform:translateZ(0) scale(1); box-shadow:none; }
}

/* bandwidth meter */
@keyframes hubMeter{
  0%{ transform:scaleX(.20); opacity:.35; }
  45%{ transform:scaleX(.90); opacity:.80; }
  100%{ transform:scaleX(.35); opacity:.45; }
}

/* small queue dots */
@keyframes hubQueueDot{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  25%{ opacity:.7; }
  70%{ opacity:.55; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(.7); }
}

/* ingress particles */
.huborbit-pkt{
  position:absolute;
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 18px rgba(96,165,250,.55);
  opacity:0;
}

/* packet to core: uses CSS vars set by JS (x,y) start; ends at core */
@keyframes hubPktToCore{
  0%{
    opacity:0;
    transform: translate(var(--sx), var(--sy)) scale(.8);
  }
  15%{ opacity:.9; }
  100%{
    opacity:0;
    transform: translate(var(--cx), var(--cy)) scale(.7);
  }
}

/* audit stamp */
.huborbit-stamp{
  position:absolute;
  left:50%; top:50%;
  width:84px; height:84px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(96,165,250,.12) inset, 0 18px 60px rgba(79,70,229,.18);
  transform: translate(-50%,-50%) scale(.92);
  opacity:0;
}
.huborbit-stamp::after{
  content:"✓ AUDIT";
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%,-50%);
  font-weight:900;
  letter-spacing:.12em;
  font-size:12px;
  color: rgba(234,242,255,.85);
}
@keyframes hubStampPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.86) rotate(-6deg); }
  30%{ opacity:.62; }
  60%{ opacity:.38; transform:translate(-50%,-50%) scale(1.04) rotate(2deg); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.92) rotate(0deg); }
}

/* ============ COMMON: keep core alive per mode ============ */
.huborbit-glass.hub-mode-multi .huborbit-core-glow,
.huborbit-glass.hub-mode-relay .huborbit-core-glow,
.huborbit-glass.hub-mode-bandwidth .huborbit-core-glow,
.huborbit-glass.hub-mode-govern .huborbit-core-glow{
  animation: hubCoreBreath 1.6s ease-in-out infinite;
}

/* ======================================================
   MODE A: MULTI 
====================================================== */
.huborbit-glass.hub-mode-multi.hub-p1 .huborbit-rings span{ opacity:.95; }
.huborbit-glass.hub-mode-multi.hub-p2 .huborbit-core-circle{
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 28px 90px rgba(79,70,229,.22);
}
.huborbit-glass.hub-mode-multi.hub-p3 [data-huborbit-card="rtsp"],
.huborbit-glass.hub-mode-multi.hub-p3 [data-huborbit-card="event"],
.huborbit-glass.hub-mode-multi.hub-p3 [data-huborbit-card="client"]{
  animation: hubCardPulse 1.05s ease-in-out infinite;
}

/* ======================================================
   MODE B: RELAY 
====================================================== */
.huborbit-glass.hub-mode-relay.hub-p1 [data-huborbit-card="rtsp"]{ animation: hubCardPulse 1.1s ease-in-out infinite; }
.huborbit-glass.hub-mode-relay.hub-p2 [data-huborbit-card="cloud"]{ animation: hubCardPulse 1.1s ease-in-out infinite; }
.huborbit-glass.hub-mode-relay.hub-p3 [data-huborbit-card="client"]{ animation: hubCardPulse 1.1s ease-in-out infinite; }
.huborbit-glass.hub-mode-relay.hub-p4 [data-huborbit-card="event"]{ animation: hubCardPulse 1.1s ease-in-out infinite; }

/* ======================================================
   MODE C: BANDWIDTH 
====================================================== */
.huborbit-card{ position:relative; }
.huborbit-card::after{
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:10px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  opacity:0;
  transform-origin:left center;
}

.huborbit-glass.hub-mode-bandwidth .huborbit-card::after{
  opacity:1;
  background: linear-gradient(90deg, rgba(96,165,250,.95), rgba(79,70,229,.95));
}

/* throttle (short) */
.huborbit-glass.hub-mode-bandwidth.hub-p1 .huborbit-card::after{
  animation: none;
  transform: scaleX(.28);
  opacity:.55;
}

/* queue (dots near core) */
.huborbit-glass.hub-mode-bandwidth.hub-p2 .huborbit-card::after{
  animation: none;
  transform: scaleX(.38);
  opacity:.55;
}

/* release (long + pulse) */
.huborbit-glass.hub-mode-bandwidth.hub-p3 .huborbit-card::after{
  animation: hubMeter 1.0s ease-in-out infinite;
}
.huborbit-glass.hub-mode-bandwidth.hub-p3 .huborbit-core-circle{
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 28px 90px rgba(96,165,250,.22);
}

/* stable */
.huborbit-glass.hub-mode-bandwidth.hub-p4 .huborbit-card::after{
  animation: hubMeter 1.35s ease-in-out infinite;
  opacity:.45;
}

/* ======================================================
   MODE D: GOVERN – scan + event + audit stamp
====================================================== */
.huborbit-glass.hub-mode-govern.hub-p1::before{
  content:"";
  position:absolute; inset:10px;
  border-radius: 26px;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(255,255,255,.00),
    rgba(96,165,250,.22),
    rgba(255,255,255,.00)
  );
  mix-blend-mode: screen;
  opacity:0;
  animation: hubScan 1.25s ease-in-out infinite;
}

.huborbit-glass.hub-mode-govern.hub-p2 [data-huborbit-card="event"]{
  animation: hubCardPulse 980ms ease-in-out infinite;
}

.huborbit-glass.hub-mode-govern.hub-p3 .huborbit-stamp{
  animation: hubStampPop 1.05s ease-in-out infinite;
}


/* ======================================================
   HUBORBIT – NOC HUD Add-on 
====================================================== */
.huborbit-glass{
  position:relative;
  overflow:hidden;
}

/* subtle grid + vignette  */
.huborbit-glass::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 30%, rgba(99,102,241,.10), transparent 52%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  opacity:.28;
  mix-blend-mode: overlay;
}

/* HUD wrapper */
.hubhud{
  position:absolute;
  left: var(--hud-x, auto);
  top:  var(--hud-y, 14px);
  right: auto;
  transform: translateZ(0) scale(.92);  
  transform-origin: top right;
  opacity:.92;
  width: 220px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(2,6,23,.64);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 8;
  color: rgba(234,242,255,.92);
  font-family: Inter, system-ui, "Noto Sans TC", sans-serif;
}

.hubhud .hud-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.hubhud .hud-title b{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hubhud .hud-chip{
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.82);
}

.hubhud .hud-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
}
.hubhud .hud-item{
  padding:8px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.hubhud .hud-k{
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(226,232,240,.64);
}
.hubhud .hud-v{
  margin-top:3px;
  font-size:13px;
  font-weight:900;
  color: rgba(241,245,249,.92);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.hubhud .hud-v small{
  font-size:10px;
  color: rgba(226,232,240,.60);
  font-weight:800;
}

/* sparkline */
.hubhud .hud-spark{
  margin-top:10px;
  height:36px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.hubhud canvas{
  width:100%;
  height:100%;
  display:block;
}

/* ======================================================
   SOC Docking 
====================================================== */
.hubhud, .hublog{
  pointer-events:none;           
  user-select:none;
}

/* log ticker */
.hublog{
  position:absolute;
  left: var(--log-x, 14px);
  top:  var(--log-y, auto);
  right: var(--log-r, 14px);
  bottom: var(--log-b, 14px);
  opacity:.90;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(2,6,23,.52);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 60px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 8;
  color: rgba(234,242,255,.86);
}
.hublog .log-row{
  font-size:10.5px;
  line-height:1.35;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.92;
}
.hublog .log-row .ts{
  color: rgba(226,232,240,.60);
  margin-right:8px;
  font-weight:800;
}
.hublog .log-row .lvl{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-right:8px;
  font-weight:900;
  letter-spacing:.08em;
}
.hublog .dot{
  width:7px; height:7px;
  border-radius:999px;
  display:inline-block;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 14px rgba(34,197,94,.35);
}
/* SOC severity */
.hubhud.is-warn{ box-shadow: 0 22px 60px rgba(245,158,11,.14), inset 0 1px 0 rgba(255,255,255,.06); }
.hubhud.is-err { box-shadow: 0 22px 60px rgba(239,68,68,.14), inset 0 1px 0 rgba(255,255,255,.06); }

/* LED on orbit cards */
.huborbit-card{
  position:relative;
}
.huborbit-card .hub-led{
  position:absolute;
  top:10px; left:10px;
  width:9px; height:9px;
  border-radius:999px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 16px rgba(34,197,94,.35);
  opacity:.95;
}
.huborbit-card.is-warn .hub-led{
  background: rgba(245,158,11,.95);
  box-shadow: 0 0 16px rgba(245,158,11,.38);
}
.huborbit-card.is-err .hub-led{
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 16px rgba(239,68,68,.38);
}

/* tiny “blink” */
@keyframes hubLedBlink{
  0%{ transform:scale(1); opacity:.95; }
  50%{ transform:scale(1.25); opacity:1; }
  100%{ transform:scale(1); opacity:.95; }
}
.huborbit-card.blink .hub-led{ animation: hubLedBlink 520ms ease-in-out; }


/* ======================================================
   HUBORBIT FX / HUD / LOG
====================================================== */

/* FX overlay layer */
.huborbit-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4; 
}

/* Packet dot */
.huborbit-pkt{
  position:absolute;
  left:0; top:0;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 0 18px rgba(255,255,255,.35);
  opacity:0;
  transform: translate(var(--sx, 0px), var(--sy, 0px));
}

.huborbit-pkt::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(96,165,250,.24), transparent 62%);
  opacity:.9;
}

/* Color accents per target */
.huborbit-pkt.is-rtsp { box-shadow: 0 0 18px rgba(250,204,21,.35); }
.huborbit-pkt.is-cloud{ box-shadow: 0 0 18px rgba(168,85,247,.35); }
.huborbit-pkt.is-event{ box-shadow: 0 0 18px rgba(239,68,68,.35); }
.huborbit-pkt.is-client{ box-shadow: 0 0 18px rgba(34,197,94,.35); }

/* Ingest: perimeter -> core */
@keyframes hubPktToCore{
  0%   { opacity:0; transform: translate(var(--sx), var(--sy)) scale(.8); filter:saturate(1); }
  12%  { opacity:.95; }
  100% { opacity:0; transform: translate(var(--cx), var(--cy)) scale(.9); filter:saturate(1.1); }
}

/* Dispatch: core -> target */
@keyframes hubPktFromCore{
  0%   { opacity:0; transform: translate(var(--sx), var(--sy)) scale(.85); }
  10%  { opacity:.95; }
  100% { opacity:0; transform: translate(var(--cx), var(--cy)) scale(.95); }
}

/* Queue dot  */
@keyframes hubQueueDot{
  0%   { opacity:0; transform: translate(var(--qx), var(--qy)) scale(.6); }
  18%  { opacity:.85; }
  80%  { opacity:.35; }
  100% { opacity:0; transform: translate(var(--qx), calc(var(--qy) + 18px)) scale(.95); }
}

/* Alert pulse  */
.huborbit-pulse{
  position:absolute;
  left:0; top:0;
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 22px rgba(239,68,68,.32);
  transform: translate(var(--px), var(--py));
  opacity:0;
  animation: hubAlertPulse 860ms ease-out forwards;
}
@keyframes hubAlertPulse{
  0%{ opacity:0; transform: translate(var(--px), var(--py)) scale(.7); }
  20%{ opacity:.95; }
  100%{ opacity:0; transform: translate(var(--px), var(--py)) scale(2.6); }
}

/* Audit sweep */
.huborbit-sweep{
  position:absolute;
  left:50%; top:50%;
  width: 76%;
  aspect-ratio:1/1;
  transform: translate(-50%,-50%) rotate(0deg);
  border-radius:999px;
  background: conic-gradient(from 0deg,
    rgba(96,165,250,0) 0deg,
    rgba(96,165,250,.22) 20deg,
    rgba(96,165,250,0) 55deg,
    rgba(96,165,250,0) 360deg
  );
  filter: blur(.2px);
  opacity:.0;
  animation: hubAuditSweep 1200ms ease-out forwards;
}
@keyframes hubAuditSweep{
  0%{ opacity:0; transform: translate(-50%,-50%) rotate(0deg) scale(.98); }
  12%{ opacity:.55; }
  100%{ opacity:0; transform: translate(-50%,-50%) rotate(220deg) scale(1.02); }
}

/* LED dot on cards */
[data-huborbit-card]{
  position:relative;
}
.hub-led{
  position:absolute;
  right:10px; top:10px;
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(148,163,184,.55);
  box-shadow: 0 0 10px rgba(148,163,184,.18);
}
[data-huborbit-card].is-warn .hub-led{
  background: rgba(250,204,21,.95);
  box-shadow: 0 0 14px rgba(250,204,21,.28);
}
[data-huborbit-card].is-err .hub-led{
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 14px rgba(239,68,68,.28);
}
[data-huborbit-card].blink .hub-led{
  animation: hubLedBlink 620ms ease;
}
@keyframes hubLedBlink{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.5); }
  100%{ transform:scale(1); }
}

/* HUD / LOG base  */
.hubhud, .hublog{ pointer-events:none; user-select:none; }

.hubhud{
  position:absolute;
  left: var(--hud-x, auto);
  top:  var(--hud-y, 14px);
  right:auto;

  width: 240px;
  border-radius: 16px;
  padding: 12px 12px 10px;
  z-index:6;

  background: rgba(2,6,23,.62);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}

.hubhud .hud-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.hubhud .hud-title b{ color:rgba(241,245,249,.92); font-size:12px; letter-spacing:.08em; }
.hubhud .hud-chip{
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:900; letter-spacing:.08em;
  color:rgba(241,245,249,.85);
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
}

.hubhud .hud-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.hubhud .hud-item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 8px 8px 7px;
}
.hubhud .hud-k{
  font-size:10px; letter-spacing:.10em;
  color: rgba(148,163,184,.80);
}
.hubhud .hud-v{
  margin-top:6px;
  display:flex; align-items:baseline; justify-content:space-between;
  color: rgba(241,245,249,.92);
  font-weight:900;
}
.hubhud .hud-v small{ color: rgba(148,163,184,.78); font-weight:800; }

.hubhud .hud-spark{
  margin-top:10px;
  height: 22px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.hubhud .hud-spark canvas{ width:100%; height:100%; display:block; }

.hubhud.is-warn{ box-shadow: 0 22px 60px rgba(250,204,21,.10), 0 20px 60px rgba(0,0,0,.22); }
.hubhud.is-err { box-shadow: 0 22px 60px rgba(239,68,68,.10), 0 20px 60px rgba(0,0,0,.22); }

/* Log bar */
.hublog{
  position:absolute;
  left: var(--log-x, 14px);
  right: var(--log-r, 14px);
  bottom: var(--log-b, 14px);
  top: var(--log-y, auto);

  z-index:6;
  border-radius: 14px;
  overflow:hidden;
  background: rgba(2,6,23,.48);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

.hublog .log-row{
  display:flex; gap:10px; align-items:center;
  padding: 8px 10px;
  border-top:1px solid rgba(255,255,255,.06);
  color: rgba(226,232,240,.86);
  font-size: 10.5px;
}
.hublog .log-row:first-child{ border-top:none; }

.hublog .ts{ opacity:.75; font-variant-numeric: tabular-nums; }
.hublog .lvl{
  display:flex; align-items:center; gap:6px;
  font-weight:900; letter-spacing:.06em;
  color: rgba(148,163,184,.95);
}
.hublog .lvl .dot{
  width:6px; height:6px; border-radius:999px;
  background: rgba(34,197,94,.95);
}
.hublog .lvl.warn{ color: rgba(250,204,21,.92); }
.hublog .lvl.warn .dot{ background: rgba(250,204,21,.95); }
.hublog .lvl.err{ color: rgba(239,68,68,.92); }
.hublog .lvl.err .dot{ background: rgba(239,68,68,.95); }

/* Tiny phase polish  */
.hub-mode-multi .huborbit-core-glow{ opacity:.9; }
.hub-mode-relay .huborbit-core-glow{ opacity:.85; }
.hub-mode-bandwidth .huborbit-core-glow{ opacity:.8; }
.hub-mode-govern .huborbit-core-glow{ opacity:.95; }

/* Optional: core ping on dispatch */
@keyframes hubCorePing{
  0%{ transform: scale(1); opacity:.0; }
  18%{ opacity:.55; }
  100%{ transform: scale(1.26); opacity:0; }
}
.huborbit-core::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width: 140px; height: 140px;
  transform: translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(96,165,250,.18);
  opacity:0;
}
.hub-mode-relay.hub-p2 .huborbit-core::after,
.hub-mode-govern.hub-p2 .huborbit-core::after{
  animation: hubCorePing 900ms ease-out infinite;
}

/* ======================================================
   SOC Beacon
====================================================== */
.soc-beacon{
  position:absolute;
  right: 16px;
  top:  16px;
  z-index:7;               /* above FX & orbits */
  pointer-events:none;
  user-select:none;

  display:flex;
  gap:10px;
  align-items:center;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(2,6,23,.52);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0,0,0,.20);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.soc-beacon.show{
  opacity: 1;
  transform: translateY(0);
}

.soc-beacon .lamp{
  width: 16px; height: 16px;
  border-radius: 999px;
  background: rgba(148,163,184,.65);
  box-shadow: 0 0 10px rgba(148,163,184,.18);
  position: relative;
}

.soc-beacon .lamp::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(148,163,184,.20), transparent 64%);
  opacity:.0;
}

.soc-beacon .meta{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.soc-beacon .meta b{
  font-size: 11px;
  letter-spacing: .10em;
  color: rgba(241,245,249,.92);
}
.soc-beacon .meta span{
  font-size: 10.5px;
  color: rgba(148,163,184,.85);
}

/* states */
.soc-beacon.ok .lamp{
  background: rgba(34,197,94,.92);
  box-shadow: 0 0 14px rgba(34,197,94,.22);
}
.soc-beacon.ok .lamp::before{ opacity:.35; }

.soc-beacon.warn .lamp{
  background: rgba(250,204,21,.95);
  box-shadow: 0 0 18px rgba(250,204,21,.26);
}
.soc-beacon.warn .lamp::before{ opacity:.55; }

.soc-beacon.err .lamp{
  background: rgba(239,68,68,.95);
  box-shadow: 0 0 22px rgba(239,68,68,.28);
}
.soc-beacon.err .lamp::before{ opacity:.75; }

/* upgraded animation: beacon pulse + sweeping halo */
@keyframes beaconPulse{
  0%   { transform: scale(1);   filter:saturate(1); }
  35%  { transform: scale(1.12);filter:saturate(1.1); }
  100% { transform: scale(1);   filter:saturate(1); }
}
@keyframes beaconHalo{
  0%   { opacity:0; transform: scale(.75); }
  20%  { opacity:.55; }
  100% { opacity:0; transform: scale(2.2); }
}

.soc-beacon.warn .lamp{ animation: beaconPulse 820ms ease-in-out infinite; }
.soc-beacon.err  .lamp{ animation: beaconPulse 540ms ease-in-out infinite; }

.soc-beacon.warn .lamp::before{ animation: beaconHalo 1200ms ease-out infinite; }
.soc-beacon.err  .lamp::before{ animation: beaconHalo 820ms ease-out infinite; }

/* small "scan ray" */
.soc-beacon .ray{
  position:absolute;
  right:-26px;
  top:50%;
  width: 86px;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(96,165,250,.55), rgba(255,255,255,0));
  opacity: 0;
}
@keyframes raySweep{
  0%{ transform: translateY(-50%) translateX(-26px); opacity:0; }
  20%{ opacity:.65; }
  100%{ transform: translateY(-50%) translateX(26px); opacity:0; }
}
.soc-beacon.warn .ray,
.soc-beacon.err .ray{
  opacity: 1;
  animation: raySweep 980ms ease-out infinite;
}

/* ======================================================
   SOC Incident Queue
====================================================== */
.soc-queue{
  position:absolute;
  right: 16px;
  top:  62px;              /* sits under beacon */
  z-index:7;
  pointer-events:none;
  user-select:none;

  width: 180px;
  padding: 10px 10px 8px;
  border-radius: 14px;

  background: rgba(2,6,23,.40);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 46px rgba(0,0,0,.18);

  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}

.soc-queue.show{
  opacity: 1;
  transform: translateY(0);
}

.soc-queue .q-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.soc-queue .q-title{
  font-size: 10.5px;
  letter-spacing: .10em;
  font-weight: 900;
  color: rgba(241,245,249,.90);
}

.soc-queue .q-count{
  font-size: 10px;
  color: rgba(148,163,184,.88);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 3px 8px;
  border-radius: 999px;
}

.soc-queue .q-bars{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.soc-queue .q-bar{
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}

.soc-queue .q-bar > i{
  display:block;
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(249,115,22,.95)); /* orange/yellow */
  box-shadow: 0 0 16px rgba(249,115,22,.18);
  transition: width .55s cubic-bezier(.2,.9,.2,1);
}

.soc-queue.err .q-bar > i{
  background: linear-gradient(90deg, rgba(249,115,22,.95), rgba(239,68,68,.95)); /* orange->red */
  box-shadow: 0 0 18px rgba(239,68,68,.22);
}

/* micro shimmer */
.soc-queue .q-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 40%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  opacity: .0;
}

@keyframes qShimmer{
  0%{ transform: translateX(-120%); opacity:.0; }
  20%{ opacity:.55; }
  100%{ transform: translateX(120%); opacity:.0; }
}

.soc-queue.show .q-bar::after{
  animation: qShimmer 1100ms ease-out infinite;
}

/* tiny jitter on ERROR for SOC vibe */
@keyframes qJitter{
  0%{ transform: translateY(0); }
  25%{ transform: translateY(-1px); }
  55%{ transform: translateY(0); }
  80%{ transform: translateY(-1px); }
  100%{ transform: translateY(0); }
}

.soc-queue.err.show{
  animation: qJitter 820ms ease-in-out infinite;
}


/* ======================================================
   SOC Beacon + Incident Queue — ACK/MUTE hover actions + P tags
====================================================== */

/* 建一個 hover zone */
.soc-zone{
  position:absolute;
  right: 16px;
  top:  14px;
  z-index: 8;
  pointer-events:none;        /* 不擋動畫 */
}

/* 讓 zone 內的互動元件可點，但 zone 本體不擋 */
.soc-zone .soc-beacon,
.soc-zone .soc-queue,
.soc-zone .soc-actions{
  pointer-events:auto;
}

/*  soc-beacon / soc-queue */
.soc-zone .soc-beacon{
  position:relative;         
  right:auto; top:auto;
}

.soc-zone .soc-queue{
  position:relative;         
  right:auto;
  top: 10px;                 
}

/* ---------- ACK/MUTE actions ---------- */
.soc-actions{
  position:absolute;
  right: 0;
  top:  0;
  display:flex;
  gap:8px;

  opacity:0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;      
}

.soc-zone:hover .soc-actions{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* 按鈕本體：小、像 SOC HUD */
.soc-act-btn{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(2,6,23,.38);
  backdrop-filter: blur(14px);
  color: rgba(241,245,249,.86);

  height: 30px;
  padding: 0 10px;
  border-radius: 999px;

  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;

  display:inline-flex;
  align-items:center;
  gap:8px;

  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  cursor:pointer;
}

.soc-act-btn i{
  font-size: 12px;
  opacity:.9;
}

.soc-act-btn:hover{
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 18px 50px rgba(96,165,250,.12), inset 0 1px 0 rgba(255,255,255,.12);
}

.soc-act-btn.is-mute{
  border-color: rgba(249,115,22,.30);
}
.soc-act-btn.is-mute:hover{
  box-shadow: 0 18px 52px rgba(249,115,22,.12), inset 0 1px 0 rgba(255,255,255,.12);
}

/* ---------- Queue bar label P1/P2/P3 ---------- */
.soc-queue .q-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 0 8px;
}

.soc-queue .q-tag{
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing:.08em;
  color: rgba(226,232,240,.90);

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: 999px;

  transform: translateY(-.3px);
}

.soc-queue.err .q-tag{
  border-color: rgba(239,68,68,.18);
  background: rgba(239,68,68,.10);
}

/* 讓 bar 的填充不被 tag 影響：用 wrapper 佔滿剩餘寬 */
.soc-queue .q-fill{
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.soc-queue .q-fill > i{
  display:block;
  height:100%;
  width:0%;
  border-radius: 999px;
  transition: width .55s cubic-bezier(.2,.9,.2,1);
}

/* 原本 .q-bar > i 的顏色定義移到 .q-fill > i */
.soc-queue .q-fill > i{
  background: linear-gradient(90deg, rgba(250,204,21,.95), rgba(249,115,22,.95));
  box-shadow: 0 0 16px rgba(249,115,22,.18);
}
.soc-queue.err .q-fill > i{
  background: linear-gradient(90deg, rgba(249,115,22,.95), rgba(239,68,68,.95));
  box-shadow: 0 0 18px rgba(239,68,68,.22);
}

/* shimmer 放到 fill 上 */
.soc-queue .q-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 40%,
    rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  opacity: .0;
}
.soc-queue.show .q-fill::after{
  animation: qShimmer 1100ms ease-out infinite;
}

/* ---------- RWD / auto scale & safe placement ---------- */
.soc-zone{
  transform-origin: top right;
  transform: scale(var(--socScale, 1));
}

/* 用 clamp 讓不同螢幕自動縮放 */
@media (max-width: 1100px){
  .soc-zone{ --socScale: .92; right: 12px; top: 12px; }
}
@media (max-width: 860px){
  .soc-zone{ --socScale: .84; right: 10px; top: 10px; }
}
@media (max-width: 640px){
  .soc-zone{
    --socScale: .78;
    right: 10px;
    top: 10px;
  }
  .soc-queue{ width: 168px; }
  .soc-actions{ gap:6px; }
  .soc-act-btn{ height: 28px; padding: 0 9px; font-size: 10.5px; }
}

/* 超小螢幕*/
@media (max-width: 420px){
  .soc-zone{ top: 18px; --socScale: .74; }
}


/* =========================
   HUBORBIT UPGRADE PACK v2  
========================= */

/* 連線 Flow SVG */
.hubflow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2; 
  opacity:.95;
}
.hubflow path{
  fill:none;
  stroke: rgba(160,210,255,.32);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 11;
  animation: hubFlowDash 1.05s linear infinite;
  filter: drop-shadow(0 0 10px rgba(100,160,255,.20));
}
.hubflow path.is-hot{ stroke: rgba(255,120,120,.55); filter: drop-shadow(0 0 14px rgba(255,80,80,.25)); }
.hubflow path.is-warn{ stroke: rgba(255,210,120,.55); }
@keyframes hubFlowDash{ to{ stroke-dashoffset: -180; } }

/* 卡片右下角 % badge */
.huborbit-card{
  position: relative;
}
.hub-metric{
  position:absolute;
  right: 12px;
  bottom: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
  pointer-events:none;
}
.huborbit-card.is-err .hub-metric{ background: rgba(255,60,60,.18); border-color: rgba(255,120,120,.35); }
.huborbit-card.is-warn .hub-metric{ background: rgba(255,190,60,.16); border-color: rgba(255,210,120,.32); }

/* Popover */
.hub-pop{
  position:absolute;
  z-index: 30;
  min-width: 220px;
  max-width: 280px;
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 70px rgba(0,0,0,.18);
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: all .18s ease;
}
.hub-pop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hub-pop .p-hd{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.hub-pop .p-title{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(10,20,40,.72);
}
.hub-pop .p-chip{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20,120,255,.12);
  border: 1px solid rgba(20,120,255,.18);
  color: rgba(10,40,90,.72);
}
.hub-pop .p-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}
.hub-pop .p-item{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 8px 9px;
}
.hub-pop .p-k{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.44);
}
.hub-pop .p-v{
  margin-top: 3px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(10,20,40,.80);
}
.hub-pop .p-mini{
  margin-top: 8px;
  font-size: 11px;
  color: rgba(0,0,0,.50);
}

/* Bandwidth */
.hub-throttle{
  position:absolute;
  inset: 16px;
  border-radius: 26px;
  pointer-events:none;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}
.hub-mode-bandwidth .hub-throttle{ opacity: 1; }
.hub-throttle::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(80,140,255,.0) 0,
      rgba(80,140,255,.0) 16px,
      rgba(80,140,255,.08) 18px,
      rgba(80,140,255,.0) 32px
    );
  mask: radial-gradient(circle at 50% 50%, rgba(0,0,0,.0) 0 32%, rgba(0,0,0,.8) 55%);
  animation: hubGateSweep 1.4s linear infinite;
  filter: blur(.2px);
}
@keyframes hubGateSweep{
  from{ transform: translateX(-24px); opacity:.55; }
  to{ transform: translateX(24px); opacity:.70; }
}

/* ========================
   RWD AUTO LAYOUT 
================================ */
/* 1) 流體版面基礎 */
:root{
  --its-container: 1200px;
  --its-gutter: clamp(14px, 3.2vw, 24px);
  --its-gap: clamp(16px, 3vw, 40px);
  --its-radius: clamp(16px, 2.2vw, 28px);
  --its-h2: clamp(22px, 2.6vw, 34px);
  --its-h3: clamp(16px, 1.6vw, 20px);
  --its-p:  clamp(13px, 1.1vw, 15px);
}

/* iOS/Android 安全高度 */
.its-main{ min-height: 100svh; overflow-x: clip; }
.its-shell{
  max-width: min(var(--its-container), 100% - (var(--its-gutter) * 2));
  margin: 0 auto;
  padding: 0 var(--its-gutter);
}

/* 2) 自動跟著螢幕縮放 */
.section-title{ font-size: var(--its-h2); }
.section-desc{ font-size: var(--its-p); }
.hero-title{ font-size: clamp(24px, 3.2vw, 40px); }
.hero-desc{ font-size: var(--its-p); }
.arch-title{ font-size: clamp(22px, 3vw, 36px); }

/* 3) 兩欄/三欄自動降階 */
.hero-layout,
.platform-layout,
.projects-layout{
  gap: var(--its-gap);
}

/* 三欄卡片 -> 2欄 -> 1欄 */
.overview-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2vw, 18px); }
.scenario-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2vw, 18px); }

/* 2欄卡片 -> 1欄 */
.modules-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px, 2vw, 18px); }

/* 4) 在小螢幕強制單欄 */
@media (max-width: 1024px){
  .hero-layout,
  .platform-layout,
  .projects-layout{
    grid-template-columns: minmax(0,1fr);
  }
  .hero-metrics{ margin-top: 18px; }
}

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

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

  /* 小螢幕 padding / 圓角一起縮 */
  .metric-card,
  .overview-card,
  .module-card,
  .scenario-card,
  .platform-glass,
  .cta-panel{
    border-radius: var(--its-radius);
  }

  .its-hero{ padding: 54px 0 64px; }
  .section-header{ margin-bottom: 22px; }
}

/* 5) 避免卡片撐爆 */
.metric-card,
.overview-card,
.module-card,
.scenario-card,
.platform-glass,
.cta-panel{
  min-width: 0;
}
.hero-desc,
.section-desc,
.module-card p,
.overview-card ul,
.scenario-card p{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 6) 「手機 mock / 圖片」類視覺 */
.phone-mock,
.mock-phone,
.device-mock{
  width: clamp(220px, 40vw, 360px);
  max-width: 100%;
  height: auto;
}

/* 7)  SOC / HUD  */
@media (max-width: 520px){
  .soc-zone{ --socScale: .72; }
}




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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