/* ===============================
   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}
/* 新 AI Chips */
.chip.fire{
  color:#fecaca;
  background:rgba(251,113,133,.18);
}
.chip.object{
  color:#fde68a;
  background:rgba(250,204,21,.18);
}

.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;
}

.vida-fly-icon i.fa-fire-flame-curved{
  animation: flamePulse 1.2s infinite;
}

@keyframes flamePulse{
  0%,100%{ transform:scale(1); filter:brightness(1) }
  50%{ transform:scale(1.25); filter:brightness(1.4) }
}

/* ===============================
   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;
  }
}

/* =================
   容器化服務優勢 vglass advantage
==================== */
.vida-market{
  padding:100px 0;
  background:#f8fafc;
}

.vida-market-wrap{
  max-width:1280px;
  margin:auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:48px;
}

/* Header */
.vida-market-header h2{
  font-size:34px;
}
.t-dark{color:#0f172a}
.t-accent{color:#7c83ff}

.vida-market-header p{
  margin-top:10px;
  color:#64748b;
}

/* Cards */
.vida-market-grid{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.vida-market-card{
  background:rgba(255,255,255,.9);
  border-radius:20px;
  padding:26px;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
  transition:.4s;
  position:relative;
  cursor:pointer;
}

.vida-market-card:hover,
.vida-market-card.active{
  transform:translateY(-6px);
  box-shadow:0 30px 70px rgba(99,102,241,.18);
}

.vm-icon{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  margin-bottom:14px;
  position:relative;
}

.vm-icon::after{
  content:"";
  position:absolute;inset:-6px;
  border-radius:50%;
  background:currentColor;
  opacity:.15;
  animation:pulse 2.6s infinite;
}

@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.15}
  50%{transform:scale(1.35);opacity:.35}
}

.face{color:#4f6cff}
.car{color:#8b5cf6}
.fall{color:#ef4444}
.object{color:#22c55e}

.vm-footer{
  margin-top:16px;
  font-size:13px;
  color:#94a3b8;
}

/* CUDA Panel */
.vida-cuda-panel{
  background:rgba(255,255,255,.85);
  border-radius:28px;
  padding:28px;
  box-shadow:0 40px 90px rgba(15,23,42,.15);
  display:flex;
  flex-direction:column;
  gap:22px;
}

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

.live{
  font-size:12px;
  color:#22c55e;
  background:#ecfdf5;
  padding:4px 10px;
  border-radius:999px;
}

/* Bar */
.cuda-bar .bar{
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}
.cuda-bar .bar i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#84cc16,#f59e0b);
  transition:1s;
}

.cuda-credit{
  background:#0f172a;
  color:#fff;
  border-radius:20px;
  padding:22px;
  position:relative;
}

.cuda-credit .tag{
  position:absolute;top:18px;right:18px;
  background:#f59e0b;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
}

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

/* ===============================
   AI 算法 GPU NODE MAP
================================ */
.vida-gpu-map{
  position:relative;
  height:180px;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(99,102,241,.08), transparent 60%),
    linear-gradient(180deg,#f8fafc,#f1f5f9);
  overflow:hidden;
}

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

.gpu-map-legend{
  position:absolute;
  right:10px;
  bottom:8px;
  display:flex;
  gap:8px;
  font-size:11px;
  color:#64748b;
}
.gpu-map-legend span::before{
  content:"";
  display:inline-block;
  width:8px;height:8px;
  border-radius:50%;
  margin-right:4px;
}
.low::before{background:#86efac}
.mid::before{background:#facc15}
.high::before{background:#fb7185}

/* 主 ↔ 備 */
.vida-manager {
  position: relative;
  transition: all .6s ease;
}

.vida-manager.active::after {
  content:'';
  position:absolute;
  inset:-10px;
  border-radius:14px;
  background:
    radial-gradient(circle at center,
      rgba(96,165,250,.45),
      rgba(96,165,250,0) 70%);
  animation: mgrPulse 2.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes mgrPulse {
  0%   { opacity:.4; transform:scale(.95); }
  50%  { opacity:.9; transform:scale(1.05); }
  100% { opacity:.4; transform:scale(.95); }
}



/* ===============================
   CUDA ACTION BUTTON
================================ */
.cuda-action{
  position:relative;
  width:100%;
  border:0;
  border-radius:18px;
  padding:16px 20px;
  cursor:pointer;

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

  background:
    linear-gradient(135deg,#f59e0b,#fbbf24);
  color:#111827;

  font-size:15px;
  font-weight:600;

  box-shadow:
    0 12px 30px rgba(245,158,11,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);

  overflow:hidden;
  transition:.35s cubic-bezier(.22,.61,.36,1);
}

/* 能量流動背景 */
.cuda-action::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,.45),
      transparent 70%
    );
  transform:translateX(-100%);
  animation:cudaFlow 4.2s linear infinite;
}

@keyframes cudaFlow{
  to{ transform:translateX(100%); }
}

/* Hover */
.cuda-action:hover{
  transform:translateY(-2px);
  box-shadow:
    0 18px 40px rgba(245,158,11,.45),
    inset 0 0 0 1px rgba(255,255,255,.45);
}

/* Active */
.cuda-action:active{
  transform:translateY(0) scale(.98);
}

/* Icon */
.cuda-btn-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.45);
  position:relative;
}

/* Icon 心跳 */
.cuda-btn-icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:rgba(255,255,255,.6);
  animation:btnPulse 2.6s ease-in-out infinite;
}

@keyframes btnPulse{
  0%,100%{ transform:scale(1); opacity:.35 }
  50%{ transform:scale(1.35); opacity:.65 }
}

/* Text */
.cuda-btn-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.cuda-btn-text small{
  font-size:12px;
  font-weight:500;
  opacity:.75;
}

/* Loading state */
.cuda-action.loading{
  pointer-events:none;
  filter:saturate(.7);
}
.cuda-action.loading::before{
  animation-duration:1.2s;
}

.vida-compute-market{
  background:radial-gradient(120% 80% at 30% 0%,#1e293b,#020617);
  color:#e5e7eb;
  padding:96px 0;
}

.vcm-wrap{
  max-width:1400px;
  margin:auto;
  padding:0 32px;
}

.vcm-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
}

.vcm-nodes{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
  );
  backdrop-filter: blur(14px);
}

.vcm-node::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent,rgba(96,165,250,.35),transparent);
  opacity:.25;
}

.vcm-node{
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:20px;
  border:1px solid rgba(148,163,184,.25);
}

.vcm-node .bar{
  height:6px;
  background:#020617;
  border-radius:999px;
  overflow:hidden;
}
.vcm-node .bar i{
  display:block;
  height:100%;
  width:45%;
  background:#60a5fa;
}

/* Marketplace */
.vcm-market{
  margin-top:72px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
}

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


/* ==============================
   核心機制解析VIDA CORE MECHANISM (ISOLATED)
============================== */
.vida-core-mechanism{
  position:relative;
  padding:120px 6vw;
  background:
    radial-gradient(1200px 500px at 50% -10%, #1e293b 0%, transparent 60%),
    linear-gradient(180deg,#020617,#020617);
  color:#e5e7eb;
}

.vida-core-wrap{
  max-width:1400px;
  margin:auto;
}

.vida-core-header{
  text-align:center;
  margin-bottom:60px;
}

.vida-core-header h2{
  font-size:36px;
  letter-spacing:.08em;
}

.vida-core-header p{
  margin-top:12px;
  color:#94a3b8;
}

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

.vida-core-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  transform:translateY(20px);
  opacity:.55;
  transition: 
    transform .6s ease,
    opacity .6s ease,
    filter .6s ease,
    box-shadow .6s ease;
}

.vida-core-card.active{
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: none;
  box-shadow:
    0 40px 120px rgba(56,189,248,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

.vida-core-card:not(.active){
  transform: scale(.92) translateY(24px);
  opacity: .35;
  filter: blur(1.5px) saturate(.7);
  box-shadow: none;
}

.vida-core-media{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  height:220px;
}

.vida-core-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.vida-core-media::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.08) 2px,
      transparent 6px
    );
  opacity:.25;
  animation:vida-core-scan 8s linear infinite;
  pointer-events:none;
}

@keyframes vida-core-scan{
  from{transform:translateX(-30%)}
  to{transform:translateX(30%)}
}

.vida-core-overlay{
  position:absolute;
  inset:0;
  /* background:
    radial-gradient(circle at 50% 0%, rgba(56,189,248,.35), transparent 60%),
    linear-gradient(180deg,transparent,rgba(2,6,23,.85)); */
}

/* energy flow */
.vida-core-flow{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.75;
}

.vida-core-flow::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.25) 2px,
      transparent 6px
    );
  animation:vida-core-flow 6s linear infinite;
}

.vida-core-flow.fail::before{
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      rgba(239,68,68,.5) 2px,
      transparent 6px
    );
}

@keyframes vida-core-flow{
  from{transform:translateX(-20%)}
  to{transform:translateX(20%)}
}

.vida-core-card h3{
  margin:22px 22px 8px;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:10px;
}

.vida-core-card h3.scale{color:#38bdf8}
.vida-core-card h3.fail{color:#fb7185}
.vida-core-card h3.balance{color:#34d399}

.vida-core-card p{
  margin:0 22px 28px;
  font-size:14px;
  color:#cbd5f5;
  line-height:1.6;
}

.vida-core-card[data-mode="failover"].active .vida-core-overlay{
  background:
    radial-gradient(circle at 50% 40%, rgba(239,68,68,.45), transparent 60%),
    linear-gradient(180deg,transparent,rgba(2,6,23,.9));
}

.vida-core-card[data-mode="failover"].active{
  box-shadow:
    0 40px 120px rgba(239,68,68,.45);
}

/* progress bar */
.vida-core-progress{
  margin:48px auto 0;
  width:320px;
  height:5px;
  background:rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}

.vida-core-progress span{
  display:block;
  height:100%;
  width:0%;
  background:
    linear-gradient(
      90deg,
      #38bdf8,
      #a78bfa,
      #34d399
    );
  box-shadow:0 0 20px rgba(56,189,248,.6);
  transition:width .6s;
}

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


/* 第二、三張卡：完全關閉特效 */
.vida-core-card[data-mode="failover"] .vida-core-media::after,
.vida-core-card[ddata-mode="balance"] .vida-core-media::after{
  display:none;
}

.vida-core-card[data-mode="failover"],
.vida-core-card[data-mode="balance"]{
  filter:none !important;
  opacity:1 !important;
}

/* 避免殘留模糊 */
.vida-core-card[data-mode="failover"] img,
.vida-core-card[data-mode="balance"] img{
  filter:none !important;
  opacity:1 !important;
}

/* Hover 浮出 */
.vida-core-hover{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.65);
  backdrop-filter: blur(8px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:24px;
  opacity:0;
  transform:scale(1.05);
  transition:.35s ease;
  /* pointer-events:none; */
}

.vida-core-card:hover 
.vida-core-hover{
  opacity:1;
  transform:translateY(1);
}

.vida-core-hover i{
  font-size:34px;
  color:#7dd3fc;
  text-shadow:0 0 20px rgba(56,189,248,.8);
}

.vida-core-hover span{
  font-size:15px;
  font-weight:600;
  color:#e5e7eb;
  letter-spacing:.08em;
}

.vida-core-card:hover h3{
  color:#7dd3fc;
}

/* variant colors */
.vida-core-hover.danger i{
  color:#fb7185;
  text-shadow:0 0 20px rgba(251,113,133,.8);
}

.vida-core-hover.balance i{
  color:#86efac;
  text-shadow:0 0 20px rgba(134,239,172,.8);
}

.ai-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  color:#e5e7eb;
}

.ai-item i{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(56,189,248,.15);
  color:#7dd3fc;
  box-shadow:0 0 12px rgba(56,189,248,.4);
}

@media (max-width: 768px){
  .vida-core-hover{
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
}

/* 能量律動線 */
.vida-energy-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.vida-energy-lines::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      transparent 1px,
      transparent 6px
    );
  animation: energyMove 6s linear infinite;
  mix-blend-mode:overlay;
}

@keyframes energyMove{
  from{ transform:translateX(0) }
  to{ transform:translateX(120px) }
}
/* 雙色 + 高階感 */
.vida-core-title{
  text-align:center;
  font-size:34px;
  font-weight:700;
  letter-spacing:.12em;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:12px;
}

.vida-core-title i{
  color:#7dd3fc;
  font-size:28px;
  text-shadow:0 0 16px rgba(56,189,248,.7);
}

.vida-core-title span{
  color:#e5e7eb;
}

.vida-core-title em{
  font-style:normal;
  background:linear-gradient(90deg,#7dd3fc,#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* ===============================
   VX Advantage – iOS Glass White
================================ */

.vx-advantage-section{
  padding:96px 24px;
  background:
    radial-gradient(1200px 500px at 50% 0%, #f6f9ff, #ffffff);
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

.vx-advantage-head{
  text-align:center;
  margin-bottom:64px;
}

.vx-advantage-head h2{
  font-size:34px;
  font-weight:700;
  letter-spacing:.06em;
  color:#0f172a;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.vx-advantage-head h2 span{
  background:linear-gradient(90deg,#2563eb,#22c55e);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.vx-advantage-head p{
  margin-top:14px;
  font-size:15px;
  color:#475569;
}

.vx-advantage-divider{
  width:88px;
  height:4px;
  border-radius:999px;
  margin:26px auto 0;
  background:linear-gradient(90deg,#84cc16,#f59e0b);
}

/* GRID */
.vx-advantage-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;
}

/* CARD */
.vx-advantage-card{
  position:relative;
  padding:36px 28px;
  border-radius:22px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px);
  box-shadow:
    0 24px 60px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(148,163,184,.18);
  transition:.45s cubic-bezier(.4,.2,.2,1);
}

.vx-advantage-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 40px 80px rgba(15,23,42,.16),
    inset 0 0 0 1px rgba(99,102,241,.35);
}

/* ICON */
.vx-advantage-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  font-size:22px;
  color:#fff;
}

.vx-advantage-icon.cpu{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}
.vx-advantage-icon.cube{
  background:linear-gradient(135deg,#38bdf8,#2563eb);
}
.vx-advantage-icon.gauge{
  background:linear-gradient(135deg,#facc15,#f59e0b);
}
.vx-advantage-icon.balance{
  background:linear-gradient(135deg,#a78bfa,#6366f1);
}

.vx-advantage-card h3{
  font-size:18px;
  font-weight:650;
  color:#0f172a;
  margin-bottom:12px;
}

.vx-advantage-card p{
  font-size:14px;
  line-height:1.7;
  color:#475569;
}

/* RWD */
@media (max-width:768px){
  .vx-advantage-head h2{font-size:26px}
  .vx-advantage-card{padding:28px 22px}
}

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

.arch-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  color:linear-gradient(90deg,#7dd3fc,#a78bfa);
  }

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

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

.info-panel{
  margin-top:10px;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(90,124,255,.28),rgba(8,15,48,.96));
  border:1px solid rgba(158,188,255,.85);
  color:#e3e7ff;
  font-size:13px;
  box-shadow:0 18px 40px rgba(0,0,0,.7);
}
/* ======================================================
   iPhone / Mobile RWD Fix – Vi Container Page
   Add this at the END of vi_container.css
====================================================== */

@media (max-width: 768px){

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

  *{
    min-width: 0;
    box-sizing: border-box;
  }

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

  h1, h2, h3, h4, p, li, span, div{
    max-width: 100%;
  }

  h1, h2, h3, h4{
    overflow-wrap: anywhere;
    word-break: normal;
  }

  p, li, span{
    overflow-wrap: anywhere;
  }

  /* ===============================
     MVSS / Solution Overview
  ================================ */

  .mvss-sol{
    padding: 64px 0 76px;
    overflow: hidden;
  }

  .mvss-sol-wrap{
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
    grid-template-columns: 1fr;
    gap: 36px;
    overflow: hidden;
  }

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

  .mvss-sol-eyebrow{
    font-size: 13px;
    line-height: 1.65;
    letter-spacing: .18em;
    overflow-wrap: anywhere;
  }

  .mvss-sol-title{
    font-size: clamp(38px, 10vw, 48px);
    line-height: 1.18;
    letter-spacing: -.035em;
    margin: 16px 0 18px;
  }

  .mvss-sol-title span{
    display: inline;
  }

  .mvss-sol-desc{
    max-width: 100%;
    margin-inline: auto;
    font-size: 16px;
    line-height: 1.8;
  }

  .mvss-sol-tabs{
    justify-content: center;
    gap: 10px;
  }

  .mvss-sol-tab{
    max-width: 100%;
    white-space: normal;
    font-size: 13px;
    line-height: 1.35;
    padding: 8px 14px;
  }

  .mvss-sol-visual{
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
    overflow: hidden;
  }

  .mvss-sol-glass{
    width: 100%;
    height: 320px;
    min-height: 320px;
    border-radius: 24px;
  }

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

  .mvss-sol-badge{
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 11px 14px;
  }

  /* ===============================
     Containerized Service Advantages
     vglass / vx advantage
  ================================ */

  .vglass-advantage{
    padding: 76px 0;
    overflow: hidden;
  }

  .vglass-wrap{
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
  }

  .vglass-header{
    margin-bottom: 46px;
  }

  .vglass-title,
  .vglass-header h2{
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.25;
    text-align: center;
    letter-spacing: .04em;
  }

  .vglass-title .t-dark,
  .vglass-title .t-accent,
  .vglass-title .t-soft{
    display: inline;
  }

  .vglass-header p{
    font-size: 15px;
    line-height: 1.75;
    padding: 0 4px;
  }

  .vglass-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vglass-card{
    width: 100%;
    padding: 30px 26px;
    border-radius: 24px;
  }

  .vglass-card h3{
    font-size: 21px;
    line-height: 1.35;
  }

  .vglass-card p{
    font-size: 15px;
    line-height: 1.75;
  }

  .vx-advantage-section{
    padding: 76px 22px;
    overflow: hidden;
  }

  .vx-advantage-head{
    margin-bottom: 44px;
  }

  .vx-advantage-head h2{
    display: block;
    font-size: clamp(30px, 8.5vw, 42px);
    line-height: 1.25;
    text-align: center;
  }

  .vx-advantage-head p{
    font-size: 15px;
    line-height: 1.75;
  }

  .vx-advantage-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vx-advantage-card{
    padding: 30px 24px;
    border-radius: 24px;
  }

  .vx-advantage-card h3{
    font-size: 20px;
    line-height: 1.35;
  }

  .vx-advantage-card p{
    font-size: 15px;
    line-height: 1.75;
  }

  /* ===============================
     AI Algorithm Module Marketplace
  ================================ */

  .vida-market{
    padding: 78px 0;
    overflow: hidden;
  }

  .vida-market-wrap{
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .vida-market-header h2{
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.2;
    letter-spacing: -.035em;
  }

  .vida-market-header p{
    font-size: 16px;
    line-height: 1.75;
  }

  .vida-market-grid{
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 32px;
  }

  .vida-market-card{
    width: 100%;
    padding: 30px 28px;
    border-radius: 24px;
  }

  .vida-market-card h3{
    font-size: 22px;
    line-height: 1.35;
  }

  .vida-market-card p{
    font-size: 16px;
    line-height: 1.7;
  }

  .vm-footer{
    font-size: 14px;
    line-height: 1.5;
  }

  /* CUDA panel */
  .vida-cuda-panel{
    width: 100%;
    padding: 28px 22px;
    border-radius: 28px;
    gap: 24px;
  }

  .cuda-head{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .cuda-head h3{
    font-size: 22px;
    line-height: 1.35;
  }

  .live{
    width: fit-content;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
  }

  .vida-gpu-map{
    height: 190px;
    border-radius: 20px;
  }

  .gpu-map-legend{
    right: 12px;
    bottom: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .cuda-bar{
    font-size: 16px;
    line-height: 1.5;
  }

  .cuda-credit{
    padding: 24px 18px;
    border-radius: 22px;
    font-size: 18px;
    line-height: 1.45;
    text-align: center;
  }

  .cuda-credit .tag{
    position: static;
    display: inline-flex;
    margin-left: 8px;
    vertical-align: middle;
  }

  .cuda-action{
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 18px 20px;
    border-radius: 22px;
    text-align: left;
  }

  .cuda-btn-text{
    font-size: 18px;
    line-height: 1.15;
  }

  .cuda-btn-text small{
    font-size: 13px;
    margin-top: 4px;
  }

  /* ===============================
     Failover / High Availability
  ================================ */

  .vida-failover,
  .vida-failover-img{
    padding: 82px 0;
    overflow: hidden;
  }

  .vida-fail-wrap,
  .vfi-wrap{
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .vida-fail-title,
  .vfi-title{
    font-size: clamp(34px, 9vw, 46px);
    line-height: 1.2;
  }

  .vida-fail-desc,
  .vfi-desc{
    max-width: 100%;
    font-size: 15px;
    line-height: 1.75;
  }

  .vida-fail-points,
  .vfi-features{
    gap: 22px;
  }

  .vida-fail-point,
  .vfi-feature{
    gap: 14px;
  }

  .vida-fail-point span,
  .vfi-feature span{
    font-size: 14px;
    line-height: 1.65;
  }

  .vida-fail-glass{
    width: 100%;
    height: 340px;
    border-radius: 24px;
  }

  .vida-status{
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .node{
    white-space: nowrap;
    font-size: 11px;
  }

  .vfi-glass{
    padding: 12px;
    border-radius: 24px;
  }

  /* ===============================
     AI Scheduler / Cluster Sim
  ================================ */

  .vida-ai-scheduler{
    padding: 76px 22px;
    overflow: hidden;
  }

  .vida-ai-header{
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .vida-ai-header h2{
    display: block;
    text-align: center;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.25;
  }

  .vida-ai-actions{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vida-ai-btn{
    width: 100%;
    min-height: 44px;
  }

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

  .vida-ai-manager{
    text-align: center;
  }

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

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

  .vida-ai-node{
    padding: 20px;
    border-radius: 20px;
  }

  .vida-ai-summary{
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
  }

  /* ===============================
     Compute Market / Node Cards
  ================================ */

  .vida-compute-market{
    padding: 78px 0;
    overflow: hidden;
  }

  .vcm-wrap{
    width: 100%;
    max-width: 100%;
    padding: 0 22px;
  }

  .vcm-header{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }

  .vcm-header h2{
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.25;
  }

  .vcm-nodes{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vcm-market{
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 48px;
  }

  /* ===============================
     Core Mechanism Dark Section
  ================================ */

  .vida-core-mechanism{
    padding: 82px 22px;
    overflow: hidden;
  }

  .vida-core-header{
    margin-bottom: 44px;
  }

  .vida-core-title,
  .vida-core-header h2{
    display: block;
    text-align: center;
    font-size: clamp(32px, 10vw, 46px);
    line-height: 1.25;
    letter-spacing: .14em;
  }

  .vida-core-title i{
    display: block;
    margin: 0 auto 14px;
    font-size: 28px;
  }

  .vida-core-title span,
  .vida-core-title em{
    display: inline;
  }

  .vida-core-header p{
    font-size: 15px;
    line-height: 1.75;
  }

  .vida-core-cards{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .vida-core-card,
  .vida-core-card:not(.active),
  .vida-core-card.active{
    width: 100%;
    transform: none;
    opacity: 1;
    filter: none;
    border-radius: 24px;
  }

  .vida-core-media{
    height: 260px;
    border-radius: 22px;
  }

  .vida-core-hover{
    position: absolute;
    opacity: 1;
    transform: none;
    padding: 26px;
    justify-content: flex-end;
    background:
      linear-gradient(180deg, rgba(2,6,23,.15), rgba(2,6,23,.9));
  }

  .vida-core-hover i{
    font-size: 34px;
  }

  .vida-core-hover span{
    font-size: 17px;
    line-height: 1.35;
  }

  .vida-core-card h3{
    margin: 22px 22px 10px;
    font-size: 22px;
    line-height: 1.35;
  }

  .vida-core-card p{
    margin: 0 22px 28px;
    font-size: 15px;
    line-height: 1.7;
  }

  .vida-core-progress{
    width: 100%;
    max-width: 320px;
  }
}


/* ======================================================
   iPhone SE / Mini
====================================================== */
@media (max-width: 390px){

  .mvss-sol-wrap,
  .vglass-wrap,
  .vida-market-wrap,
  .vida-fail-wrap,
  .vfi-wrap,
  .vcm-wrap{
    padding-left: 16px;
    padding-right: 16px;
  }

  .mvss-sol-title{
    font-size: 36px;
  }

  .vglass-title,
  .vglass-header h2,
  .vx-advantage-head h2{
    font-size: 28px;
  }

  .vida-market-header h2{
    font-size: 34px;
  }

  .vida-market-card{
    padding: 28px 24px;
  }

  .vida-cuda-panel{
    padding: 24px 18px;
  }

  .cuda-credit{
    font-size: 16px;
  }

  .cuda-action{
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  .vida-core-media{
    height: 240px;
  }

  .vida-core-title,
  .vida-core-header h2{
    font-size: 32px;
  }

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