/***************************************************
 * ViDA.ai 
 ***************************************************/
.vida-pro {
  padding: 80px 0;
  background:
    linear-gradient(180deg, #e9ecff 0%, #dce2ff 40%, #cbd6ff 100%),
    repeating-linear-gradient(
      0deg,
      rgba(150,170,220,0.18) 0px,
      rgba(150,170,220,0.18) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(150,170,220,0.18) 0px,
      rgba(150,170,220,0.18) 1px,
      transparent 1px,
      transparent 40px
    );
  position: relative;
}

.vida-title{
  text-align:center;
  font-size:40px;
  font-weight:800;
  color:#1a2550;
  margin-bottom:8px;
  text-shadow:0 4px 14px rgba(80,110,200,.35);
}
.vida-sub{
  text-align:center;
  font-size:16px;
  color:#5162a8;
  margin-bottom:40px;
}

/* 外框容器 */
.vida-pro-wrapper{
  position: relative;
  background:
    linear-gradient(rgba(160,180,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,180,255,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  overflow: hidden;  
  max-width:1450px;
  margin:0 auto;
  display:flex;
  gap:40px;
  padding:0 30px;
}

/* 電路閃爍節點 */
.circuit-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #9db4ff, #627dff);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(120,150,255,.8);
  animation: nodeBlink 2.2s infinite ease-in-out;
  opacity: .85;
}

@keyframes nodeBlink {
  0% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.4); opacity: .4; }
  100% { transform: scale(1); opacity: .9; }
}

/* 自動生成 18 個電路節點 */
.vida-pro-wrapper::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(140,165,255,.35) 1px, transparent 1px),
    radial-gradient(circle, rgba(140,165,255,.3) 1px, transparent 1px);
  background-size: 180px 160px;
  background-position: 20px 30px;
  opacity:.55;
}

/* =============================
   左側分類欄
============================= */
.vida-pro-left{
  width:240px;
  height: 80px;
  display:flex;
  flex-direction:column;
  gap:16px;
  position:sticky;
  top:260px;
  height:max-content;
}

.vida-cat{
  padding:25px 40px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:800;
  color:#1d2757;
  background:rgba(255,255,255,0.25);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 6px 18px rgba(60,80,160,.16),
    inset 0 1px 2px rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(80,100,160,.18);
  backdrop-filter:blur(14px);
  cursor:pointer;
  transition:.25s ease;
  position:relative;
  overflow:hidden;
}

/* ICON 基本 */
.vida-cat i{
  font-size:18px;
  color:#547aff;
  filter:drop-shadow(0 0 6px rgba(90,130,255,0.6));
}

/* 滑過效果 */
.vida-cat:hover{
  transform:translateX(6px);
  background:rgba(255,255,255,0.38);
  box-shadow:
    0 12px 28px rgba(40,60,140,.22),
    0 0 20px rgba(110,150,255,.35);
}

/* 點擊高亮 */
.vida-cat.active{
  background:rgba(255,255,255,0.55);
  border-color:#8ba4ff;
  box-shadow:
    0 0 0 2px #7e96ff inset,
    0 8px 26px rgba(70,100,200,.22),
    0 4px 40px rgba(140,160,255,.3);
  color:#071540;
}

.vida-cat.active i{
  color:#325dff;
  transform:scale(1.15);
}

/* =============================
   右側表格
============================= */
.vida-pro-table{
  flex:1;
  min-width:750px;
}

.vida-pro-table .row{
  display:grid;
  grid-template-columns: 190px repeat(4, minmax(0, 1fr));
  align-items:stretch;
  padding:14px 22px;
  column-gap:24px;
  margin-bottom:10px;
  border-radius:18px;
  position:relative;
  overflow:hidden;

  background:rgba(255,255,255,0.24);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:0 8px 22px rgba(40,60,120,.08);

  transition:
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease,
    opacity .28s ease;
}

/* 列內文字 */
.vida-pro-table .row > div{
  font-size:14px;
  line-height:1.7;
  color:#1e2750;
}
.vida-pro-table .row > .left{
  font-weight:600;
  color:#202c60;
  display:flex;
  align-items:center;
  gap:8px;
}
.vida-pro-table .row > .left i{
  color:#637dff;
}

/* 高亮狀態 */
.vida-pro-table .row.active{
  background:
    radial-gradient(circle at 0% 0%, rgba(160,190,255,.50), rgba(255,255,255,.96) 55%);
  box-shadow:
    0 14px 36px rgba(60,90,180,.32),
    0 0 0 1px rgba(132,160,255,.9);
  transform:translateY(-2px);
}

/* 掃光條 */
.vida-pro-table .row::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    115deg,
    rgba(120,160,255,.18),
    rgba(255,255,255,0) 45%,
    rgba(140,190,255,.24) 70%,
    rgba(255,255,255,0)
  );
  opacity:0;
  transform:translateX(-35%);
  pointer-events:none;
  transition:opacity .4s ease, transform .6s ease;
}
.vida-pro-table .row.active::before{
  opacity:1;
  transform:translateX(18%);
}

/* 表格頭 */
.table-head{
  display:grid;
  grid-template-columns:180px 1fr 1fr 1fr 1fr;
  padding:16px 20px;
  background:rgba(255,255,255,0.45);
  border-radius:14px;
  margin-bottom:14px;
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.5);
  color:#1a2a55;
  font-weight:700;
  box-shadow:
    0 6px 16px rgba(60,80,160,.18),
    inset 0 1px 2px rgba(255,255,255,.5);
}

.table-head i{
  color:#506fff;
  margin-right:6px;
  text-shadow:0 0 6px rgba(120,150,255,.6);
}

/* 資料列 */
.table-body .row{
  display:grid;
  grid-template-columns:180px 1fr 1fr 1fr 1fr;
  padding:20px 20px;
  margin-bottom:14px;
  background:rgba(255,255,255,0.28);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.45);
  backdrop-filter:blur(12px);
  transition:.3s ease;
  box-shadow:
    0 8px 20px rgba(40,60,140,.10),
    inset 0 1px 2px rgba(255,255,255,.45);
}

/* ============================
   資料流背景（每列 row 流動）
============================ */
.row {
  position: relative;
  overflow: hidden;
}

.row::after {
  content:"";
  position:absolute;
  left:-20%;
  top:50%;
  transform:translateY(-50%);
  width:50%;
  height:5px;
  background:linear-gradient(90deg, #6d8bff 0%, #a8bbff00 100%);
  border-radius:10px;
  filter:blur(3px);
  opacity:.55;
  animation: dataFlow 2.2s linear infinite;
}

@keyframes dataFlow {
  0% { left:-20%; }
  100% { left:120%; }
}


/* 左側欄位文字 */
.row .left{
  font-weight:700;
  color:#243361;
  display:flex;
  align-items:center;
  gap:8px;
}
.row .left i{
  color:#557aff;
  filter:drop-shadow(0 0 6px rgba(90,130,255,.7));
}

/* row hover */
.table-body .row:hover{
  background:rgba(255,255,255,0.45);
  box-shadow:
    0 12px 30px rgba(40,60,140,.22),
    0 0 24px rgba(120,150,255,.38);
  transform:translateY(-4px);
}

/* 點選高亮列 */
.row.highlight{
  background:rgba(255,255,255,0.65);
  border-color:#7e94ff;
  box-shadow:
    0 0 0 2px #86a0ff inset,
    0 14px 34px rgba(60,80,160,.20),
    0 0 26px rgba(140,160,255,.40);
}

/* 內容字體 */
.table-body .row div{
  font-size:14px;
  color:#2c3a66;
  line-height:1.7;
}



/* 光束掃描層 */
.row::after{
  content:"";
  position:absolute;
  left:-40%;
  top:0;
  width:40%;
  height:100%;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(180,200,255,0.45) 50%,
    rgba(255,255,255,0) 100%
  );
  z-index:1;
  opacity:0.25;
  animation:beam-scan 3.8s linear infinite;
  pointer-events:none;
}

@keyframes beam-scan{
  0%{ left:-40%; }
  100%{ left:120%; }
}

/* 高亮列外框藍光 */
.row.highlight{
  position:relative;
  border-color:#7e94ff;
  box-shadow:
    0 0 0 2px #8aa4ff inset,
    0 0 24px rgba(80,120,255,.45),
    0 10px 26px rgba(60,80,150,.25);
}

/* 左側 → 右側連線光條 */
.row.highlight::before{
  content:"";
  position:absolute;
  left:-160px; /* 左欄寬度 + gutter */
  top:50%;
  width:160px;
  height:4px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,
    rgba(110,140,255,0) 0%,
    rgba(110,140,255,0.9) 45%,
    rgba(110,140,255,0) 100%
  );
  box-shadow:0 0 12px rgba(100,140,255,.8);
  border-radius:99px;
  animation:link-glow 2.2s ease-in-out infinite;
}

@keyframes link-glow{
  0%{ opacity:0.4; }
  50%{ opacity:1; }
  100%{ opacity:0.4; }
}

/* 應用場景 icon 列表容器 */
.scene-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.scene-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  color:#27356a;
}

.scene-item i{
  font-size:15px;
  color:#4f6dff;
  filter:drop-shadow(0 0 6px rgba(80,130,255,.45));
  animation:iconPulse 2.8s ease-in-out infinite;
}

@keyframes iconPulse{
  0%{ transform:scale(1); opacity:0.9; }
  50%{ transform:scale(1.25); opacity:1; }
  100%{ transform:scale(1); opacity:0.9; }
}

.link-beam{
  position:absolute;
  height:4px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(110,150,255,.05), rgba(110,150,255,.9), rgba(210,230,255,0));
  box-shadow:
    0 0 14px rgba(120,170,255,.8),
    0 0 32px rgba(120,170,255,.6);
  opacity:0;
  pointer-events:none;
  transition:
    top .30s ease,
    left .30s ease,
    width .30s ease,
    opacity .30s ease;
  z-index:3;
}

/* =============================
   RWD
============================= */
@media(max-width:1100px){
  .vida-pro-wrapper{
    flex-direction:column;
  }
  .vida-pro-left{
    width:100%;
    flex-wrap:wrap;
    flex-direction:row;
    position:relative;
    top:0;
  }
  .vida-pro-left .vida-cat{
    flex:1 1 calc(50% - 10px);
  }
  .table-head, .table-body .row{
    grid-template-columns:140px 1fr 1fr;
  }
  .table-head div:nth-child(4),
  .table-head div:nth-child(5),
  .row div:nth-child(4),
  .row div:nth-child(5){
    display:none;
  }
}

@media(max-width:700px){
  .table-head, .table-body .row{
    grid-template-columns:1fr 1fr;
  }
  .table-head div:nth-child(3),
  .row div:nth-child(3){
    display:none;
  }
}

/* ======================================================
   iPhone / Mobile RWD Fix – ViDA.ai Technology Overview
   Add this at the END of vida.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, li, span, div{
    max-width:100%;
  }

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

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

  /* ===============================
     Main section
  =============================== */

  .vida-pro{
    width:100%;
    max-width:100%;
    padding:72px 0 86px;
    overflow:hidden;
  }

  .vida-title{
    font-size:clamp(34px, 10vw, 48px);
    line-height:1.22;
    padding:0 20px;
    margin-bottom:16px;
    letter-spacing:-0.035em;
  }

  .vida-sub{
    font-size:16px;
    line-height:1.7;
    padding:0 22px;
    margin-bottom:34px;
  }

  .vida-pro-wrapper{
    width:100%;
    max-width:100%;
    display:block;
    padding:0 18px;
    overflow:visible;
  }

  .vida-pro-wrapper::before{
    background-size:120px 120px;
    opacity:.42;
  }

  /* ===============================
     Top category cards
  =============================== */

  .vida-pro-left{
    width:100%;
    height:auto;
    position:relative;
    top:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin:0 0 34px;
  }

  .vida-pro-left .vida-cat,
  .vida-cat{
    width:100%;
    min-height:128px;
    padding:18px 14px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:10px;
    font-size:16px;
    line-height:1.35;
    white-space:normal;
    overflow:visible;
  }

  .vida-cat i{
    font-size:22px;
    margin:0;
  }

  .vida-cat:hover{
    transform:translateY(-3px);
  }

  .vida-cat.active{
    box-shadow:
      0 0 0 2px #7e96ff inset,
      0 12px 30px rgba(70,100,200,.24),
      0 4px 40px rgba(140,160,255,.34);
  }

  /* ===============================
     Mobile table turns into cards
  =============================== */

  .vida-pro-table{
    width:100%;
    min-width:0 !important;
    overflow:visible;
  }

  .table-head{
    display:none !important;
  }

  .table-body{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:100%;
  }

  .table-body .row,
  .vida-pro-table .row{
    width:100%;
    display:grid;
    grid-template-columns:1fr !important;
    gap:12px;
    padding:24px 22px;
    margin-bottom:0;
    border-radius:22px;
    overflow:hidden;
    background:
      linear-gradient(135deg, rgba(255,255,255,.58), rgba(230,236,255,.82));
    box-shadow:
      0 16px 36px rgba(60,80,160,.16),
      inset 0 1px 2px rgba(255,255,255,.75);
  }

  .table-body .row div,
  .vida-pro-table .row > div{
    display:block !important;
    width:100%;
    font-size:15px;
    line-height:1.75;
    color:#26325f;
  }

  .table-body .row > .left,
  .vida-pro-table .row > .left{
    display:flex !important;
    align-items:center;
    gap:10px;
    font-size:17px;
    font-weight:800;
    color:#1d2757;
    padding-bottom:12px;
    margin-bottom:4px;
    border-bottom:1px solid rgba(120,145,255,.22);
  }

  .table-body .row > .left i,
  .vida-pro-table .row > .left i{
    font-size:20px;
    flex-shrink:0;
  }

  /* Add mobile field labels */
  .table-body .row > div:nth-child(2)::before{
    content:"Core Technologies";
  }

  .table-body .row > div:nth-child(3)::before{
    content:"System Architecture";
  }

  .table-body .row > div:nth-child(4)::before{
    content:"Functional Description";
  }

  .table-body .row > div:nth-child(5)::before{
    content:"Application Scenarios";
  }

  .table-body .row > div:nth-child(n+2)::before{
    display:block;
    margin-bottom:6px;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#6178ff;
    font-weight:800;
  }

  .scene-list{
    gap:8px;
  }

  .scene-item{
    font-size:15px;
    line-height:1.55;
    align-items:flex-start;
  }

  .scene-item i{
    margin-top:4px;
    flex-shrink:0;
  }

  /* Remove desktop beam overflow */
  .row.highlight::before,
  .link-beam{
    display:none !important;
  }

  .row::after,
  .vida-pro-table .row::after{
    width:70%;
    opacity:.18;
  }

  .circuit-node{
    transform:scale(.72);
  }
}


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

  .vida-pro{
    padding-top:64px;
  }

  .vida-title{
    font-size:34px;
  }

  .vida-sub{
    font-size:15px;
  }

  .vida-pro-wrapper{
    padding-left:14px;
    padding-right:14px;
  }

  .vida-pro-left{
    gap:12px;
  }

  .vida-pro-left .vida-cat,
  .vida-cat{
    min-height:118px;
    padding:16px 10px;
    font-size:14px;
  }

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

  .table-body .row,
  .vida-pro-table .row{
    padding:22px 18px;
  }

  .table-body .row > .left,
  .vida-pro-table .row > .left{
    font-size:16px;
  }

  .table-body .row div,
  .vida-pro-table .row > div{
    font-size:14px;
  }
}