:root{
  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(255,255,255,.55);
  --glass-shadow: 0 20px 60px rgba(15,23,42,.12);
  --brand-blue: #4f6ef7;
  --brand-purple: #7b7cff;
  --brand-glow: rgba(79,110,247,.25);

  --vida-breath-slow: 6s;
  --vida-breath-normal: 4.5s;
  --vida-breath-fast: 3s;
  --vida-ease-core: cubic-bezier(.4,0,.2,1);
  --vida-ease-soft: cubic-bezier(.25,.46,.45,.94);
  }

  /* =========================================================
      ViDA.ai Intro Section 
    ========================================================= */
:root {
  --vida-purple: #8b5cf6;
  --vida-purple-dark: #6d28d9;
  --vida-purple-soft: #a78bfa;
  --vida-lavender: #ede9fe;
  --vida-cyan: #38bdf8;
  --vida-blue: #3b82f6;
  --vida-green: #22c55e;
  --vida-ink: #17142f;
  --vida-text: #5f6680;
  --vida-muted: #8b91a8;
  --vida-card: rgba(255, 255, 255, 0.72);
  --vida-card-strong: rgba(255, 255, 255, 0.88);
  --vida-border: rgba(139, 92, 246, 0.16);
  --vida-shadow: 0 28px 80px rgba(75, 55, 145, 0.13);
  --vida-shadow-soft: 0 16px 46px rgba(75, 55, 145, 0.09);
  --vida-radius: 24px;
}

.vida-lite-section {
  position: relative;
  overflow: hidden;
  padding: 86px 24px 96px;
  background:
    radial-gradient(circle at 15% 5%, rgba(167, 139, 250, 0.32), transparent 31%),
    radial-gradient(circle at 85% 20%, rgba(191, 219, 254, 0.46), transparent 34%),
    radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.9), transparent 45%),
    linear-gradient(135deg, #f8f6ff 0%, #f5f8ff 45%, #ffffff 100%);
  color: var(--vida-ink);
  isolation: isolate;
}

.vida-lite-section *,
.vida-lite-section *::before,
.vida-lite-section *::after {
  box-sizing: border-box;
}

.vida-lite-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0.68;
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.075) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
}

.vida-lite-orb {
  position: absolute;
  z-index: -3;
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.75;
  pointer-events: none;
  animation: vidaOrbFloat 9s ease-in-out infinite alternate;
}

.vida-lite-orb-a {
  width: 540px;
  height: 540px;
  left: -180px;
  top: -120px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.26), transparent 70%);
}

.vida-lite-orb-b {
  width: 580px;
  height: 580px;
  right: -190px;
  top: 140px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.23), transparent 70%);
  animation-delay: -2s;
}

.vida-lite-orb-c {
  width: 460px;
  height: 460px;
  left: 44%;
  bottom: -180px;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.16), transparent 70%);
  animation-delay: -4s;
}

@keyframes vidaOrbFloat {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(24px, -18px, 0) scale(1.06); }
}

.vida-lite-wrap {
  width: min(1500px, 100%);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */

.vida-lite-header {
  max-width: 900px;
  margin: 0 auto 54px;
  text-align: center;
}

.vida-lite-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(139, 92, 246, 0.14);
  box-shadow: 0 12px 34px rgba(139, 92, 246, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--vida-purple);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vida-lite-kicker i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--vida-purple);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.12);
}

.vida-lite-header h2 {
  margin: 0;
  color: var(--vida-ink);
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.05em;
  font-weight: 950;
}

.vida-lite-header p {
  max-width: 780px;
  margin: 18px auto 0;
  color: var(--vida-text);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
}

/* Layout */

.vida-lite-stage {
  display: grid;
  grid-template-columns: minmax(285px, 350px) minmax(460px, 1fr) minmax(285px, 350px);
  gap: 28px;
  align-items: start;
}

.vida-lite-side {
  display: grid;
  gap: 24px;
}

/* Card */

.vida-lite-card {
  position: relative;
  min-height: 188px;
  padding: 22px;
  border-radius: var(--vida-radius);
  border: 1px solid rgba(139, 92, 246, 0.1);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.86), rgba(255,255,255,0.56));
  box-shadow: var(--vida-shadow-soft);
  backdrop-filter: blur(28px) saturate(155%);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  transition:
    transform 0.32s ease,
    box-shadow 0.32s ease,
    border-color 0.32s ease,
    background 0.32s ease;
  overflow: hidden;
  cursor: pointer;
}

.vida-lite-right .vida-lite-card {
  min-height: 165px;
}

.vida-lite-card::before {
  content: "";
  position: absolute;
  inset: 0;  
  background:
  linear-gradient(115deg, rgba(255,255,255,.85), transparent 36%),
  radial-gradient(circle at 18% 0%, rgba(139,92,246,.1), transparent 48%);
  opacity: 0.75;
  pointer-events: none;
}

.vida-lite-card::after {
  content: "";
  position: absolute;
  inset: auto 22px 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--vida-purple), var(--vida-cyan));
  opacity: 0;
  transform: scaleX(0.35);
  transition: 0.28s ease;
}

.vida-lite-card:hover,
.vida-lite-card.active {
  transform: translateY(-7px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow:
    0 34px 86px rgba(101, 71, 180, 0.17),
    inset 0 1px 0 rgba(255,255,255,0.7);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66));
}

.vida-lite-card:hover::after,
.vida-lite-card.active::after {
  opacity: 1;
  transform: scaleX(1);
  background: radial-gradient(circle, rgba(255,255,255,.82), rgba(237,233,254,.24), transparent 76%);
}

.vida-card-top,
.vida-lite-card p,
.vida-card-meta {
  position: relative;
  z-index: 1;
}

.vida-card-top {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.vida-icon-box {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--vida-purple);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,245,255,0.75));
  border: 1px solid rgba(139, 92, 246, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 12px 24px rgba(139, 92, 246, 0.1);
  transition: 0.28s ease;
}

.vida-lite-card:hover .vida-icon-box,
.vida-lite-card.active .vida-icon-box {
  color: #fff;
  background: linear-gradient(135deg, var(--vida-purple), var(--vida-purple-dark));
  box-shadow: 0 16px 36px rgba(139, 92, 246, 0.24);
}

.vida-icon-box i {
  font-size: 20px;
}

.vida-card-top span {
  display: block;
  margin-bottom: 4px;
  color: #b28aff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vida-card-top h3 {
  margin: 0;
  color: var(--vida-ink);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 950;
  letter-spacing: -0.025em;
}

.vida-lite-right .vida-card-top h3 {
  font-size: 18px;
}

.vida-lite-card p {
  margin: 0;
  color: var(--vida-text);
  font-size: 12px;
  line-height: 1.78;
  font-weight: 600;
}

.vida-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(139, 92, 246, 0.09);
}

.vida-card-meta small {
  color: var(--vida-muted);
  font-size: 12px;
  font-weight: 700;
}

.vida-card-meta b {
  color: var(--vida-purple-dark);
  font-weight: 950;
}

/* Center */

.vida-lite-center {
  min-width: 0;
  display: grid;
  gap: 24px;
}

.vida-neural-canvas {
  position: relative;
  min-height: 620px;
  border-radius: 44px;
  overflow: visible;
}

.vida-neural-canvas::before {
  content: "";
  position: absolute;
  inset: 5% 7%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.13), transparent 58%);
  filter: blur(8px);
}

.vida-neural-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-1 {
  width: 270px;
  height: 270px;
  background: rgba(139, 92, 246, 0.075);
  border: 1px solid rgba(139, 92, 246, 0.06);
}

.orbit-2 {
  width: 430px;
  height: 430px;
  border: 1px solid rgba(139, 92, 246, 0.13);
  animation: vidaOrbitRotate 26s linear infinite;
}

.orbit-3 {
  width: 540px;
  height: 540px;
  border: 1px dashed rgba(139, 92, 246, 0.17);
  animation: vidaOrbitRotate 38s linear infinite reverse;
}

@keyframes vidaOrbitRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vida-neural-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Neural lines */

.neural-line {
  fill: none;
  stroke: url(#vidaLiteLine);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 18;
  opacity: 0.22;
  animation: vidaDashFlow 4.8s linear infinite;
  filter: url(#vidaLiteGlow);
  transition: opacity 0.35s ease, stroke-width 0.35s ease;
}

@keyframes vidaDashFlow {
  to { stroke-dashoffset: -180; }
}

.data-particles .particle {
  fill: rgba(255,255,255,0.9);
  stroke: var(--vida-purple-soft);
  stroke-width: 3;
  opacity: 0.38;
  filter: url(#vidaLiteGlow);
  transition: opacity 0.3s ease, r 0.3s ease;
}

/* Active line control */

.vida-lite-section[data-active="vbs"] .line-vbs,
.vida-lite-section[data-active="dfs"] .line-dfs,
.vida-lite-section[data-active="ai"] .line-ai,
.vida-lite-section[data-active="api"] .line-api,
.vida-lite-section[data-active="traffic"] .line-traffic,
.vida-lite-section[data-active="parking"] .line-parking,
.vida-lite-section[data-active="security"] .line-security,
.vida-lite-section[data-active="environment"] .line-environment,
.vida-lite-section[data-active="warroom"] .line-warroom {
  opacity: 0.92;
  stroke-width: 4;
  stroke-dasharray: 14 10;
}

.vida-lite-section[data-active="vbs"] .p1,
.vida-lite-section[data-active="dfs"] .p2,
.vida-lite-section[data-active="ai"] .p3,
.vida-lite-section[data-active="api"] .p4,
.vida-lite-section[data-active="traffic"] .p5,
.vida-lite-section[data-active="parking"] .p6,
.vida-lite-section[data-active="security"] .p7,
.vida-lite-section[data-active="environment"] .p8,
.vida-lite-section[data-active="warroom"] .p9 {
  opacity: 1;
  r: 8;
}

/* Brain */

.brain-halo {
  fill: none;
  stroke: rgba(139, 92, 246, 0.13);
  stroke-width: 1.5;
  transform-origin: 360px 310px;
}

.halo-a {
  stroke-dasharray: 10 16;
  animation: vidaHaloSpin 30s linear infinite;
}

.halo-b {
  stroke: rgba(139, 92, 246, 0.18);
  animation: vidaHaloPulse 3.2s ease-in-out infinite;
}

.halo-c {
  stroke: rgba(56, 189, 248, 0.2);
  animation: vidaHaloPulse 3.2s ease-in-out infinite reverse;
}

@keyframes vidaHaloSpin {
  to { transform: rotate(360deg); }
}

@keyframes vidaHaloPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .95; transform: scale(1.04); }
}

.brain-shape {
  fill: url(#vidaBrainFill);
  stroke: url(#vidaLiteLine);
  stroke-width: 4;
  filter: url(#vidaLiteGlow);
  animation: brainBreath 3.6s ease-in-out infinite;
}

@keyframes brainBreath {
  0%, 100% { opacity: .86; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

.brain-fold {
  fill: none;
  stroke: url(#vidaLiteLine);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .62;
  stroke-dasharray: 9 12;
  animation: vidaDashFlow 4.2s linear infinite;
}

.brain-dot {
  fill: rgba(255,255,255,.96);
  stroke: var(--vida-purple);
  stroke-width: 3;
  filter: url(#vidaLiteGlow);
}

/* Core */

.vida-brain-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,245,255,0.78));
  border: 3px solid rgba(139, 92, 246, 0.72);
  box-shadow:
    0 0 0 14px rgba(139, 92, 246, 0.08),
    0 22px 54px rgba(139, 92, 246, 0.22),
    inset 0 1px 0 rgba(255,255,255,1);
  z-index: 5;
}

.vida-brain-ring {
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(139, 92, 246, 0.24);
  pointer-events: none;
}

.ring-a {
  inset: -18px;
  animation: vidaPulse 2.8s ease-out infinite;
}

.ring-b {
  inset: -34px;
  animation: vidaPulse 3.4s ease-out infinite;
  animation-delay: .4s;
}

.ring-c {
  inset: -50px;
  border-style: dashed;
  animation: vidaRingRotate 16s linear infinite;
}

@keyframes vidaPulse {
  0% { transform: scale(.8); opacity: .76; }
  100% { transform: scale(1.28); opacity: 0; }
}

@keyframes vidaRingRotate {
  to { transform: rotate(360deg); }
}

.vida-brain-status {
  position: absolute;
  right: 19px;
  top: 17px;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--vida-cyan);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.95);
}

.vida-core-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: 7px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--vida-purple), var(--vida-cyan));
  box-shadow: 0 12px 28px rgba(139, 92, 246, .22);
  transition: transform .3s ease;
}

.vida-core-icon i {
  font-size: 15px;
}

.vida-brain-core strong {
  margin-top: 2px;
  color: var(--vida-ink);
  font-size: 17px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.03em;
}

.vida-brain-core span {
  margin-top: -6px;
  color: var(--vida-purple);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Brain chips */

.vida-brain-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(139, 92, 246, .13);
  box-shadow: 0 16px 38px rgba(101,71,180,.12);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  font-size: 12px;
  font-weight: 900;
  animation: chipFloat 4.6s ease-in-out infinite;
}

.vida-brain-chip i {
  color: var(--vida-purple);
}

.chip-top {
  left: 50%;
  top: 42px;
  transform: translateX(-50%);
}

.chip-left {
  left: 4%;
  top: 42%;
  animation-delay: -1.4s;
}

.chip-right {
  right: 3%;
  top: 42%;
  animation-delay: -2.2s;
}

@keyframes chipFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

/* Telemetry */

.vida-telemetry {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.62));
  box-shadow: var(--vida-shadow);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  overflow: hidden;
}

.vida-telemetry::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.9), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(139,92,246,.12), transparent 42%);
  pointer-events: none;
}

.telemetry-head,
.telemetry-body {
  position: relative;
  z-index: 1;
}

.telemetry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.12);
  color: var(--vida-ink);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.telemetry-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.telemetry-dot {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: var(--vida-purple);
  box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.12);
}

.telemetry-head button {
  appearance: none;
  border: 1px solid rgba(139, 92, 246, 0.18);
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--vida-purple-dark);
  background: rgba(255,255,255,0.62);
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.25s ease;
}

.telemetry-head button:hover {
  transform: translateY(-2px);
  background: var(--vida-purple);
  color: #fff;
  box-shadow: 0 12px 30px rgba(139, 92, 246, 0.22);
}

.telemetry-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding-top: 21px;
}

.telemetry-load {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.48);
}

.telemetry-load span {
  display: block;
  color: var(--vida-muted);
  font-size: 12px;
  font-weight: 900;
}

.telemetry-load strong {
  display: block;
  margin-top: 11px;
  color: var(--vida-purple);
  font-size: 31px;
  line-height: 1;
  letter-spacing: -0.03em;
}

.telemetry-bar {
  margin-top: 12px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(139, 92, 246, 0.12);
}

.telemetry-bar i {
  display: block;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vida-purple), var(--vida-cyan));
  transition: width 0.6s ease;
}

.telemetry-load small {
  display: block;
  margin-top: 13px;
  color: var(--vida-muted);
  font-size: 12px;
  line-height: 1.6;
}

.telemetry-load small b {
  color: #16a34a;
}

.log-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--vida-muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.log-top code {
  color: var(--vida-purple-dark);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.telemetry-log p {
  margin: 13px 0;
  color: #4f5670;
  font-size: 14px;
  line-height: 1.75;
  font-weight: 650;
}

.log-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.log-tags b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.08);
  color: var(--vida-purple-dark);
  font-size: 11px;
  font-weight: 950;
}

/* Reveal */

.vida-lite-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s ease,
    transform 0.75s cubic-bezier(.2,.8,.2,1);
}

.vida-lite-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */

@media (max-width: 1280px) {
  .vida-lite-stage {
    grid-template-columns: minmax(260px, 320px) minmax(420px, 1fr) minmax(260px, 320px);
    gap: 22px;
  }

  .vida-lite-card {
    padding: 20px;
  }

  .vida-card-top h3 {
    font-size: 18px;
  }

  .vida-lite-card p {
    font-size: 13.5px;
  }
}

@media (max-width: 1080px) {
  .vida-lite-stage {
    grid-template-columns: 1fr;
  }

  .vida-lite-center {
    order: -1;
  }

  .vida-lite-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vida-neural-canvas {
    min-height: 560px;
  }

  .vida-telemetry {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .vida-lite-section {
    padding: 64px 16px 76px;
  }

  .vida-lite-header {
    text-align: left;
    margin-bottom: 36px;
  }

  .vida-lite-side {
    grid-template-columns: 1fr;
  }

  .vida-neural-canvas {
    min-height: 430px;
  }

  .vida-neural-svg {
    transform: scale(.78);
    transform-origin: center;
  }

  .orbit-1 {
    width: 210px;
    height: 210px;
  }

  .orbit-2 {
    width: 300px;
    height: 300px;
  }

  .orbit-3 {
    width: 380px;
    height: 380px;
  }

  .vida-brain-chip {
    display: none;
  }

  .vida-brain-core {
    width: 100px;
    height: 100px;
  }

  .telemetry-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .telemetry-body {
    grid-template-columns: 1fr;
  }

  .vida-card-meta {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vida-lite-orb,
  .vida-neural-orbit,
  .neural-line,
  .brain-halo,
  .brain-shape,
  .brain-fold,
  .vida-brain-ring,
  .vida-brain-chip {
    animation: none !important;
  }

  .vida-lite-reveal,
  .vida-lite-card,
  .telemetry-head button {
    transition: none !important;
  }
}


/* =========================================================
   ViDA Brain Optimized
========================================================= */

.vida-lite-center {
  min-width: 0;
  display: grid;
  gap: 26px;
}

.vida-neural-canvas {
  position: relative;
  min-height: 640px;
  border-radius: 42px;
  overflow: visible;
}

.vida-neural-canvas::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.12), transparent 62%);
  filter: blur(10px);
  pointer-events: none;
}

.vida-neural-canvas::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 540px;
  height: 540px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.72), rgba(237,233,254,.18), transparent 76%);
  pointer-events: none;
}

.vida-neural-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-1 {
  width: 260px;
  height: 260px;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.08);
}

.orbit-2 {
  width: 360px;
  height: 360px;
  border: 1px solid rgba(139,92,246,.12);
  animation: vidaOrbitRotate 24s linear infinite;
}

.orbit-3 {
  width: 470px;
  height: 470px;
  border: 1px dashed rgba(139,92,246,.15);
  animation: vidaOrbitRotate 36s linear infinite reverse;
}

.orbit-4 {
  width: 580px;
  height: 580px;
  border: 1px solid rgba(139,92,246,.08);
  opacity: .6;
}

@keyframes vidaOrbitRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.vida-neural-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* lines */
.neural-line {
  fill: none;
  stroke: url(#vidaNeuralStroke);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 16;
  opacity: .22;
  filter: url(#vidaGlowStrong);
  animation: neuralDash 4.8s linear infinite;
  transition: opacity .35s ease, stroke-width .35s ease;
}

@keyframes neuralDash {
  to { stroke-dashoffset: -180; }
}

/* active radial */
.vida-lite-section[data-active="vbs"] .line-vbs,
.vida-lite-section[data-active="dfs"] .line-dfs,
.vida-lite-section[data-active="ai"] .line-ai,
.vida-lite-section[data-active="api"] .line-api,
.vida-lite-section[data-active="traffic"] .line-traffic,
.vida-lite-section[data-active="parking"] .line-parking,
.vida-lite-section[data-active="security"] .line-security,
.vida-lite-section[data-active="environment"] .line-environment,
.vida-lite-section[data-active="warroom"] .line-warroom {
  opacity: .96;
  stroke-width: 4.2;
  stroke-dasharray: 14 10;
}

/* particles */
.vida-data-particles .particle {
  fill: rgba(255,255,255,.98);
  stroke: #a78bfa;
  stroke-width: 3;
  opacity: .38;
  filter: url(#vidaGlowStrong);
  animation: particlePulse 2.8s ease-in-out infinite;
  transition: opacity .3s ease, r .3s ease, transform .3s ease;
}

@keyframes particlePulse {
  0%,100% { opacity: .38; }
  50% { opacity: .88; }
}

.vida-lite-section[data-active="vbs"] .p1,
.vida-lite-section[data-active="dfs"] .p2,
.vida-lite-section[data-active="ai"] .p3,
.vida-lite-section[data-active="api"] .p4,
.vida-lite-section[data-active="traffic"] .p5,
.vida-lite-section[data-active="parking"] .p6,
.vida-lite-section[data-active="security"] .p7,
.vida-lite-section[data-active="environment"] .p8,
.vida-lite-section[data-active="warroom"] .p9 {
  opacity: 1;
  r: 8;
}

/* halo */
.brain-halo {
  fill: none;
  stroke: rgba(139,92,246,.12);
  stroke-width: 1.4;
  transform-origin: 380px 320px;
}

.halo-a {
  stroke-dasharray: 10 15;
  animation: haloSpin 28s linear infinite;
}

.halo-b {
  stroke: rgba(139,92,246,.18);
  animation: haloPulse 3.2s ease-in-out infinite;
}

.halo-c {
  stroke: rgba(83,199,255,.2);
  animation: haloPulse 3.2s ease-in-out infinite reverse;
}

@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

@keyframes haloPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.035); }
}

/* brain */
.vida-brain-group {
  transform-origin: 380px 320px;
  animation: brainFloat 4.2s ease-in-out infinite;
}

@keyframes brainFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.brain-shape {
  fill: url(#vidaCoreGlow);
  stroke: url(#vidaNeuralStroke);
  stroke-width: 4.2;
  filter: url(#vidaGlowStrong);
}

.brain-fold {
  fill: none;
  stroke: url(#vidaNeuralStroke);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: .7;
  stroke-dasharray: 8 11;
  animation: neuralDash 4.4s linear infinite;
}

.brain-dot {
  fill: rgba(255,255,255,.98);
  stroke: #8b5cf6;
  stroke-width: 3;
  filter: url(#vidaGlowStrong);
  animation: nodeBlink 2.6s ease-in-out infinite;
}

@keyframes nodeBlink {
  0%,100% { opacity: .9; }
  50% { opacity: 1; }
}

/* core */
.vida-brain-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,245,255,.84));
  border: 3px solid rgba(139,92,246,.7);
  box-shadow:
    0 0 0 14px rgba(139,92,246,.08),
    0 18px 48px rgba(139,92,246,.2),
    inset 0 1px 0 rgba(255,255,255,1);
  z-index: 8;
}

.vida-brain-ring {
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(139,92,246,.2);
}

.ring-a {
  inset: -18px;
  animation: corePulse 2.8s ease-out infinite;
}

.ring-b {
  inset: -34px;
  animation: corePulse 3.4s ease-out infinite;
  animation-delay: .5s;
}

.ring-c {
  inset: -50px;
  border-style: dashed;
  animation: vidaOrbitRotate 18s linear infinite;
}

@keyframes corePulse {
  0% { transform: scale(.82); opacity: .74; }
  100% { transform: scale(1.24); opacity: 0; }
}

.vida-brain-status {
  position: absolute;
  right: 18px;
  top: 17px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #53c7ff;
  box-shadow: 0 0 18px rgba(83,199,255,.95);
}

.vida-core-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: 8px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #53c7ff);
  box-shadow: 0 14px 28px rgba(139,92,246,.22);
  transition: transform .3s ease;
}

.vida-core-icon i {
  font-size: 15px;
}

.vida-brain-core strong {
  margin-top: 2px;
  color: #17142f;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .02em;
}

.vida-brain-core span {
  margin-top: -6px;
  color: #8b5cf6;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* chips */
.vida-brain-chip {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #6d28d9;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(139,92,246,.13);
  box-shadow: 0 16px 38px rgba(101,71,180,.12);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  font-size: 12px;
  font-weight: 900;
  animation: chipFloat 4.6s ease-in-out infinite;
}

.vida-brain-chip i {
  color: #8b5cf6;
}

.chip-top {
  left: 50%;
  top: 38px;
  transform: translateX(-50%);
}

.chip-left {
  left: 1%;
  top: 45%;
  animation-delay: -1.4s;
}

.chip-right {
  right: 1%;
  top: 45%;
  animation-delay: -2.2s;
}

@keyframes chipFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

/* telemetry */
.vida-telemetry {
  position: relative;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 26px;
  border-radius: 28px;
  border: 1px solid rgba(139,92,246,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.62));
  box-shadow: 0 28px 80px rgba(75,55,145,.13);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
  overflow: hidden;
}

.vida-telemetry::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255,255,255,.9), transparent 38%),
    radial-gradient(circle at 88% 0%, rgba(139,92,246,.12), transparent 42%);
  pointer-events: none;
}

.telemetry-head,
.telemetry-body {
  position: relative;
  z-index: 1;
}

.telemetry-body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding-top: 21px;
}

/* responsive */
@media (max-width: 1080px) {
  .vida-neural-canvas {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .vida-neural-canvas {
    min-height: 430px;
  }

  .vida-neural-svg {
    transform: scale(.78);
    transform-origin: center;
  }

  .orbit-1 { width: 210px; height: 210px; }
  .orbit-2 { width: 300px; height: 300px; }
  .orbit-3 { width: 390px; height: 390px; }
  .orbit-4 { width: 460px; height: 460px; }

  .vida-brain-chip {
    display: none;
  }

  .vida-brain-core {
    width: 100px;
    height: 100px;
  }

  .telemetry-body {
    grid-template-columns: 1fr;
  }
}

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

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

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

/* COPY */
.mvss-sol-eyebrow{
  font-size:13px;
  letter-spacing:.14em;
  color:#7b86c9;
}

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

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

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

/* TABS */
.mvss-sol-tabs{
  margin-top:28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.mvss-sol-tab{
  padding:8px 18px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;

  background:rgba(79,108,255,.12);
  border:1px solid rgba(160,175,255,.6);
  color:#4a5590;

  transition:.25s;
}

.mvss-sol-tab.active,
.mvss-sol-tab:hover{
  background:rgba(79,108,255,.22);
  box-shadow:0 10px 28px rgba(99,102,241,.35);
  color:#1e3a8a;
}

/* VISUAL */
.mvss-sol-glass{
  position:relative;
  height:420px;
  border-radius:32px;
  overflow:hidden;

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

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

#mvssSolCanvas{
  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%),
    linear-gradient(180deg,#0b1224,#050814);

  border-radius:26px;
}

/* BADGE */
.mvss-sol-badge{
  position:absolute;
  left:16px;
  bottom:16px;
  padding:12px 16px;

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

  box-shadow:0 12px 28px rgba(120,140,210,.28);
  animation: solFloat 6s ease-in-out infinite;
}

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

/* ===============================
   MRNM – RWD PATCH
================================ */

/* 平板以下 */
@media (max-width:1024px){
  .mrnm-wrap{
    grid-template-columns: 1fr;
    gap:56px;
  }

  .mrnm-copy{
    transform:none;
  }

  .mrnm-visual{
    max-width:720px;
    margin-inline:auto;
  }

  .mvss-sol-wrap {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .mvss-sol-copy {
    text-align: center;
  }

  .mvss-sol-desc {
    margin-inline: auto;
  }

  .mvss-sol-tabs {
    justify-content: center;
  }
  .mvss-sol-visual {
    max-width: 720px;
    margin-inline: auto;
  }

  .mvss-sol-glass {
    height: 380px;
  }
}

/* 手機 */
@media (max-width:768px){
  .mvss-sol-wrap {
    grid-template-columns: 1fr;       
  }
  .mvss-sol-visual{
    width: 100%;
    margin-top: 32px;
  }

  .mvss-sol-glass{
    height: 320px;          /* 沒這行一定看不到 */
    min-height: 320px;
    border-radius: 24px;
  }

  #mvssSolCanvas{
    width: 100%;
    height: 100%;
    display: block;
  }

  .mrnm-overview{
    padding:72px 0;
  }

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

  .mrnm-desc{
    font-size:14px;
  }

  .mrnm-steps{
    gap:10px;
  }

  .mrnm-step{
    font-size:12px;
    padding:7px 14px;
  }

  .mrnm-glass-card{
    height:360px;
    border-radius:26px;
  }
  .mvss-sol-glass {
    height: 300px;
    border-radius: 24px;
  }
  .mvss-sol-badge {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 14px;
    border-radius: 14px;
  }

  .mvss-sol-badge strong {
    font-size: 14px;
  }

  .mvss-sol-badge span {
    font-size: 12px;
  }
}

/* 小手機 */
@media (max-width:480px){
  .mrnm-wrap{
    padding:0 20px;
  }

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

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

  .mrnm-card-badge{
    left:12px;
    right:12px;
    bottom:12px;
    padding:10px 14px;
  }

  .mrnm-card-badge strong{
    font-size:13px;
  }

  .mrnm-card-badge span{
    font-size:11px;
  }
  .mvss-sol-glass {
    height: 260px;
    border-radius: 20px;
  }
}

/* ===============================
   VIDA failover
================================ */
.vida-failover{
  padding:100px 0;
  background:radial-gradient(120% 100% at 20% 0%, #0c1228, #060914 70%);
  color:#e5e7eb;
}

.vida-fail-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

/* LEFT */
.vida-fail-title{
  font-size:42px;
  line-height:1.2;
  font-weight:700;
  color:#ffffff;
  margin-bottom:20px;
}

.vida-fail-title span{
  color:#9d96fc; /* 螢光綠 */
}

.vida-fail-desc{
  max-width:560px;
  font-size:15px;
  line-height:1.9;
  color:#9fb3d9; /* 藍灰說明文字 */
}

.vida-fail-points{
  margin-top:36px;
  display:grid;
  gap:26px;
}

.vida-fail-point{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.vida-fail-point i{
  font-size:18px;
  color:#b0a8fc;
  margin-top:4px;
}
.vida-fail-point strong{
  display:block;
  font-size:16px;
  font-weight:600;
  color:#ffffff;
  margin-bottom:6px;
}

.vida-fail-point span{
  font-size:14px;
  line-height:1.8;
  color:#8fa4c9;
}

/* ICON BLOCK */
.vida-fail-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
  position:relative;
  animation: iconFloat 6s ease-in-out infinite;
}

.vida-fail-icon.green{
  background:rgba(163, 133, 245, 0.267);
  color:#8691ef;
  box-shadow:0 0 0 1px rgba(134,239,172,.25) inset;
}

.vida-fail-icon.amber{
  background:rgba(93, 36, 251, 0.12);
  color:#2444fb;
  box-shadow:0 0 0 1px rgba(251,191,36,.25) inset;
}

.node.dead{
  opacity:.45;
  filter:grayscale(1);
}

/* RIGHT GLASS */
.vida-fail-glass{
  position:relative;
  height:420px;
  border-radius:28px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
  contain:layout paint; /* 強制限制繪製區 */
}

.vida-tooltip{
  position:absolute;
  z-index:10;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(15,25,40,.9);
  color:#e5e7eb;
  font-size:12px;
  line-height:1.6;
  pointer-events:none;
  opacity:0;
  transition:.15s;
  box-shadow:0 12px 28px rgba(0,0,0,.45);
}

/* 背景圖 */
.vida-fail-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.48;                
  filter:
    blur(0.8px)
    saturate(0.8)
    brightness(0.88)
    contrast(0.92);
  transform:scale(1.02);        
}

/* 疊一層暗色遮罩 */
.vida-fail-glass::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  background:radial-gradient(circle,
    rgba(134,239,172,.45),
    transparent 65%);
  filter:blur(10px);
  opacity:.35;                
  transition:opacity .25s, filter .25s, inset .25s;
  z-index:-1;
}

.vida-fail-icon.busy::after{
  opacity:.9;
  filter:blur(18px);
  inset:-12px;
}

.vida-fail-icon.alert::after{
  background:radial-gradient(circle,
    rgba(248,113,113,.6),
    transparent 65%);
}
/* ===============================
   GLASS DATA FLOW LAYER
================================ */

.vida-fail-glass::before{
 content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      var(--flow-angle,120deg),
      transparent 40%,
      rgba(134,239,172,.10) 50%,
      transparent 60%
    );
  opacity:.35;
  transform:translateX(var(--flow-x,-120%));
  animation:dataSweep var(--flow-dur,8s) linear infinite;
  pointer-events:none;
  z-index:1;
}

/* Fail 狀態加速 */
.vida-fail-glass.alert::before{
  animation-duration:3s;  
  opacity:.6;
  --flow-dur:3s;               /* Fail 時加速 */
}

/* 掃描動畫 */
@keyframes dataSweep{
  from{ transform:translateX(var(--flow-from,-120%)); }
  to{   transform:translateX(var(--flow-to,120%)); }
}

/* 浮動 */
@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* Canvas 疊層 */
#vidaFailCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

/* UI 最上層 */
.vida-fail-ui{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.vida-tag{
  position:absolute;
  top:16px; left:16px;
  background:#9ae6b4;
  color:#052e16;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}

.vida-status{
  position:absolute;
  bottom:16px;
  left:16px;
  display:flex;
  gap:12px;
}

.node{
  padding:8px 14px;
  border-radius:14px;
  font-size:12px;
  background:rgba(255,255,255,.12);
}
.node.ok{ color:#86efac; }
.node.fail{ color:#f87171; border:1px solid rgba(248,113,113,.6); }

/* GPU LOAD BAR */
.gpu-bar{
  margin-top:6px;
  height:4px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}

.gpu-bar i{
  display:block;
  height:100%;
  width:40%;
  background:linear-gradient(90deg,#86efac,#4ade80);
  border-radius:999px;
  transition:width .6s ease;
  animation: gpuPulse 2.4s ease-in-out infinite;
}

@keyframes gpuPulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
}

/* FAIL 狀態 */
.node.fail{
  cursor:pointer;
}
.node.fail:hover{
  background:rgba(248,113,113,.15);
}

/* ===============================
   ICON GLOW & FLOAT
================================ */

.vida-fail-icon{
  position:relative;
  animation: iconFloat 6s ease-in-out infinite;
}

.vida-fail-icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  background:radial-gradient(circle,
    rgba(134,239,172,.45),
    transparent 65%);
  opacity:.45;
  filter:blur(10px);
  transition:.3s;
  z-index:-1;
}

/* Hover 強化 */
.vida-fail-icon:hover::after{
  opacity:.8;
  filter:blur(16px);
  inset:-10px;
}

/* Failover 加速 */
.vida-fail-icon.alert{
  animation-duration:2.5s;
}
.vida-fail-icon.alert::after{
  background:radial-gradient(circle,
    rgba(248,113,113,.55),
    transparent 65%);
}

/* 浮動動畫 */
@keyframes iconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

@media(max-width:768px){
  .vida-fail-glass{
    height:360px;
  }
  .vida-status{
    overflow-x:auto;
  }
}

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

.vida-failover-img{
  padding:100px 0;
  background:radial-gradient(120% 100% at 20% 0%, #0c1228, #060914 70%);
  color:#e5e7eb;
}

.vfi-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 40px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

/* LEFT */
.vfi-title{
  font-size:40px;
  line-height:1.2;
  margin-bottom:18px;
}
.vfi-title span{ color:#9ae6b4; }

.vfi-desc{
  font-size:15px;
  line-height:1.8;
  color:#c7d2fe;
  max-width:520px;
}

.vfi-features{
  margin-top:32px;
  display:grid;
  gap:22px;
}

.vfi-feature{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.vfi-feature strong{
  display:block;
  margin-bottom:4px;
  font-size:15px;
}

.vfi-feature span{
  font-size:14px;
  color:#a5b4fc;
  line-height:1.7;
}

/* ICON */
.vfi-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}

.vfi-icon.green{
  background:rgba(134,239,172,.15);
  color:#86efac;
}

.vfi-icon.amber{
  background:rgba(251,191,36,.15);
  color:#fbbf24;
}

/* RIGHT */
.vfi-glass{
  position:relative;
  border-radius:28px;
  padding:18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(26px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}

.vfi-visual-img{
  width:100%;
  height:auto;
  border-radius:18px;
  display:block;
}

/* RWD */
@media(max-width:1024px){
  .vfi-wrap{
    grid-template-columns:1fr;
    gap:56px;
  }
}

@media(max-width:768px){
  .vfi-title{ font-size:32px; }
}


/* ===============================
   VGLASS – ADVANTAGE SECTION
================================ */
.vglass-advantage{
  padding:110px 0;
  background:#ffffff;
  opacity:0;
  transform:translateY(40px);
  filter:blur(6px);
  transition:opacity .9s ease, transform .9s ease, filter .9s ease;
}

.vglass-advantage.in{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

.vglass-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 32px;
}

/* ---------- HEADER ---------- */
.vglass-title{
  font-size:36px;
  font-weight:700;
  letter-spacing:.5px;
}

.vglass-title .t-dark{
  color:#0f172a;          /* 深黑 */
}

.vglass-title .t-accent{
  color:#6b7cff;          /* 淡紫主識別 */
  margin-right:6px;
}

.vglass-title .t-soft{
  color:#1f2027;          /* 柔紫，不搶主標 */
  font-weight:600;
}

.vglass-header{
  text-align:center;
  margin-bottom:72px;
}

.vglass-header h2{
  font-size:36px;
  font-weight:700;
  letter-spacing:.5px;
}

.vglass-header h2 span{
  color:#6b7cff;
}

.vglass-header p{
  margin-top:12px;
  color:#6b7280;
  font-size:15px;
}

.vglass-divider{
  display:inline-block;
  margin-top:18px;
  width:64px;
  height:4px;
  border-radius:99px;
  background:linear-gradient(90deg,#9ae6b4,#facc15);
  transition:filter .3s, box-shadow .3s, opacity .3s;
}

.vglass-divider.active{
  filter:brightness(1.2);
  box-shadow:0 0 12px rgba(107,124,255,.45);
}

/* 任一卡片 hover → header divider 亮 */
.vglass-advantage:has(.vglass-card:hover) 
.vglass-divider{
  filter:brightness(1.2);
  box-shadow:0 0 12px rgba(107,124,255,.45);
  opacity:1;
}

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

/* ---------- CARD ---------- */
.vglass-card{
  position:relative;
  padding:36px 28px;
  border-radius:28px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.9),
      rgba(255,255,255,.75));
  backdrop-filter:blur(18px);
  border:1px solid rgba(240,240,255,.9);
  box-shadow:
    0 20px 40px rgba(30,40,120,.08);
  opacity:0;
  transform:translateY(30px);
  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    opacity .6s,
    box-shadow .6s;
}

.vglass-card.in{
  opacity:1;
  transform:translateY(0);
}

.vglass-card:hover{
  box-shadow:
    0 30px 70px rgba(30,40,120,.18);
    transform:translateY(-10px) scale(1.01);
}

/* ---------- ICON ---------- */
.vglass-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#6b7cff;
  position:relative;
  overflow:hidden;
}

/* Font Awesome icon */
.vglass-icon i{
  position:relative;
  z-index:2;
}

.vglass-icon::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:6px;
  background:#6b7cff;
}

/* 微脈衝光暈（CPU 心跳） */
.vglass-icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle,
    rgba(107,124,255,.35),
    transparent 60%);
  opacity:.6;
  animation:iconPulse 2.8s ease-in-out infinite;
}

/* Hover 時加強 */
.vglass-card:hover 
.vglass-icon::before{
  opacity:.9;
  animation:iconPulse var(--pulse-speed,2.8s) ease-in-out infinite;
}

@keyframes iconPulse{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.35); opacity:.85; }
}

.vglass-card:hover h3{
  color:#4f6cff;
}

.vglass-card:hover p{
  color:#4b5563;
}

.vglass-card.idle{
  box-shadow:0 24px 60px rgba(110,140,255,.18);
}
.vglass-card.idle 
.vglass-icon::before{
  animation-duration:2s;
  opacity:.85;
}

/* 不同色系維持 */
.vglass-icon.grid::before{
  background:radial-gradient(circle,
    rgba(55, 21, 250, 0.45),
    transparent 60%);
}
.vglass-icon.cube::before{
  background:radial-gradient(circle,
    rgba(55, 21, 250, 0.45),
    transparent 60%);
}
.vglass-icon.balance::before{
  background:radial-gradient(circle,
    rgba(55, 21, 250, 0.45),
    transparent 60%);
}

@keyframes iconPulse{
  0%,100%{ transform:scale(1); opacity:.55; }
  50%{ transform:scale(1.35); opacity:.85; }
}

/* Icon Variants */
/* .vglass-icon.grid{ background:rgba(21, 93, 250, 0.18); } */
.vglass-icon.grid::after{ background:#5a15fa; }

/* .vglass-icon.cube{ background:rgba(21, 93, 250, 0.18); } */
.vglass-icon.cube::after{ background:#5a15fa; }

/* .vglass-icon.balance{ background:rgba(21, 93, 250, 0.18); } */
.vglass-icon.balance::after{ background:#5a15fa; }

/* ---------- TEXT ---------- */
.vglass-card h3{
  font-size:18px;
  margin-bottom:10px;
}

.vglass-card p{
  font-size:14px;
  line-height:1.7;
  color:#6b7280;
}

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

@media(max-width:600px){
  .vglass-grid{ grid-template-columns:1fr; }
  .vglass-header h2{ font-size:28px; }
}




/* ===============================
   vida-cluster-sim
================================ */
.vida-ai-scheduler{padding:40px;color:#e5e7eb;
background:radial-gradient(1200px 600px at 20% 0%,#1b2540,#0b1020)}

.vida-ai-header{display:flex;justify-content:space-between;align-items:center}
.vida-ai-header h2{
  font-size:22px;
  display:flex;
  gap:10px
}

.vida-ai-header h2{
  width:100%;
  text-align:center;
  letter-spacing:.04em;
}

.vida-ai-actions{display:flex;gap:10px}
.vida-ai-btn{background:#1e293b;border:1px solid #60a5fa;
color:#e5e7eb;padding:8px 14px;border-radius:10px}
.vida-ai-btn.primary{background:#14532d;border-color:#22c55e}

.vida-ai-managers{
  display:flex;
  justify-content:center;
  gap:24px;
  margin:30px 0}
.vida-ai-manager{
  padding:14px 22px;border-radius:14px;
  border:1px solid #60a5fa;
  background:rgba(255,255,255,.06)}
.vida-ai-manager.active{box-shadow:0 0 24px rgba(96,165,250,.6)}

.vida-ai-layout{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:32px
}

.vida-ai-nodes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.vida-ai-node{
  position:relative;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid #60a5fa
}

.vida-ai-node::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:20px;
  background:
    radial-gradient(
      circle at 50% 80%,
      rgba(96,165,250, calc(var(--gpu-heat,0) * .35)),
      transparent 60%
    );
  opacity:.9;
  pointer-events:none;
  transition:opacity .6s;
}

/* GPU 熱度背景 */
.vida-ai-node
.gpu-cool  { 
  box-shadow:0 0 30px rgba(96,165,250,.25); }
.vida-ai-node
.gpu-warm  {
   box-shadow:0 0 40px rgba(250,204,21,.35); }
.vida-ai-node
.gpu-hot   { 
  box-shadow:0 0 50px rgba(239,68,68,.45); }

.vida-ai-node
.fault{border-color:#ef4444;
box-shadow:0 0 30px rgba(239,68,68,.6);animation:faultPulse 1.4s infinite}

@keyframes faultPulse{
0%,100%{box-shadow:0 0 20px rgba(239,68,68,.3)}
50%{box-shadow:0 0 40px rgba(239,68,68,.8)}
}

.status{font-size:12px;display:flex;gap:6px;align-items:center}
.status span{width:8px;height:8px;border-radius:50%;background:#22c55e}
.status.fault span{background:#ef4444}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.chip{font-size:11px;padding:4px 8px;border-radius:999px;background:#1e293b}
.face{color:#93c5fd}.lpr{color:#c4b5fd}
.action{color:#fdba74}.safety{color:#86efac}

.gpu-bar{height:6px;background:#020617;border-radius:999px;overflow:hidden}
.gpu-bar i{display:block;height:100%;
background:linear-gradient(90deg,#60a5fa,#38bdf8)}

.tooltip{position:absolute;right:14px;bottom:14px;font-size:11px;
opacity:0;transition:.3s}
.vida-ai-node:hover .tooltip{opacity:1}

.vida-ai-strategy ul{list-style:none;padding:0}
.vida-ai-strategy li{margin-bottom:12px}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.lb{background:#60a5fa}.fo{background:#ef4444}.pr{background:#facc15}

.vida-ai-summary{margin-top:32px;display:grid;
grid-template-columns:repeat(4,1fr);gap:20px;
background:rgba(255,255,255,.04);border-radius:16px;padding:20px}

.vida-ai-icon-layer{
  position:absolute;
  inset:0;
  pointer-events:none
}
.vida-fly-icon{
  position:absolute;
  font-size:18px;
  filter:drop-shadow(0 0 10px currentColor)
}
.vida-fly-icon.priority{
  filter:
    drop-shadow(0 0 12px currentColor)
    drop-shadow(0 0 28px currentColor);
}
.vida-fly-icon.priority i{
  font-size:22px;
}
/* ===============================
   RWD – Tablet
============================== */
@media (max-width: 1024px) {
  .vida-ai-layout {
    grid-template-columns: 1fr;
  }

  .vida-ai-strategy {
    position: relative;
    width: 100%;
    margin-top: 24px;
  }

  .vida-ai-nodes {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===============================
   RWD – Mobile
============================== */
@media (max-width: 640px) {
  .vida-ai-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .vida-ai-actions {
    width: 100%;
    justify-content: space-between;
  }

  .vida-ai-managers {
    flex-direction: column;
    gap: 12px;
  }

  .vida-ai-nodes {
    grid-template-columns: 1fr;
  }

  .vida-ai-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .vida-fly-icon {
    font-size: 16px;
  }
}

/* ===============================
   VIDA.ai大數據平台架構  ARCH GLASS HUB
================================ */
/* ---------- Section Base ---------- */
.arch-glass-hub{
  padding:120px 20px;
  background:
    radial-gradient(circle at top,#f4f7ff 0%,#ffffff 60%);
}

/* ---------- Outer Shell ---------- */
.arch-hub-shell{
  max-width:1280px;
  margin:0 auto;
  padding:64px 48px;
  border-radius:44px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78),
      rgba(255,255,255,.62)
    );
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  box-shadow:
    0 50px 110px rgba(40,70,150,.14),
    inset 0 0 0 1px rgba(255,255,255,.7);
}

/* ---------- Shared Glass Card ---------- */
.glass-card{
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius:28px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 18px 48px rgba(60,90,160,.14);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
 /* 卡片「內光＋邊緣折射」 */  
  position:relative;
  overflow:hidden;  
}
/* 玻璃高光層 */
.glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.65),
      rgba(255,255,255,.05) 40%,
      rgba(255,255,255,.15)
    );
  opacity:.35;
  pointer-events:none;
}

/* 卡片邊緣能量線（非常淡） */
.glass-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(120,160,255,.18);
  pointer-events:none;
}
/* ---------- Platform Block ---------- */
.arch-hub-platform{
  text-align:center;
  padding:44px 28px;
  margin-bottom:56px;
}

.arch-hub-platform-icon{
  font-size:36px;
  color:#3b82f6;
  margin-bottom:14px;
}

.arch-hub-platform h2{
  margin:0;
  font-size:26px;
  font-weight:720;
  letter-spacing:.02em;
  color:#0f172a;
}

.arch-hub-platform .sub{
  margin-top:6px;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}

/* ---------- Zone Label ---------- */
.arch-hub-zone{
  position:relative;
}

.arch-hub-label{
  display:inline-block;
  font-size:14px;
  font-weight:600;
  color:#16a34a;
  margin-bottom:22px;
}

.arch-hub-label span{
  margin-left:8px;
  font-weight:400;
  color:#64748b;
}

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

/* ---------- Standard Card ---------- */
.arch-hub-card{
  padding:34px 30px;
}

/* ---------- Wide Card ---------- */
.arch-hub-wide{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:30px;
  padding:34px;
}

/* ---------- Icons ---------- */
.arch-hub-card .icon,
.arch-hub-wide .icon{
  font-size:26px;
  margin-bottom:14px;
}

.icon.blue{color:#2563eb}
.icon.orange{color:#f59e0b}
.icon.green{color:#10b981}

/* ---------- Typography ---------- */
.arch-hub-card h3,
.arch-hub-wide h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
}

.arch-hub-card .desc,
.arch-hub-wide .desc{
  margin-top:6px;
  font-size:14px;
  line-height:1.6;
  color:#475569;
}

.arch-hub-wide .title{
  margin-top:4px;
  font-size:15px;
  font-weight:600;
  color:#1e293b;
}

/* ---------- Tags ---------- */
.tags{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tags span{
  font-size:12px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(59,130,246,.1);
  color:#2563eb;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.15);
}

/* ---------- Interactive – MICRO MOTION---------- */
.hub-interactive{
  cursor:pointer;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease;
  will-change: transform;
}

.hub-interactive:hover{
  transform:
    translateY(-6px)
    scale(1.015);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.8),
    0 32px 72px rgba(40,90,180,.2);
}
/* Hover 光掃描 */
.hub-interactive:hover::before{
  animation:glassSweep 1.2s ease-out;
}

@keyframes glassSweep{
  0%{opacity:.15}
  50%{opacity:.45}
  100%{opacity:.2}
}

/* Icon 呼吸感 */
.hub-interactive .icon{
  transition:transform .4s ease;
}

.hub-interactive:hover .icon{
  transform:scale(1.12);
}

/* ---------- Subtle Focus (keyboard / accessibility) ---------- */
.hub-interactive:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.25),
    0 24px 60px rgba(40,90,180,.18);
}

/* ---------- RWD ---------- */
@media (max-width: 980px){
  .arch-hub-shell{
    padding:52px 32px;
  }
}

@media (max-width: 820px){
  .arch-hub-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 560px){
  .arch-glass-hub{
    padding:90px 16px;
  }

  .arch-hub-shell{
    padding:38px 22px;
    border-radius:32px;
  }

  .arch-hub-platform h2{
    font-size:22px;
  }

  .arch-hub-card,
  .arch-hub-wide{
    padding:28px 24px;
  }

  .arch-hub-wide{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ================================
   ARCH ECOSYSTEM GLASS (V2)
================================ */

.arch-ecosystem-glass{
  padding:40px 20px;
  background:
    radial-gradient(circle at top,#eef3ff 0%,#ffffff 65%);
}

/* ---------- Title ---------- */
.eco-header{
  text-align:center;
  padding:72px 20px 40px;
}

.eco-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#18913c;           
  margin-bottom:18px;
}

.eco-title{
  margin:0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang TC",
    "Noto Sans TC",
    "Microsoft JhengHei",
    system-ui,
    sans-serif;

  font-size:44px;          
  font-weight:800;
  line-height:1.18;
  letter-spacing:.02em;

  color:#0f172a;            
}

.eco-title span{
  background:linear-gradient(
    90deg,
    /* #4f7cff 0%,
    #5aa8ff 45%, */
    #2563eb 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- RWD ---------- */
@media (max-width: 768px){
  .eco-title{
    font-size:32px;
  }
}

@media (max-width: 480px){
  .eco-title{
    font-size:28px;
    line-height:1.25;
  }
}

/* ---------- Diagram ---------- */
.eco-diagram{
  position:relative;
  max-width:900px;
  margin:auto;
}
/* ---------- Nodes 初始狀態---------- */
.eco-node,
.eco-core,
.eco-vida{
  opacity:0;
  transform:translateY(40px);
  transition:.8s ease;
}

.eco-show{
  opacity:1;
  transform:none;
}
/* ---------- Nodes ---------- */
.eco-node{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  border-radius:22px;
  padding:22px 26px;
  text-align:center;
  box-shadow:0 20px 50px rgba(40,80,160,.15);
  transition:.4s ease;
}

.eco-node img{
  height:48px;
  margin-bottom:10px;
}

.eco-node p{
  margin:0;
  font-weight:700;
}

.eco-node span{
  display:block;
  font-size:13px;
  font-weight:400;
  color:#64748b;
  margin-top:4px;
}

/* ---------- Positions ---------- */
.eco-vida{
  width:260px;
  margin:0 auto 40px;
}

.eco-core{
  position:relative;
  padding:60px 40px 40px;
  border-radius:34px;
  border:2px dashed #22c55e;
}

/* Glass frame */
.glass-frame{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px);
}

/* Core label */
.eco-core-label{
  position:absolute;
  top:-14px;
  left:20px;
  padding:4px 14px;
  background:#22c55e;
  color:#fff;
  border-radius:999px;
  font-size:13px;
}

/* Rows */
.eco-row{
  display:flex;
  justify-content:space-between;
  gap:40px;
  margin-bottom:40px;
}

/* ---------- Arrows ---------- */
.eco-arrows{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.arrow{
  fill:none;
  stroke:#3b82f6;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:10 10;
  animation:arrowFlow 2.8s linear infinite;
}

.arrow-up{
  stroke:#22c55e;
}

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

/* ---------- Hover Focus ---------- */
.eco-node:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 30px 80px rgba(40,100,200,.25);
}

.eco-avss.is-highlight{
  box-shadow:
    0 0 0 4px rgba(59,130,246,.25),
    0 40px 90px rgba(80,140,255,.35);
}

/* ---------- RWD ---------- */
@media(max-width:768px){
  .eco-row{
    flex-direction:column;
  }
}

@media(max-width:820px){

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

  .eco-row{
    flex-direction:column;
    gap:28px;
  }

  .eco-node-wide{
    padding:28px 26px;
  }

  .eco-arrows{
    display:none;  
  }

   .eco-avss{
    margin-top:28px;
  }
}

/* ======================================================
   VISUAL UPGRADE – DREAMY GLASS 核心
====================================================== */

/* ---------- VIDA.ai 浮空中樞 ---------- */
.eco-vida-float{
  background:none;
  box-shadow:none;
  padding:0;
  margin-bottom:56px;
}

.eco-vida-float img{
  height:84px;                /* 放大 Logo */
  filter:
    drop-shadow(0 12px 30px rgba(60,120,255,.25));
}

.eco-vida-float p{
  margin-top:14px;
  font-size:18px;
}

.eco-vida-float span{
  font-size:14px;
  letter-spacing:.08em;
}

/* ---------- VBS / DFS 寬卡 ---------- */
.eco-node-wide{
  width:100%;
  padding:32px 36px;
}

.eco-node-wide img{
  height:56px;
}

.eco-row{
  gap:56px;                  /* 拉開左右距離 */
}

/* ---------- 高級玻璃質感 ---------- */
.eco-node{
  position:relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.72)
    );
  backdrop-filter:blur(20px) saturate(1.2);
}

/* 內部柔光 */
.eco-node::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(
      circle at top,
      rgba(255,255,255,.85),
      transparent 65%
    );
  opacity:.6;
  pointer-events:none;
}

/* 邊緣折射 */
.eco-node::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(180,210,255,.35);
  pointer-events:none;
}

/* ---------- Hover 夢幻感 ---------- */
.eco-node:hover{
  transform:
    translateY(-10px)
    scale(1.045);
  box-shadow:
    0 40px 90px rgba(80,130,255,.28);
}

/* ====== Arrow Data Flow ====== */
.arrow-flow{
  fill:none;
  stroke:#5b7cfa;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:10 14;
  animation:arrowFlow 2.4s linear infinite;
}


/* ===== Metagraph Links ===== */
.meta-links{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.meta-links line{
  stroke:#93c5fd;
  stroke-width:1.6;
  stroke-dasharray:4 6;
  animation:metaFlow 2.4s linear infinite;
  opacity:.7;
}

@keyframes metaFlow{
  to{ stroke-dashoffset:-20; }
}

@keyframes arrowFlow{
  to{ stroke-dashoffset:-48; }
}

/* ===== Metagraph ===== */
.metagraph{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.meta-node{
  position:absolute;
  display:flex;
  align-items:center;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  padding:7px 14px;
  border-radius:999px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.78)
    );
  font-size:12px;
  font-weight:600;
  color:#1e40af;
  box-shadow:
    0 12px 30px rgba(80,120,255,.25),
    inset 0 0 0 1px rgba(160,190,255,.45);
  backdrop-filter:blur(10px);
  transition:.6s cubic-bezier(.22,.61,.36,1);
}

/* icon 精緻度 */
.meta-node i{
  font-size:12px;
  opacity:.85;
}

/* hover / highlight */
.meta-node.is-active{
  background:
    linear-gradient(
      180deg,
      rgba(96,165,250,.95),
      rgba(59,130,246,.85)
    );
  color:#fff;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.35),
    0 18px 50px rgba(59,130,246,.45);
}

/* 展開位置 */
.eco-avss.is-expand .meta-node:nth-child(1){
  transform:translate(-140%,-100%);
  opacity:1;
}
.eco-avss.is-expand .meta-node:nth-child(2){
  transform:translate(40%,-120%);
  opacity:1;
}
.eco-avss.is-expand .meta-node:nth-child(3){
  transform:translate(-120%,40%);
  opacity:1;
}
.eco-avss.is-expand .meta-node:nth-child(4){
  transform:translate(60%,40%);
  opacity:1;
}

/* ===============================
   NXV – ADVANCED PANEL SYSTEM
================================ */
.nxv-section{
  padding:96px 0px;
  background:
    /* radial-gradient(900px 600px at 20% 10%, rgba(79,124,255,.18), transparent 60%),
    radial-gradient(900px 500px at 80% 80%, rgba(95,208,197,.14), transparent 60%), */
    linear-gradient(180deg,#0b1220,#0e1628);
  color:#e5e7eb;
 
}

/* 對齊 */
.nxv-container{
  max-width:1280px;
  margin:0 auto;
  padding:0 16px;             
  box-sizing:border-box;
}

/* 新增*/
.nxv-section::before{
  content:"";
  display:block;
}
/* ===============================
   LAYOUT
================================ */
.nxv-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:36px
}
/* ===============================
   SIDE NAV
================================ */
.nxv-nav{
  position:sticky;
  top:120px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.nxv-nav-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  color:#cbd5f5;
  cursor:pointer;
  transition:.35s ease;
}

.nxv-nav-btn i{
  opacity:.9;
}

.nxv-nav-btn:hover{
  background:rgba(255,255,255,.12);
}

.nxv-nav-btn.is-active{
  background:linear-gradient(90deg,#4f7cff,#5fd0c5);
  color:#07101e;
  box-shadow:
    0 12px 30px rgba(79,124,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);
}

.nxv-nav-btn::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background:linear-gradient(
    180deg,
    transparent,
    #5fd0c5,
    #4f7cff,
    transparent
  );
  opacity:0;
}

.nxv-nav-btn.is-active::before{
  opacity:1;
  animation:navGlow 2.2s linear infinite;
}

@keyframes navGlow{
  from{background-position:0 0}
  to{background-position:0 100%}
}

/* ===============================
   PANELS CONTAINER
================================ */
.nxv-panels{
  position:relative;
}
/* ===============================
   PANEL (GLASS CARD)
================================ */
.nxv-panel{
  display:none;
  width:100%;
  max-width:85%;
  box-sizing:border-box;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap:40px;
  /* align-items:center; */
  padding:44px;
  border-radius:32px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.04)
  );
  backdrop-filter:blur(22px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 40px 100px rgba(0,0,0,.45);
  transition:.45s ease;
}

.nxv-panel.is-active{
  display:grid;
}

.nxv-stage{
  position:relative;  
  max-width:100%;
  overflow:hidden;               
  border-radius:32px;             
}
/* ===============================
   PANEL CONTENT
================================ */
.nxv-content{
  max-width:520px;
}

.nxv-content h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:28px;
  margin:0;
}

.nxv-content h3 i{
  color:#93c5fd;
}

.nxv-content .sub{
  margin-top:6px;
  color:#9aa3b2;
}

.nxv-content .desc{
  margin:22px 0;
  line-height:1.7;
}

.nxv-list li{
  margin-bottom:10px;
}

.nxv-list i{
  margin-right:8px;
  color:#93c5fd;
}

/* ===============================
   MINI CARDS
================================ */

.nxv-cards{
  display:flex;
  gap:16px;
}

.nxv-card{
  flex:1;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  text-align:center;
  transition:.3s ease;
}

.nxv-card:hover{
  background:rgba(255,255,255,.12);
}

/* ===============================
   HIGHLIGHT
================================ */

.nxv-highlight{
  margin-top:20px;
  padding:16px;
  border-left:4px solid #f59e0b;
  background:rgba(245,158,11,.08);
}

/* ===============================
   REVEAL ANIMATION
================================ */

.nxv-content > *{
  opacity:0;
  transform:translateY(14px);
}

.nxv-panel.is-active .nxv-content > *{
  animation:reveal .6s ease forwards;
}

.nxv-panel.is-active .nxv-content > *:nth-child(1){animation-delay:.05s}
.nxv-panel.is-active .nxv-content > *:nth-child(2){animation-delay:.12s}
.nxv-panel.is-active .nxv-content > *:nth-child(3){animation-delay:.2s}
.nxv-panel.is-active .nxv-content > *:nth-child(4){animation-delay:.28s}

@keyframes reveal{
  to{opacity:1;transform:none}
}

/* ===============================
   VISUAL AREA
================================ */

.nxv-visual{
  position:relative;
  width:100%;
  max-width:520px;
  margin-left:0;
  justify-self:end;
  overflow:hidden;
  padding-right:12px; 
}

.nxv-visual-inner{
  position:relative;
  display:grid;
  place-items:center;
  transition:transform .6s ease;
}

.nxv-panel.is-active .nxv-visual-inner{
  transform:scale(1.03);
}

.nxv-visual img,
.nxv-visual canvas{
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.nxv-visual canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* ===============================
   GRID VISUAL (MVSS / DFS)
================================ */

.nxv-visual-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.nxv-visual-grid img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:14px;
}

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

@media(max-width:900px){

  .nxv-layout{
    grid-template-columns:1fr;
    gap:28px;
  }

  .nxv-nav{
    position:relative;
    top:0;
    flex-direction:row;
    overflow-x:auto;
    padding-bottom:8px;
  }

  .nxv-panel{
    grid-template-columns:1fr;
    padding:32px 24px;
  }

  .nxv-visual{
    max-width:100%;
    margin-top:28px;
  }

  .nxv-visual-inner{
    transform:none;
  }
}


/* ===============================
   ECO ARCH – ISOLATED SECTION
================================ */
.eco-arch-section{
  padding:120px 20px;
  background:
    radial-gradient(circle at 30% 10%, #1b2440 0%, transparent 55%),
    linear-gradient(180deg,#0b1220,#0e1628);
  color:#e5e7eb;
}

.eco-arch-container{
  max-width:1280px;
  margin:auto;
}

.eco-arch-header{
  text-align:center;
  margin-bottom:64px;
}

.eco-arch-title{
  font-size:clamp(26px,4vw,36px);
  font-weight:700;
  letter-spacing:.04em;
}

.eco-arch-sub{
  margin-top:12px;
  color:#9ca3af;
}

/* GRID */
.eco-arch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

/* CARD */
.eco-arch-card{
  position:relative;
  padding:36px 30px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  transition:.45s cubic-bezier(.22,.61,.36,1);
  cursor:pointer;
  overflow:hidden;
}

/* focus card */
.eco-arch-card.is-focus{
  border-color:rgba(99,102,241,.55);
  box-shadow:0 0 0 1px rgba(99,102,241,.2);
}

/* hover motion */
.eco-arch-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

/* border glow sweep */
.eco-arch-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg,
    transparent 30%,
    rgba(255,255,255,.35),
    transparent 70%);
  opacity:0;
  transition:.4s;
}

.eco-arch-card:hover::after{
  opacity:.5;
}

/* icon */
.eco-arch-icon{
  font-size:32px;
  margin-bottom:18px;
}

.eco-orange{color:#fb923c;}
.eco-green{color:#4ade80;}
.eco-blue{color:#60a5fa;}

.eco-arch-card h3{
  font-size:18px;
  margin-bottom:12px;
}

.eco-arch-card p{
  font-size:14px;
  color:#cbd5f5;
  margin-bottom:18px;
  line-height:1.6;
}

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

.eco-arch-card li{
  font-size:13px;
  color:#a5b4fc;
  margin-bottom:8px;
}

.eco-arch-section{
  padding:120px 20px;
  background:
    radial-gradient(circle at 25% 10%, #1b2550 0%, transparent 60%),
    linear-gradient(180deg,#0b1220,#0e1628);
  color:#e5e7eb;
}

.eco-arch-container{
  max-width:1280px;
  margin:auto;
}

.eco-arch-header{
  text-align:center;
  margin-bottom:72px;
}

.eco-arch-header h2 i,
.eco-arch-header p i{
  margin-right:8px;
  color:#93c5fd;
}

.eco-arch-title{
  font-size:clamp(26px,4vw,36px);
  font-weight:700;
  letter-spacing:.06em;
}

.eco-arch-sub{
  margin-top:12px;
  color:#9ca3af;
}

/* GRID */
.eco-arch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

/* CARD */
.eco-arch-card{
  position:relative;
  padding:40px 32px;
  border-radius:26px;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.14);
  transition:.5s cubic-bezier(.22,.61,.36,1);
  cursor:pointer;
  overflow:hidden;
}

/* hover lift */
.eco-arch-card:hover{
  transform:translateY(-12px);
  box-shadow:0 35px 90px rgba(0,0,0,.45);
}

/* active focus */
.eco-arch-card.is-focus{
  border-color:rgba(99,102,241,.6);
  box-shadow:0 0 0 1px rgba(99,102,241,.35);
}

/* dynamic glow */
.eco-arch-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.18),
    transparent 60%);
  opacity:0;
  transition:.3s;
}

.eco-arch-card:hover::before{
  opacity:1;
}

/* ICON */
.eco-arch-icon.main{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin-bottom:22px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.2),
    0 12px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
  transition:.45s cubic-bezier(.22,.61,.36,1);
}

.eco-arch-card:hover .eco-arch-icon{
  transform:rotate(-6deg) scale(1.08);
}

.eco-arch-card:hover .eco-arch-icon.main{
  transform:translateY(-6px) scale(1.08) rotate(-5deg);
}

/* 功能 icon */
.eco-arch-features i{
  color:#60a5fa;
  font-size:14px;
}
.orange{color:#fb923c;background:rgba(251,146,60,.15);}
.green{color:#4ade80;background:rgba(74,222,128,.15);}
.blue{color:#60a5fa;background:rgba(96,165,250,.15);}

.eco-arch-card h3{
  font-size:18px;
  margin-bottom:12px;
}

/* 標題 icon */
.eco-arch-card h3 i{
  margin-right:8px;
  color:#a5b4fc;
}

/* 說明 icon */
.eco-arch-card p i{
  margin-right:6px;
  color:#94a3b8;
}

.eco-arch-card p{
  font-size:14px;
  color:#cbd5f5;
  line-height:1.6;
  margin-bottom:20px;
}

/* FEATURE LIST */
.eco-arch-features{
  list-style:none;
  padding:0;
  margin:0;
}

.eco-arch-features li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:#a5b4fc;
  margin-bottom:10px;
}

.eco-arch-features i{
  width:18px;
  text-align:center;
}

/* ===============================
   iOS AI VISION SECTION
================================ */
.ios-ai-vision-section{
  padding:120px 20px;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  color:#0f172a;
}

.ios-ai-container{
  /* max-width:1280px; */
  /* margin:auto; */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
}

/* 平板以下 */
@media (max-width: 1024px){
  .ios-ai-container{
    grid-template-columns:1fr;
    gap:48px;
  }
}

/* LEFT */
.ios-ai-eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:600;
  color:#22c55e;
}

.ios-ai-title{
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  margin:14px 0;
}

.ios-ai-desc{
  font-size:15px;
  line-height:1.8;
  color:#475569;
  max-width:520px;
}

/* METRICS */
.ios-ai-metrics{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.ios-ai-metric-card{
  padding:20px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(14px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  transition:.35s ease;
}

.ios-ai-metric-card i{
  font-size:18px;
  color:#2563eb;
  margin-bottom:10px;
}

.ios-ai-metric-card strong{
  display:block;
  font-size:22px;
  font-weight:700;
}

.ios-ai-metric-card span{
  font-size:13px;
  color:#64748b;
}

/* hover */
.ios-ai-metric-card:hover{
  transform:translateY(-6px);
}

/* RIGHT VISUAL */
.ios-ai-visual{
  position:relative;
}

.ios-ai-glass-frame{
  position:relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 420px;
  border-radius:28px;
  overflow: hidden;

  padding:18px;  
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(18px);
  box-shadow:0 40px 120px rgba(15,23,42,.18);
}

.ios-ai-glass-frame img{
  width:100%;
  border-radius:24px;
  display:block;
}

/* ===============================
   iOS Glass Video
================================ */
.ios-ai-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
  z-index:1;

  /* 工程感微調 */
  filter:
    contrast(1.05)
    saturate(1.05)
    brightness(.98);
}

.ai-box,
.ios-ai-live-tag,
.ai-links{
  position:relative;
  z-index:3;
}

.ai-box{
  position:absolute;
  z-index:3;
  border-radius:10px;
  background:rgba(255,255,255,.08);     /* 半透，不模糊 */
  border:2px solid currentColor;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 10px 26px rgba(0,0,0,.22);
  pointer-events:none;
  overflow:visible;
}

.ai-box .label{
  position:absolute;
  top:-18px;
  left:8px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* 顏色 */
.ai-box.truck{
  border:2px solid rgba(249,115,22,.9);
  background:rgba(129, 96, 96, 0.096);
  top:18%;
  left:12%;
  width:42%;
  height:38%;
}

.ai-box.car{
  bottom:18%;
  left:28%;
  width:34%;
  height:30%;
}

.ai-box.pedestrian{
  top:22%;
  right:12%;
  width:20%;
  height:48%;
}

.ai-box.car{ color:#22c55e; }           /* 綠 */
.ai-box.pedestrian{ color:#3b82f6; }    /* 藍 */
.ai-box.truck{ color:#f97316; }         /* 橘 */

.ai-box.pedestrian{
  border:2px solid rgba(59,130,246,.9);
  width:90px;
  height:130px;
  top:80px;
  left:240px;
}

@media (max-width:576px){
  .ios-ai-container{
    gap:36px;
  }

  .ios-ai-glass-frame{
    border-radius:20px;
  }

  .ios-ai-live-tag{
    font-size:12px;
    padding:6px 10px;
    left:12px;
    bottom:10px;
  }
}


/* 掃描光條 */
.ai-box::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    linear-gradient(120deg,
      transparent 40%,
      rgba(255,255,255,.9),
      transparent 60%);
  opacity:.35;
  animation:scan 2.6s linear infinite;
  pointer-events:none;
}

@keyframes scan{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}

@keyframes scanLight{
  0%{
    transform:translateX(-120%);
  }
  100%{
    transform:translateX(120%);
  }
}

@media (max-width: 768px){
  .ios-ai-vision-section{
    overflow:hidden;
  }

  .ios-ai-container{
    display:flex;
    flex-direction:column;
    gap:32px;
  }
 
  .ios-ai-content{
    text-align:center;
  }
}

@media (max-width: 768px){

  .ios-ai-metrics{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:16px;
  }

  .ios-ai-metric-card{
    padding:18px 14px;
  }

  .ios-ai-metric-card strong{
    font-size:20px;
  }

  .ios-ai-metric-card span{
    font-size:13px;
  }
}

@media (max-width: 768px){

  .ios-ai-visual{
    width:100%;
  }

  .ios-ai-glass-frame{
    width:100%;
    height:auto; 
    aspect-ratio:16 / 9;
    margin:0 auto;
  }
}

@media (max-width: 768px){
  .case-title{
    font-size:26px;
    line-height:1.3;
  }

  .ios-ai-desc{
    font-size:15px;
    line-height:1.6;
  }
}

@media (max-width: 768px){

  .ios-ai-video{
    object-fit: cover;
    object-position: center top;   
  }
}

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

/* LIVE TAG */
.ios-ai-live-tag{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:5;
  white-space:nowrap;
  padding:8px 14px;
  font-size:12px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  gap:8px;
}

.ios-ai-live-tag .live-time{
  margin-left:8px;
  font-variant-numeric: tabular-nums;
  color:#475569;
}

.ios-ai-live-tag .dot{
  width:8px;
  height:8px;
  background:#ef4444;
  border-radius:50%;
  animation:pulse 1.6s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.4}
  100%{transform:scale(1);opacity:1}
}

/* 左側內容微調往右 */
.ios-ai-content{
  padding-left:28px;  
  max-width:520px;
}

/* 平板以下取消 */
@media(max-width:1024px){
  .ios-ai-content{
    padding-left:0;
  }
}

@media (max-width: 768px){
  .ios-ai-content{
    max-width:100%;
    text-align:center;
  }

  .ios-ai-metrics{
    justify-content:center;
  }
}

/* Truck */
.ai-box.truck{
  width:140px; height:80px;
  top:40px; left:60px;
  animation:truckMove 6s infinite;
}

@keyframes truckMove{
  0%{transform:translate(0,0)}
  50%{transform:translate(40px,10px)}
  100%{transform:translate(0,0)}
}

/* Car */
.ai-box.car{
  width:110px; height:70px;
  top:120px; left:220px;
  animation:carMove 5s infinite;
}

@keyframes carMove{
  0%{transform:translate(0,0)}
  50%{transform:translate(-30px,20px)}
  100%{transform:translate(0,0)}
}

/* Pedestrian */
.ai-box.pedestrian{
  width:80px; height:120px;
  top:160px; left:320px;
  animation:pedMove 4s infinite;
}

@keyframes pedMove{
  0%{transform:translate(0,0)}
  50%{transform:translate(10px,-20px)}
  100%{transform:translate(0,0)}
}

/* 鎖定狀態 */
.ai-box.is-locked{
  animation:lockJitter .9s infinite;
}

@keyframes lockJitter{
  0%{transform:translate(0,0)}
  20%{transform:translate(.6px,-.4px)}
  40%{transform:translate(-.5px,.5px)}
  60%{transform:translate(.4px,.3px)}
  80%{transform:translate(-.3px,-.4px)}
  100%{transform:translate(0,0)}
}

/* 神經連線 */
.ai-links{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.ai-links line{
  stroke:#93c5fd;
  stroke-width:1.5;
  stroke-dasharray:6 6;
  opacity:.65;
  animation:linkPulse 2.4s ease-in-out infinite;
}

@keyframes linkPulse{
  0%{opacity:.3}
  50%{opacity:.9}
  100%{opacity:.3}
}

/* ===== AI Annotation ===== */
.ai-annotation{
  position:absolute;
  right:-10px;
  bottom:-14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:#334155;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);
  padding:4px 8px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* 小 Mark */
.ai-annotation .mark{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

/* icon顏色跟框 */
.ai-box.car .ai-annotation{ color:#22c55e; }
.ai-box.pedestrian .ai-annotation{ color:#3b82f6; }
.ai-box.truck .ai-annotation{ color:#f97316; }

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

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

/* ================= RWD ================= */
@media(max-width:1024px){
  .eco-arch-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:640px){
  .eco-arch-grid{grid-template-columns:1fr;}
  .eco-arch-card{padding:30px 24px;}
}

/* ===============================
   RWD
================================ */
@media(max-width:1024px){
  .eco-arch-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .eco-arch-grid{
    grid-template-columns:1fr;
  }
  .eco-arch-card{
    padding:28px 22px;
  }
}

/* ===============================
   iOS AI VISION – BASE
================================ */
.ios-ai-vision-section{
  padding:100px 20px;
  background:linear-gradient(180deg,#f8fafc,#ffffff);
  color:#0f172a;
}

.ios-ai-container{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}

@media(max-width:1024px){
  .ios-ai-container{grid-template-columns:1fr;}
}

/* ===============================
   LEFT CONTENT
================================ */
.ios-ai-eyebrow{
  font-size:12px;
  letter-spacing:.14em;
  font-weight:600;
  color:#22c55e;
}

.ios-ai-title{
  font-size:clamp(28px,4vw,40px);
  font-weight:700;
  margin:14px 0;
}

.ios-ai-desc{
  font-size:15px;
  line-height:1.8;
  color:#475569;
  max-width:520px;
}

.ios-ai-metrics{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.ios-ai-metric-card{
  padding:20px 22px;
  border-radius:18px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  transition:.3s ease;
}

.ios-ai-metric-card:hover{
  transform:translateY(-6px);
}

.ios-ai-metric-card i{
  font-size:18px;
  color:#2563eb;
  margin-bottom:8px;
}

.ios-ai-metric-card strong{
  display:block;
  font-size:22px;
  font-weight:700;
}

.ios-ai-metric-card span{
  font-size:13px;
  color:#64748b;
}

/* ===============================
   RIGHT VISUAL FRAME
================================ */
/* .ios-ai-glass-frame{
  position:relative;
  padding:18px;
  border-radius:36px;
  background:rgba(255,255,255,.75);
  box-shadow:0 40px 120px rgba(15,23,42,.18);
  overflow:hidden;
} */

.ios-ai-glass-frame img{
  width:100%;
  border-radius:24px;
  display:block;
}

.ios-ai-glass-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      rgba(255,255,255,.02) 50%,
      rgba(0,0,0,.02) 50%
    );
  background-size:100% 3px;
  opacity:.15;
  z-index:2;
}

/* ===============================
   LIVE TAG
================================ */
/* .ios-ai-live-tag{
  position:absolute;
  left:22px;
  bottom:22px;
  padding:8px 14px;
  font-size:12px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  display:flex;
  align-items:center;
  gap:8px;
} */

.ios-ai-live-tag .dot{
  width:8px;
  height:8px;
  background:#ef4444;
  border-radius:50%;
  animation:pulse 1.6s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.5);opacity:.4}
  100%{transform:scale(1);opacity:1}
}

/* ===============================
   AI DETECTION BOXES
================================ */
.ai-box{
  position:absolute;
  border-radius:10px;
  background:rgba(255,255,255,.08);
  border:2px solid currentColor;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 10px 26px rgba(0,0,0,.22);
  pointer-events:none;
}

.ai-box.car{color:#22c55e;}
.ai-box.pedestrian{color:#3b82f6;}
.ai-box.truck{color:#f97316;}

/* label */
/* .ai-box .label{
  position:absolute;
  top:-18px;
  left:8px;
  padding:4px 10px;
  font-size:11px;
  font-weight:700;
  color:#fff;
  border-radius:999px;
  background:currentColor;
} */

/* annotation */
.ai-annotation{
  position:absolute;
  right:-10px;
  bottom:-14px;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  /* background:rgba(255,255,255,.9); */
  /* padding:4px 8px; */
  border-radius:999px;
  opacity:0;
  transform:translateY(4px);
  transition:.4s ease;
}

/* .ai-annotation .mark{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
} */

/* primary lock */
.ai-box.is-primary{
  z-index:10;
  animation:primaryFocus 2.4s ease-in-out infinite, lockJitter .9s infinite;
}

.ai-box.is-primary .ai-annotation{
  opacity:1;
  transform:translateY(0);
}

.ai-box.is-secondary{
  opacity:.45;
  filter:saturate(.7);
}

/* .ai-box.is-primary .ai-title::before{
  box-shadow:
    0 14px 40px rgba(37,99,235,.25),
    inset 0 0 0 1px rgba(255,255,255,.95);
} */

/* .ai-box.is-primary .ai-title::after{
  background:rgba(255,255,255,.75);
} */

/* animations */
@keyframes primaryFocus{
  0%{transform:scale(1)}
  50%{transform:scale(1.015)}
  100%{transform:scale(1)}
}

@keyframes lockJitter{
  0%{transform:translate(0,0)}
  25%{transform:translate(.6px,-.4px)}
  50%{transform:translate(-.5px,.5px)}
  75%{transform:translate(.4px,.3px)}
  100%{transform:translate(0,0)}
}

/* ===============================
   BOX POSITIONS
================================ */
.ai-box.truck{width:160px;height:90px;top:40px;left:60px;}
.ai-box.car{width:120px;height:80px;top:120px;left:200px;}
.ai-box.pedestrian{width:90px;height:130px;top:90px;left:300px;}


/* ===============================
   FINAL iOS TITLE PILL 
================================ */
.ai-title{
  position:absolute;
  top:-34px;
  left:16px;

  padding:7px 16px;
  font-size:12px;
  font-weight:600;
  color:#0f172a;

  background:#ffffff;
  border-radius:999px;

  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;

  z-index:2;
  box-shadow:
    0 4px 12px rgba(0,0,0,.12);
  /* opacity:.35;
  transform:scale(.92);
  filter:blur(.3px);
  z-index:1;
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease; */
}

/* 中層承重白殼 */
.ai-title::before{
  content:"";
  position:absolute;
  inset:-6px -10px;
  background:#ffffff;
  border-radius:999px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.9);
  z-index:-1;
}

/* 最外層柔光白暈 */
.ai-title::after{
  content:"";
  position:absolute;
  inset:-12px -18px;
  background:rgba(255,255,255,.65);
  border-radius:999px;
  filter:blur(6px);
  z-index:-2;
}

/* icon  */
.ai-title i{
  font-size:12px;
  color:#0f172a;
}


.ai-box .ai-title{
  top:-34px;
  left:16px;
}

/* ===== （Traffic Incidents / Truck） ===== */
.ai-box.truck .ai-title{
  top:-34px;
  left:16px;
}

/* ===== （Vehicle Detection / Car） ===== */
.ai-box.car .ai-title{
  top:-44px;          
  left:50%;
  transform:translateX(-50%);
}

.ai-box.pedestrian .ai-title{
  top:-34px;
  right:16px;        
  left:auto;
}

.ai-box.is-primary 
.ai-title{
  opacity:1;
  transform:scale(1);
  filter:none;
  z-index:5;
  top:-56px;
}

.ai-box.is-secondary 
.ai-title{
  left:16px;
}

.ai-box.pedestrian.is-secondary 
.ai-title{
  right:16px;
  left:auto;
}

/* ===============================
   CASE APPLICATIONS  CASE GLASS SECTION
================================ */
.case-glass-section{
  padding:90px 20px;
  background:#f8fafc;
  padding-left:40px;
  position:relative;
}

.case-glass-section::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      700px 220px at 50% 0%,
      rgba(99,102,241,.10),
      transparent 65%
    );

  pointer-events:none;
}

.case-glass-header{
  max-width:1280px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;        
  text-align:center;
  justify-content:space-between;
  gap:20px;
}

.case-eyebrow{
  display:block;
  margin-bottom:6px;
  text-align:center;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:600;
  color:#6366f1;
  text-align:center;
}

.case-title{
  font-size:38px;
  font-weight:800;
  letter-spacing:.02em;
  color:#0f172a;
}

.case-title span{
  color:#6b6efc; 
}

/* Tabs */
.case-tabs{
  display:flex;
  gap:6px;
  background:rgba(255,255,255,.7);
  backdrop-filter: blur(16px);
  padding:6px;
  border-radius:999px;
  box-shadow:
    0 12px 30px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.case-tab{
  position:relative;
  padding:10px 22px;
  border-radius:999px;
  border:none;
  background:transparent;
  font-weight:600;
  cursor:pointer;
  color:#64748b;
  transition:
    color .3s ease,
    transform .3s ease;
}

.case-tab.is-active{
  background:rgba(255,255,255,.95);
  color:#6b6efc;
  box-shadow:
    0 8px 24px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-1px);
}
/* Hover */
.case-tab:hover{
  color:#0f172a;
}

/* RWD */
@media(max-width:768px){
  .case-tabs{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .case-tab{
    white-space:nowrap;
  }
}

/* Layout */
.case-glass-container{
  max-width:1280px;
  margin:60px auto 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
}

/* Content */
.case-panel{
  display:none;
}
.case-panel.is-active{
  display:block;
}

.case-panel h3{
  font-size:24px;
  margin-bottom:12px;
}

.case-panel p{
  color:#475569;
  line-height:1.7;
}

.case-metrics{
  display:flex;
  gap:16px;
  margin:24px 0;
}

.metric-card,
.case-feature{
  position:relative;
  background:rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 10px 30px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background .35s ease;
}

/* hover：浮起 */
.metric-card:hover,
.case-feature:hover{
  transform:translateY(-6px);
  box-shadow:
    0 18px 46px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.metric-card.orange{color:#c2410c;}
.metric-card.green{color:#166534;}

.metric-card .label{
  font-size:13px;
}

.metric-card strong{
  display:block;
  font-size:26px;
}

/* active */
.metric-card:active,
.case-feature:active{
  transform:translateY(-2px) scale(.985);
  box-shadow:
    0 8px 20px rgba(15,23,42,.12);
}

/* 數值強化 */
.metric-card strong{
  font-size:28px;
  font-weight:700;
  letter-spacing:.02em;
  display:inline-block;
  transition:transform .35s ease;
}

.metric-card:hover strong{
  transform:scale(1.04);
}

/* Feature */
.case-feature{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.case-feature.blue{color:#2563eb;}
.case-feature.green{color:#16a34a;}

/* List */
.case-list{
  margin-top:24px;
  padding:0;
  list-style:none;           
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.case-list li{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  position:relative;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 8px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* hover：浮起 + 光暈 */
.case-list li:hover{
  transform:translateY(-6px);
  box-shadow:
    0 18px 46px rgba(15,23,42,.16),
    0 0 0 6px rgba(249,115,22,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* icon 微提亮 */
.case-list li i{
  font-size:14px;
  color:#3322d3;
  position:relative;
  background:rgba(255,255,255,.68);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.55);
  padding:18px 14px;
  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

/* hover：浮起 + 光暈 */
.case-list li:hover{
  transform:translateY(-6px);
  box-shadow:
    0 18px 48px rgba(15,23,42,.16),
    0 0 0 6px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* icon 視覺層級 */
.case-list li i{
  font-size:18px;
  color:#6366f1;
}

/* 文字 */
.case-list li span{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}

/* Visual */
.case-glass-visual{
  position:relative;
}

.case-visual-frame{
  position:relative;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  padding:18px;
  border-radius:36px;
  box-shadow:
    0 40px 120px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:
    box-shadow .4s ease,
    transform .4s ease;
}

/* Hover 光源感 */
.case-visual-frame:hover{
  box-shadow:
    0 60px 160px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.case-img{
  display:none;
  width:100%;
  border-radius:24px;
}
.case-img.is-active{
  display:block;
}

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


/* ===============================
   DOMAIN GLASS SECTION
================================ */
.domain-glass-section{
  padding:50px 20px;
  /* background:#f8fafc85; */
  position:relative;
}

.domain-glass-header{
  max-width:1280px;
  margin:auto;
  text-align:center;
}

.domain-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:#6366f1;
  font-weight:600;
}

.domain-title{
  font-size:40px;
  font-weight:800;
  margin-top:6px;
  color:#0f172a;
}
.domain-title span{
  color:#6366f1;
}

/* Tabs */
.domain-tabs{
  margin-top:28px;
  display:inline-flex;
  gap:6px;
  padding:6px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px);
  border-radius:999px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.domain-tab{
  padding:10px 22px;
  border:none;
  border-radius:999px;
  background:transparent;
  font-weight:600;
  cursor:pointer;
  color:#64748b;
}

.domain-tab.is-active{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
  color:#fff;

  box-shadow:
    0 8px 24px rgba(79,110,247,.35),
    inset 0 1px 0 rgba(255,255,255,.45);

  transform:translateY(-1px);
}

/* Layout */
.domain-glass-container{
  max-width:1280px;
  margin:80px auto 0;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:60px;
}

/* Panels */
.domain-panel{
  display:none;
}
.domain-panel.is-active{
  display:block;
}

.domain-panel h3{
  font-size:26px;
  margin-bottom:12px;
}
.domain-panel p{
  color:#475569;
  line-height:1.7;
}

/* List */
.domain-list{
  min-height:72px; 
  margin-top:24px;
  list-style:none;  
  padding:18px 24px;          
  display:flex;
  grid-template-columns:repeat(2,1fr);
  align-items:center;
  gap:14px;
  border-radius:20px;
}

.domain-list li,
.domain-alert,
.metric-glass{
  position:relative;
  background:var(--glass-bg);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  border-radius:18px;
  border:1px solid var(--glass-border);
  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.domain-list li i{
  font-size:18px;
  color:var(--brand-blue);
  transition:.35s ease;
}

.domain-list li:hover i{
  transform:scale(1.15) rotate(-6deg);
  filter:drop-shadow(0 4px 10px rgba(79,110,247,.45));
}

/* hover */
.domain-list li:hover,
.domain-alert:hover,
.metric-glass:hover{
  transform:translateY(-6px);
  box-shadow:
    var(--glass-shadow),
    0 0 0 6px var(--brand-glow),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* hover */
.domain-list li:hover,
.domain-alert:hover,
.metric-glass:hover{
  transform:translateY(-6px);
  box-shadow:
    var(--glass-shadow),
    0 0 0 6px var(--brand-glow),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.domain-list li::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;

  background:linear-gradient(
    120deg,
    transparent 30%,
    rgba(79,110,247,.35),
    transparent 70%
  );

  opacity:0;
  transform:translateX(-60%);
  transition:.6s ease;
  pointer-events:none;
}

.domain-list li:hover::after{
  opacity:1;
  transform:translateX(60%);
}

/* Alerts */
.domain-alert{
  margin-top:16px;
  padding:14px 18px;
  border-radius:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.domain-alert.danger{
  background:#fff1f2;
  color:#b91c1c;
}
.domain-alert.warning{
  background:#fff7ed;
  color:#c2410c;
}

/* Metrics */
.domain-metrics{
  display:flex;
  gap:20px;
  margin-top:24px;
}

.metric-glass{
  flex:1;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(16px);
  border-radius:18px;
  padding:20px;
  text-align:center;
}

/* Visual */
.domain-visual-frame{
  position:relative;                 
  width:100%;
  aspect-ratio: 16 / 10;             /*  穩定比例 */

  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:20px;
  border-radius:40px;
  box-shadow:0 40px 120px rgba(0,0,0,.18);
  overflow:hidden;  
}

.domain-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:28px;

  opacity:0;
  transition:
    opacity .6s ease,
    filter .6s ease;

  filter:brightness(.95) saturate(.9);
}
.domain-img.is-active{
  display:block;
  opacity:1;
  animation:systemBreath 3.6s ease-in-out infinite;
}

.domain-img.is-hover{
  opacity:1;
  filter:brightness(1.12) saturate(1.1);
}

/* active */
.domain-img.is-active{
  opacity:1;
  animation:systemBreath 3.6s ease-in-out infinite;
}

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

/* 結構性留白 */
.domain-glass-content{
  padding-left:48px;   
}


.domain-tabs{
  margin-top:28px;
  display:inline-flex;
  gap:6px;
  padding:6px;

  background:var(--glass-bg);
  backdrop-filter: blur(18px);
  border-radius:999px;

  box-shadow:
    0 12px 30px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.domain-tab{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 20px;
  border:none;
  border-radius:999px;
  background:transparent;

  font-weight:600;
  color:#64748b;
  cursor:pointer;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

/* Active */
.domain-tab i{
  font-size:14px;
}

/* iOS Glass Segmented Tabs */
.domain-tab
.is-active{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
  color:#fff;
  box-shadow:
    0 8px 24px rgba(79,110,247,.35),
    inset 0 1px 0 rgba(255,255,255,.45);
  transform:translateY(-1px);
}

.domain-tab{
  display:flex;
  align-items:center;
  gap:8px;

  padding:10px 20px;
  border:none;
  border-radius:999px;
  background:transparent;

  font-weight:600;
  color:#64748b;
  cursor:pointer;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.domain-tab i{
  font-size:14px;
}

/* Active */
.domain-tab.is-active{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-purple));
  color:#fff;

  box-shadow:
    0 8px 24px rgba(79,110,247,.35),
    inset 0 1px 0 rgba(255,255,255,.45);

  transform:translateY(-1px);
}

/* Hover */
.domain-tab:hover{
  color:#0f172a;
}

/* Active */
@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 rgba(79,110,247,0);}
  50%{ box-shadow:0 0 18px rgba(79,110,247,.25);}
}

.domain-item[data-type="thermal"]:hover{
  animation:breathe 1.6s ease infinite;
}

.domain-item[data-type="wave"]:hover{
  animation:breathe 2.4s ease infinite;
}

.domain-item[data-type="multi"]:hover{
  animation:breathe 1.2s ease infinite;
}


@keyframes systemBreath{
  0%,100%{
    filter:brightness(1) saturate(1);
  }
  50%{
    filter:brightness(1.06) saturate(1.05);
  }
}
/* ======================================================
   c04 – VIDA Defense Architecture (Isolated)
====================================================== */

.vida-defarch{
  padding:140px 20px;
  background:
    radial-gradient(1200px 600px at 50% 0%, #eef2ff 0%, transparent 60%),
    #f8fafc;
  position:relative;
  overflow:hidden;
}

.vida-defarch__container{
  max-width:1280px;
  margin:0 auto;
}

/* ---------------- Header ---------------- */
.vida-defarch__header{
  text-align:center;
  max-width:780px;
  margin:0 auto 90px;
}

.vida-defarch__eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:#6366f1;
}

.vida-defarch__title{
  margin-top:10px;
  font-size:40px;
  font-weight:800;
  color:#0f172a;
}

.vida-defarch__title span{
  color:#6366f1;
}

.vida-defarch__desc{
  margin-top:14px;
  color:#475569;
  line-height:1.75;
}

/* ---------------- Cards Layout ---------------- */
.vida-defarch__cards{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
}

/* ---------------- Card Base ---------------- */
.vida-defarch__card{
  position:relative;
  padding:44px 36px;
  border-radius:28px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(20px) saturate(1.25);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);
  box-shadow:
    0 26px 60px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
  z-index:2;
}

.vida-defarch__card:hover{
  transform:translateY(-12px);
  box-shadow:
    0 40px 90px rgba(15,23,42,.18),
    0 0 0 6px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------------- Icon ---------------- */
.vida-defarch__icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:22px;
  background:rgba(99,102,241,.12);
  color:#6366f1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Core icon */
.vida-defarch__icon.is-core{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
}

/* ---------------- Core Card ---------------- */
.vida-defarch__card.is-core{
  outline:2px solid rgba(99,102,241,.45);
  animation:vidaCoreBreath 3.6s ease-in-out infinite;
}

@keyframes vidaCoreBreath{
  0%,100%{
    box-shadow:
      0 26px 60px rgba(15,23,42,.12),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
  50%{
    box-shadow:
      0 34px 90px rgba(99,102,241,.35),
      0 0 0 8px rgba(99,102,241,.14),
      inset 0 1px 0 rgba(255,255,255,.95);
  }
}

/* Badge */
.vida-defarch__badge{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 18px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  border-radius:999px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  box-shadow:0 8px 20px rgba(99,102,241,.35);
}

/* ---------------- Text ---------------- */
.vida-defarch__card h3{
  font-size:20px;
  font-weight:700;
  margin-bottom:12px;
  color:#0f172a;
}

.vida-defarch__card p{
  color:#475569;
  line-height:1.75;
}

/* ---------------- Meta ---------------- */
.vida-defarch__meta{
  margin-top:26px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  font-weight:600;
  color:#6366f1;
}

.vida-defarch__meta li{
  display:flex;
  align-items:center;
  gap:8px;
}

/* ---------------- Neural Layer ---------------- */
.vida-defarch__neural{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

/* dots */
.vida-defarch__dot{
  position:absolute;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle,#c7d2fe 0%,#6366f1 45%,transparent 70%);
  filter:blur(.4px);
  opacity:0;
}

/* VBS → DFS */
.vida-defarch__dot.is-left{
  top:52%;
  left:18%;
  animation:vidaFlowLeft 4.8s ease-in-out infinite;
}

/* AI → DFS */
.vida-defarch__dot.is-right{
  top:52%;
  right:18%;
  animation:vidaFlowRight 4.8s ease-in-out infinite;
  animation-delay:1.6s;
}

/* DFS pulse */
.vida-defarch__dot.is-core{
  top:44%;
  left:50%;
  transform:translateX(-50%);
  animation:vidaCorePulse 5.6s ease-in-out infinite;
}

/* Animations */
@keyframes vidaFlowLeft{
  0%{opacity:0; transform:translateX(0) scale(.6);}
  20%{opacity:1;}
  50%{opacity:1; transform:translateX(260px) scale(1);}
  80%{opacity:0;}
  100%{opacity:0; transform:translateX(260px) scale(.6);}
}

@keyframes vidaFlowRight{
  0%{opacity:0; transform:translateX(0) scale(.6);}
  20%{opacity:1;}
  50%{opacity:1; transform:translateX(-260px) scale(1);}
  80%{opacity:0;}
  100%{opacity:0; transform:translateX(-260px) scale(.6);}
}

@keyframes vidaCorePulse{
  0%,100%{opacity:.15; transform:translateX(-50%) scale(.8);}
  50%{opacity:.45; transform:translateX(-50%) scale(1.4);}
}

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


/* ===============================
   VIDA Infrastructure Glass
================================ */
.vida-infra-glass-section{
  padding:140px 20px;
  /* background:#f8fafc; */
}

.vida-infra-container{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:80px;
  align-items:center;
}

/* Grid cards */
.vida-infra-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:32px;
}

.vida-infra-card{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:28px;
  padding:32px;

  box-shadow:
    0 24px 60px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.9);

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

.vida-infra-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 40px 90px rgba(15,23,42,.18),
    0 0 0 6px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Icon */
.vida-infra-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:18px;
  color:#fff;
}

.vida-infra-icon.blue{background:linear-gradient(135deg,#60a5fa,#6366f1);}
.vida-infra-icon.green{background:linear-gradient(135deg,#34d399,#10b981);}
.vida-infra-icon.orange{background:linear-gradient(135deg,#fb923c,#f97316);}
.vida-infra-icon.purple{background:linear-gradient(135deg,#a78bfa,#8b5cf6);}

.vida-infra-card h4{
  font-size:18px;
  margin-bottom:10px;
  color:#0f172a;
}

.vida-infra-card p{
  color:#475569;
  line-height:1.7;
}

/* Right content */
.vida-infra-title{
  font-size:36px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:18px;
}

.vida-infra-desc{
  color:#475569;
  line-height:1.8;
  margin-bottom:26px;
  margin-right:60px;
}

.vida-infra-list{
  list-style:none;
  padding:0;
}

.vida-infra-list li{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  font-weight:600;
  color:#0f172a;
}

.vida-infra-list i{
  color:#22c55e;
}
/* ===============================
   iOS Glass – Infra Cards Upgrade
================================ */
.infra-glass-card{
  position:relative;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.85),
      rgba(255,255,255,.65)
    );
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);

  border-radius:28px;
  padding:36px 32px;
  overflow:hidden;

  box-shadow:
    0 30px 80px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.95);

  transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    box-shadow .6s ease;
}

/* Glass edge highlight */
.infra-glass-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.65),
      rgba(255,255,255,0) 40%
    );
  opacity:.55;
}

/* Hover float */
.infra-glass-card:hover{
  transform:translateY(-14px) scale(1.01);
  box-shadow:
    0 50px 120px rgba(15,23,42,.18),
    0 0 0 6px rgba(99,102,241,.08),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* Subtle breathing glow */
@keyframes glass-breathe{
  0%,100%{
    box-shadow:
      0 30px 80px rgba(15,23,42,.12),
      0 0 0 rgba(99,102,241,0);
  }
  50%{
    box-shadow:
      0 36px 96px rgba(15,23,42,.14),
      0 0 18px rgba(99,102,241,.18);
  }
}
/* Icon「浮在玻璃中」效果*/
.infra-glass-card.is-active{
  animation:glass-breathe 3.6s ease-in-out infinite;
}

.icon-blue{background:linear-gradient(135deg,#60a5fa,#6366f1);}
.icon-green{background:linear-gradient(135deg,#34d399,#10b981);}
.icon-orange{background:linear-gradient(135deg,#fb923c,#f97316);}
.icon-purple{background:linear-gradient(135deg,#a78bfa,#8b5cf6);}

.infra-glass-icon{
  width:60px;
  height:60px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:22px;
  color:#fff;

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

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

.infra-glass-card:hover .infra-glass-icon{
  transform:translateY(-6px) scale(1.08) rotate(-3deg);
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    0 0 16px rgba(99,102,241,.35);
}

/* HA icon core */
.ha-core{
  position:relative;
}

.ha-core::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:22px;

  border:1.5px dashed rgba(34,197,94,.55);
  opacity:.75;

  animation:ha-sync 3.6s linear infinite;
}

/* Hover */
.infra-glass-card:hover .ha-core::after{
  animation-duration:1.4s;
  border-color:rgba(34,197,94,.85);
}

/* Active */
.infra-glass-card.is-active .ha-core::after{
  animation-duration:4.8s;
  border-style:solid;
  border-color:rgba(34,197,94,.65);
}

/* Active / Standby */
@keyframes ha-sync{
  0%{
    transform:rotate(0deg);
    opacity:.25;
  }
  50%{
    opacity:.85;
  }
  100%{
    transform:rotate(360deg);
    opacity:.25;
  }
}

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

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

@media(max-width:640px){
  .infra-grid{
    grid-template-columns:1fr;
  }
  .infra-glass-card{
    padding:30px 26px;
  }
}
/* ===============================
   scene-glass-section
================================ */

.scene-glass-section{
  padding:90px 20px;
  /* background:linear-gradient(180deg,#f8fafc,#eef2ff); */
}

/* Header */
.scene-glass-header{
  max-width:1280px;
  margin:0 auto 50px;
  text-align:center;
}

.scene-eyebrow{
  font-size:12px;
  letter-spacing:.2em;
  font-weight:600;
  color:#6366f1;
}

.scene-title{
  font-size:42px;
  font-weight:800;
  margin-top:8px;
  color:#0f172a;
}
.scene-title span{ color:#6366f1; }

.scene-desc{
  margin-top:14px;
  color:#64748b;
}

/* Grid */
.scene-glass-grid{
  max-width:1280px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}

/* Card */
.scene-glass-card{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(18px);
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 30px 80px rgba(15,23,42,.15);
  transition:.45s cubic-bezier(.22,.61,.36,1);
  position:relative;
}

.scene-glass-card:hover{
  transform:translateY(-14px);
  box-shadow:
    0 40px 120px rgba(79,110,247,.25),
    0 0 0 6px rgba(99,102,241,.08);
}

/* Media */
.scene-media{
  height:220px;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:20px 20px 0 0;
}
.scene-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s ease;
}
.scene-glass-card:hover img{
  transform:scale(1.08);
}

.scene-media img,
.scene-media-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.scene-media-video{
  object-position: center top;
}

/* Body */
.scene-body{
  padding:28px;
}
.scene-body h3{
  font-size:20px;
  margin-bottom:10px;
}
.scene-body p{
  color:#475569;
  line-height:1.7;
  font-size:14px;
}

/* Link */
.scene-link{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  color:#6366f1;
}
.scene-link.green{ color:#22c55e; }
.scene-link.purple{ color:#8b5cf6; }

/* Active breathing */
@keyframes scene-breathe{
  0%,100%{ box-shadow:0 0 0 rgba(99,102,241,0); }
  50%{ box-shadow:0 0 26px rgba(99,102,241,.35); }
}

.scene-glass-card.is-active{
  animation:scene-breathe 3.6s ease-in-out infinite;
}

/* RWD */
@media(max-width:1024px){
  .scene-glass-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
  .scene-glass-grid{ grid-template-columns:1fr; }
}
/* ===============================
   vida-arch-glass-section
================================ */

.vida-arch-glass-section{
  padding:100px 20px;
  background:#f8fafc;
}

.vida-arch-container{
  max-width:1280px;
  margin:auto;
}

/* Header */
.vida-arch-header{
  text-align:center;
  margin-bottom:80px;
}

.vida-arch-eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:#6366f1;
  font-weight:600;
}

.vida-arch-title{
  font-size:40px;
  font-weight:800;
  margin:12px 0;
}
.vida-arch-title span{ color:#6366f1; }

.vida-arch-desc{
  max-width:720px;
  margin:0 auto;
  color:#475569;
}

/* Layers */
.vida-arch-layers{
  display:flex;
  flex-direction:column;
  gap:60px;
}

/* Layer Block */
.vida-arch-layer{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  border-radius:32px;
  padding:32px;
  box-shadow:
    0 30px 80px rgba(15,23,42,.15),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.vida-arch-layer h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  margin-bottom:24px;
}

/* Cards */
.vida-arch-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.vida-arch-cards.small{
  grid-template-columns:repeat(4,1fr);
}

.vida-arch-card{
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px);
  text-align:center;
  font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}

.vida-arch-card i{
  display:block;
  font-size:22px;
  margin-bottom:10px;
  color:#6366f1;
}

/* Hover */
.vida-arch-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 50px rgba(79,110,247,.25),
    0 0 0 6px rgba(99,102,241,.15);
}

/* Highlight */
.vida-arch-card.highlight{
  border:1px solid rgba(99,102,241,.35);
}

/* Accent */
.vida-arch-card.accent{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
}
.vida-arch-card.accent i{ color:#fff; }

.vida-arch-card.is-active{
  box-shadow:
    0 0 0 6px rgba(99,102,241,.25),
    0 30px 80px rgba(99,102,241,.35);
  transform:translateY(-8px) scale(1.02);
}

.vida-arch-card.is-active[data-node="vbs"] ~ .vida-arch-links[data-flow="vbs"]::after,
.vida-arch-card.is-active[data-node="dfs"] ~ .vida-arch-links[data-flow="dfs"]::after,
.vida-arch-card.is-active[data-node="ai"]  ~ .vida-arch-links[data-flow="ai"]::after{
  opacity:1;
  animation-duration:1.8s;
  box-shadow:0 0 24px currentColor;
}

.vida-arch-explain{
  position:fixed;
  right:32px;
  bottom:32px;
  width:360px;
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(15,23,42,.25);
  transform:translateY(40px);
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
  z-index:999;
}

.vida-arch-explain.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.vida-arch-explain h4{
  font-size:18px;
  margin-bottom:8px;
}

.vida-arch-explain .close{
  position:absolute;
  top:12px;
  right:14px;
  background:none;
  border:none;
  font-size:18px;
  cursor:pointer;
}

/* Neural Links */
.vida-arch-links{
  width:100%;
  height:20px;
  pointer-events:none;
  position:relative;
  overflow:visible;
}

.vida-arch-links::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:2px;
  height:100%;
  transform:translateX(-50%);

  opacity:var(--flow-soft);
  animation:dataFlow 3s linear infinite;
}

/* VBS  */
.vida-arch-links[data-flow="vbs"]::after{
  background:linear-gradient(
    to bottom,
    transparent,
    var(--flow-vbs),
    transparent
  );
  animation-duration:2s;
}

/* DFS – 穩定匯聚 */
.vida-arch-links[data-flow="dfs"]::after{
  background:linear-gradient(
    to bottom,
    transparent,
    var(--flow-dfs),
    transparent
  );
  animation-duration:3.2s;
}

/* AI */
.vida-arch-links[data-flow="ai"]::after{
  background:linear-gradient(
    to bottom,
    transparent,
    var(--flow-ai),
    transparent
  );
  animation-duration:4.6s;
}

@keyframes dataFlow{
  0%{
    transform:translate(-50%,-100%);
    opacity:.15;
  }
  40%{
    opacity:.85;
  }
  100%{
    transform:translate(-50%,100%);
    opacity:.15;
  }
}

.vida-arch-links line{
  stroke:#c7d2fe;
  stroke-width:.6;
}
.vida-arch-links circle{
  fill:#6366f1;
  animation:nodePulse 2s infinite;
}

/* DFS Breathing */
/* .core-breath{
  animation:breathe 3s ease-in-out infinite;
} */

@keyframes breathe{
  0%,100%{ box-shadow:0 0 0 rgba(99,102,241,0); }
  50%{ box-shadow:0 0 28px rgba(99,102,241,.35); }
}

@keyframes nodePulse{
  0%,100%{ opacity:.4; r:1.5; }
  50%{ opacity:1; r:2.5; }
}

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

:root{
  --flow-vbs: rgba(59,130,246,.85);   /* 藍 */
  --flow-dfs: rgba(34,197,94,.85);    /* 綠 */
  --flow-ai:  rgba(168,85,247,.9);    /* 紫 */

  --flow-soft: .35;
}


/* ===============================
   VX IOC FUSION DECK
================================ */
.ios-glass{
  backdrop-filter: blur(0);
  background:none;
}

.vx-ioc-fusion-deck{
  max-width:1280px;
  margin:0 auto;
  position:relative;
  padding:96px 0;
  /* border-radius:48px; */
  background:none; 
  overflow:hidden;
}

.vx-ioc-fusion-deck .vida-arch-container::before{
  box-shadow:
    0 60px 120px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* Header */
.vx-ioc-head{
  text-align:center;
  /* max-width:820px; */
  margin:0 auto 56px;
  margin-bottom:48px;
}
.vx-ioc-head h2{
  font-size:42px;
  font-weight:700;
}

.vx-ioc-head .grad{
  background:linear-gradient(90deg,#6366f1,#38bdf8);
  -webkit-background-clip:text;color:transparent;
}

.vx-ioc-head h2 .grad{
  background:linear-gradient(90deg,#6366f1,#38bdf8);
  -webkit-background-clip:text;
  color:transparent;
}
.vx-ioc-head h2 small{
  display:block;
  font-size:18px;
  color:#64748b;
  margin-top:8px;
}
.vx-ioc-head p{
  margin-top:14px;
  color:#475569;
}

/* Tabs */
.vx-ioc-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:48px;
  flex-wrap:wrap;
}
.vx-ioc-tabs button{
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(99,102,241,.35);
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:.3s;
}
.vx-ioc-tabs button.active{
  background:#6366f1;
  color:#fff;
  box-shadow:0 10px 30px rgba(99,102,241,.25);
}

/* Grid */
.vx-ioc-grid{
  transition: all .4s cubic-bezier(.4,0,.2,1);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* Card */
.vx-ioc-card{
  position:relative;
  padding:20px;
  border-radius:22px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.88),
      rgba(255,255,255,.6)
    );
  backdrop-filter:blur(20px);
  box-shadow:0 30px 60px rgba(15,23,42,.12);
  overflow:hidden;

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

.vx-ioc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 40px 80px rgba(15,23,42,.18);
}

.vx-ioc-card.is-hidden{
  opacity:0;
  transform:scale(.96);
  pointer-events:none;

  /* 關鍵：保留 grid flow */
  visibility:hidden;
}

.vx-ioc-card.is-focus{
  z-index:25;
  box-shadow:
    0 30px 80px rgba(79,110,247,.35),
    inset 0 0 0 1px rgba(255,255,255,.45);
  transform:translateY(-4px);
}

.vx-tab.is-active {
  background: linear-gradient(135deg,#7c7cff,#5fa8ff);
  color:#fff;
  box-shadow: 0 10px 30px rgba(124,124,255,.35);
}

/* Thumb */
.vx-thumb{position:relative;height:160px;overflow:hidden}
.vx-thumb img{
  width:100%;height:100%;object-fit:cover;
}
.vx-add{
  position:absolute;inset:0;
  display:grid;place-items:center;
  background:rgba(255,255,255,.55);
  opacity:0;transition:.3s;
}
.vx-ioc-card:hover .vx-add{opacity:1}


/* Body */
.vx-card-body{padding:20px}
.vx-icon{font-size:26px;color:#6366f1}
.vx-card-body h3{margin:8px 0}

/* Thumb placeholder */
.vx-ioc-card .thumb{
  height:140px;
  border-radius:14px;
  background:
    linear-gradient(135deg,#e0e7ff,#f0f9ff);
  margin-bottom:16px;
}

/* Text */
.vx-ioc-card h3{
  font-size:18px;
  margin-bottom:8px;
}
.vx-ioc-card p{
  font-size:14px;
  color:#475569;
}

/* Glass FX */
.vx-ioc-glass-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 20%,rgba(99,102,241,.12),transparent 60%);
}

/* Detail */
.vx-card-detail{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 28px;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(22px) saturate(140%);
  border-radius:0 0 22px 22px;
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
  z-index:4;
}
.vx-ioc-card.show-detail .vx-card-detail{
  transform:translateY(0);
}

/* Overlay */
.vx-detail-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter: blur(8px);
  opacity:0;
  pointer-events:none;
  transition:.35s ease;
  z-index:20;
}
.vx-detail-overlay.active{
  opacity:1;
  pointer-events:auto;
}

/* ===============================
   RWD
================================ */
@media (max-width:1024px){
  .vx-ioc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .vx-ioc-grid{grid-template-columns:1fr;}
  .vx-ioc-head h2{font-size:28px;}
}


/* ===============================
   iOS Glass Sheet
================================ */
.vx-ios-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.vx-ios-sheet.active {
  pointer-events: auto;
}

/* 背景遮罩 */
.vx-ios-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.25);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}

.vx-ios-sheet.active .vx-ios-sheet-backdrop {
  opacity: 1;
}

/* Sheet 主體 */
.vx-ios-sheet-panel {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(100%);
  width: min(920px, 100%);
  max-height: 86vh;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.75)
    );
  backdrop-filter: blur(24px);

  border-radius: 28px 28px 0 0;
  box-shadow: 0 -30px 80px rgba(15,23,42,.25);

  transition:
    transform .6s cubic-bezier(.22,1,.36,1);
}

.vx-ios-sheet.active .vx-ios-sheet-panel {
  transform: translateX(-50%) translateY(0);
}
/* 拖曳把手 */
.vx-ios-sheet-handle {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: #cbd5f5;
  margin: 14px auto 10px;
}

/* 內容區 */
.vx-ios-sheet-content {
  padding: 24px 28px 36px;
  overflow-y: auto;
  max-height: calc(86vh - 40px);
}

.vx-ios-sheet-content h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.vx-ios-sheet-content p {
  color: #475569;
  line-height: 1.6;
}

/* 關閉鍵 */
.vx-ios-sheet-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(0,0,0,.05);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
}

/* ======================================================
   iPhone / Mobile RWD Fix – VIDA All Page
   Add this at the END of vida_all.css
====================================================== */

@media (max-width: 768px){

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

  *{
    box-sizing:border-box;
    min-width:0;
  }

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

  h1, h2, h3, h4, p, span, div, li{
    max-width:100%;
  }

  h1, h2, h3, h4{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  p, li, span{
    overflow-wrap:anywhere;
  }

  /* ======================================================
     Shared Section Header
  ====================================================== */

  .case-glass-section,
  .domain-glass-section,
  .ios-ai-vision-section,
  .arch-ecosystem-glass,
  .vida-arch-glass-section,
  .scene-glass-section,
  .vida-defarch,
  .vida-infra-glass-section{
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding-left:18px;
    padding-right:18px;
  }

  .case-title,
  .domain-title,
  .eco-title,
  .ios-ai-title,
  .scene-title,
  .vida-arch-title,
  .vida-defarch__title,
  .vida-infra-title{
    font-size:clamp(30px, 8.6vw, 42px) !important;
    line-height:1.22 !important;
    text-align:center;
    letter-spacing:-.035em;
  }

  .case-eyebrow,
  .domain-eyebrow,
  .eco-eyebrow,
  .ios-ai-eyebrow,
  .scene-eyebrow,
  .vida-arch-eyebrow,
  .vida-defarch__eyebrow{
    display:block;
    text-align:center;
    font-size:11px;
    line-height:1.6;
    letter-spacing:.18em;
  }

  /* ======================================================
     Case Applications
  ====================================================== */

  .case-glass-section{
    padding-top:72px;
    padding-bottom:82px;
  }

  .case-glass-header{
    width:100%;
    max-width:100%;
    padding:0;
    gap:26px;
  }

  .case-title{
    margin:0 auto;
  }

  .case-tabs{
    width:100%;
    max-width:100%;
    display:flex;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:6px;
    border-radius:999px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }

  .case-tabs::-webkit-scrollbar{
    display:none;
  }

  .case-tab{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:10px 18px;
    font-size:14px;
  }

  .case-glass-container{
    width:100%;
    max-width:100%;
    margin-top:42px;
    display:grid;
    grid-template-columns:1fr !important;
    gap:34px;
  }

  .case-panel{
    width:100%;
  }

  .case-panel h3{
    font-size:clamp(24px, 7vw, 32px);
    line-height:1.35;
    margin-bottom:18px;
  }

  .case-panel p{
    font-size:16px;
    line-height:1.85;
  }

  .case-metrics{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    margin:26px 0;
  }

  .metric-card{
    width:100%;
    padding:20px 18px;
    border-radius:20px;
  }

  .metric-card .label{
    font-size:13px;
    line-height:1.5;
  }

  .metric-card strong{
    font-size:clamp(28px, 8vw, 38px);
    line-height:1.25;
  }

  .case-feature{
    width:100%;
    padding:18px 18px;
    border-radius:18px;
    font-size:16px;
    line-height:1.55;
  }

  .case-list{
    grid-template-columns:1fr 1fr;
    gap:14px;
  }

  .case-list li{
    min-height:112px;
    padding:16px 12px;
  }

  .case-list li i{
    padding:14px 12px;
  }

  .case-glass-visual{
    width:100%;
    max-width:100%;
  }

  .case-visual-frame{
    width:100%;
    padding:12px;
    border-radius:28px;
  }

  .case-img{
    width:100%;
    border-radius:20px;
  }

  /* ======================================================
     iOS AI Vision / Outstanding AI Recognition
  ====================================================== */

  .ios-ai-vision-section{
    padding-top:76px;
    padding-bottom:84px;
  }

  .ios-ai-container{
    width:100%;
    max-width:100%;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:34px;
  }

  .ios-ai-content{
    width:100%;
    max-width:100%;
    padding-left:0 !important;
    text-align:center;
  }

  .ios-ai-desc{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    font-size:15.5px;
    line-height:1.8 !important;
  }

  .ios-ai-metrics{
    width:100%;
    display:grid;
    grid-template-columns:1fr !important;
    gap:16px;
    margin-top:28px;
  }

  .ios-ai-metric-card{
    width:100%;
    padding:22px 18px;
    border-radius:22px;
  }

  .ios-ai-metric-card strong{
    font-size:28px;
  }

  .ios-ai-visual{
    width:100%;
    max-width:100%;
  }

  .ios-ai-glass-frame{
    width:100%;
    min-height:auto !important;
    aspect-ratio:16 / 10;
    padding:12px;
    border-radius:26px;
  }

  .ios-ai-video,
  .ios-ai-glass-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:18px;
  }

  .ai-detect-layer,
  .ai-box,
  .ai-links{
    display:none;
  }

  .ios-ai-live-tag{
    left:12px;
    right:12px;
    bottom:10px;
    width:auto;
    max-width:calc(100% - 24px);
    justify-content:center;
    white-space:normal;
    line-height:1.35;
  }

  /* ======================================================
     Domain Defense
  ====================================================== */

  .domain-glass-section{
    padding-top:76px;
    padding-bottom:86px;
  }

  .domain-glass-header{
    width:100%;
    max-width:100%;
  }

  .domain-tabs{
    width:100%;
    max-width:100%;
    display:flex;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    padding:6px;
    border-radius:999px;
    -webkit-overflow-scrolling:touch;
  }

  .domain-tabs::-webkit-scrollbar{
    display:none;
  }

  .domain-tab{
    flex:0 0 auto;
    padding:10px 18px;
    font-size:14px;
    line-height:1.35;
  }

  .domain-glass-container{
    width:100%;
    max-width:100%;
    margin-top:46px;
    grid-template-columns:1fr !important;
    gap:34px;
  }

  .domain-glass-content{
    width:100%;
    padding-left:0 !important;
  }

  .domain-panel h3{
    font-size:clamp(24px, 7vw, 32px);
    line-height:1.35;
  }

  .domain-panel p{
    font-size:16px;
    line-height:1.8;
  }

  .domain-list{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:12px 0;
  }

  .domain-list li{
    width:100%;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    line-height:1.5;
  }

  .domain-alert{
    width:100%;
    padding:18px;
    border-radius:18px;
    font-size:15px;
    line-height:1.55;
  }

  .domain-metrics{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .domain-visual-frame{
    width:100%;
    aspect-ratio:16 / 10;
    padding:12px;
    border-radius:28px;
  }

  .domain-img{
    border-radius:20px;
  }

  /* ======================================================
     Eco Architecture / VIDA.ai card stack
  ====================================================== */

  .arch-ecosystem-glass{
    padding-top:72px;
    padding-bottom:84px;
  }

  .eco-header{
    padding:42px 0 34px;
  }

  .eco-diagram{
    width:100%;
    max-width:100%;
  }

  .eco-vida{
    width:100%;
    max-width:320px;
    margin:0 auto 28px;
  }

  .eco-vida-float img{
    height:62px;
  }

  .eco-core{
    width:100%;
    max-width:100%;
    padding:38px 18px 26px;
    border-radius:28px;
  }

  .eco-core-label{
    left:18px;
    top:-12px;
    font-size:12px;
  }

  .eco-row{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:22px;
  }

  .eco-node,
  .eco-node-wide{
    width:100%;
    padding:24px 18px;
    border-radius:22px;
  }

  .eco-node img{
    height:42px;
  }

  .eco-node p{
    font-size:17px;
    line-height:1.35;
  }

  .eco-node span{
    font-size:13px;
    line-height:1.45;
  }

  .eco-arrows,
  .meta-links,
  .metagraph{
    display:none !important;
  }

  /* ======================================================
     VIDA Architecture Layer Section
  ====================================================== */

  .vida-arch-glass-section{
    padding-top:74px;
    padding-bottom:86px;
  }

  .vida-arch-header{
    margin-bottom:48px;
  }

  .vida-arch-desc{
    font-size:15px;
    line-height:1.75;
  }

  .vida-arch-layer{
    width:100%;
    padding:24px 18px;
    border-radius:26px;
  }

  .vida-arch-layer h3{
    font-size:21px;
    line-height:1.35;
    align-items:flex-start;
  }

  .vida-arch-cards,
  .vida-arch-cards.small{
    grid-template-columns:1fr !important;
    gap:16px;
  }

  .vida-arch-card{
    width:100%;
    min-height:96px;
    padding:22px 18px;
    border-radius:20px;
  }

  .vida-arch-links{
    height:26px;
  }

  .vida-arch-explain{
    left:16px;
    right:16px;
    bottom:18px;
    width:auto;
    max-width:none;
  }

  /* ======================================================
     VIDA DefArch
  ====================================================== */

  .vida-defarch{
    padding-top:82px;
    padding-bottom:92px;
  }

  .vida-defarch__header{
    margin-bottom:48px;
  }

  .vida-defarch__desc{
    font-size:15px;
    line-height:1.75;
  }

  .vida-defarch__cards{
    grid-template-columns:1fr !important;
    gap:28px;
  }

  .vida-defarch__card{
    padding:34px 24px;
    border-radius:24px;
  }

  .vida-defarch__card h3{
    font-size:21px;
    line-height:1.35;
  }

  .vida-defarch__card p{
    font-size:15px;
    line-height:1.7;
  }

  .vida-defarch__meta{
    flex-direction:column;
    gap:10px;
  }

  .vida-defarch__neural{
    display:none;
  }

  /* ======================================================
     Infrastructure
  ====================================================== */

  .vida-infra-glass-section{
    padding-top:82px;
    padding-bottom:92px;
  }

  .vida-infra-container{
    width:100%;
    grid-template-columns:1fr !important;
    gap:38px;
  }

  .vida-infra-grid{
    grid-template-columns:1fr !important;
    gap:20px;
  }

  .vida-infra-card,
  .infra-glass-card{
    width:100%;
    padding:28px 22px;
    border-radius:24px;
  }

  .vida-infra-desc{
    margin-right:0;
    font-size:15px;
    line-height:1.8;
  }

  .vida-infra-list li{
    align-items:flex-start;
    line-height:1.55;
  }

  /* ======================================================
     Scene Cards
  ====================================================== */

  .scene-glass-section{
    padding-top:76px;
    padding-bottom:84px;
  }

  .scene-glass-header{
    margin-bottom:38px;
  }

  .scene-desc{
    font-size:15px;
    line-height:1.75;
  }

  .scene-glass-grid{
    width:100%;
    grid-template-columns:1fr !important;
    gap:24px;
  }

  .scene-glass-card{
    width:100%;
    border-radius:24px;
  }

  .scene-media{
    height:auto;
    aspect-ratio:16 / 9;
    border-radius:20px 20px 0 0;
  }

  .scene-body{
    padding:24px 20px;
  }

  .scene-body h3{
    font-size:21px;
    line-height:1.35;
  }

  /* ======================================================
     NXV / IOC Fusion
  ====================================================== */

  .nxv-section,
  .vx-ioc-fusion-deck{
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding-left:18px;
    padding-right:18px;
  }

  .nxv-container,
  .vx-ioc-fusion-deck{
    width:100%;
    max-width:100%;
  }

  .nxv-layout{
    grid-template-columns:1fr !important;
  }

  .nxv-nav{
    width:100%;
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    gap:10px;
    padding-bottom:12px;
  }

  .nxv-nav-btn{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .nxv-panel{
    width:100%;
    max-width:100% !important;
    grid-template-columns:1fr !important;
    padding:26px 20px;
    border-radius:24px;
  }

  .nxv-content{
    max-width:100%;
  }

  .nxv-content h3{
    font-size:23px;
    line-height:1.35;
  }

  .nxv-cards{
    display:grid;
    grid-template-columns:1fr;
  }

  .nxv-visual{
    justify-self:center;
    padding-right:0;
  }

  .vx-ioc-head h2{
    font-size:clamp(28px, 8vw, 38px);
    line-height:1.25;
  }

  .vx-ioc-tabs{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:10px;
  }

  .vx-ioc-tabs button{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .vx-ioc-grid{
    grid-template-columns:1fr !important;
    gap:22px;
  }
}


/* ======================================================
   iPhone SE / Mini
====================================================== */

@media (max-width:390px){

  .case-glass-section,
  .domain-glass-section,
  .ios-ai-vision-section,
  .arch-ecosystem-glass,
  .vida-arch-glass-section,
  .scene-glass-section,
  .vida-defarch,
  .vida-infra-glass-section{
    padding-left:14px;
    padding-right:14px;
  }

  .case-title,
  .domain-title,
  .eco-title,
  .ios-ai-title,
  .scene-title,
  .vida-arch-title,
  .vida-defarch__title,
  .vida-infra-title{
    font-size:30px !important;
  }

  .case-tab,
  .domain-tab{
    padding:9px 15px;
    font-size:13px;
  }

  .case-panel h3,
  .domain-panel h3{
    font-size:24px;
  }

  .case-panel p,
  .domain-panel p{
    font-size:15px;
  }

  .case-list{
    grid-template-columns:1fr;
  }

  .metric-card strong{
    font-size:30px;
  }

  .eco-core{
    padding-left:14px;
    padding-right:14px;
  }

  .vida-arch-layer,
  .vida-defarch__card,
  .vida-infra-card,
  .infra-glass-card{
    padding-left:18px;
    padding-right:18px;
  }
}