/* 研究方向：Venn-like diagram + lists */
.research-section{
  display:grid;
  grid-template-columns: 1fr 420px; /* 左：diagram 右：描述 */
  gap:36px;
  align-items:center;
  margin-bottom:64px;
  position:relative;
}

/* diagram 與 lists 包裹 */
.research-diagram{
  width:100%;
  max-width:760px;
  height:420px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* circles */
.circle{
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  mix-blend-mode: screen;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.45));
}
.circle-inner{
  text-align:center;
  color:#061226;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  width:70%;
  height:70%;
}
.circle-inner strong{
  font-size:22px;
  color:#fff;
  font-weight:800;
  letter-spacing:0.3px;
}
.circle-icon{ width:56px; height:56px; color: #061226; }

/* individual positions & tint */
.circle-ai{ background: radial-gradient(circle at 25% 25%, rgba(0,255,246,0.95), rgba(138,43,226,0.28)); transform: translate(-160px,-30px); }
.circle-chip{ background: radial-gradient(circle at 75% 25%, rgba(255,0,214,0.92), rgba(79,176,255,0.20)); transform: translate(0px,80px); }
.circle-zta{ background: radial-gradient(circle at 50% 75%, rgba(79,176,255,0.95), rgba(0,255,220,0.16)); transform: translate(160px,-30px); }

 /* right-side cards */
.research-cards{ display:flex; flex-direction:column; gap:18px; align-items:stretch; }
.rd-card{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 12px 36px rgba(6,8,20,0.5);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.rd-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(6,10,25,0.6); }
.rd-icon{
  width:56px; height:56px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  color:var(--accent-1);
  flex-shrink:0;
}
.rd-body h3{ margin:0 0 8px; font-size:16px; color: #e9f9ff; }
.rd-body ul{ margin:0; padding-left:18px; color: rgba(220,235,255,0.92); line-height:1.6; font-size:14px; }
.rd-body li{ margin:6px 0; }

/* modern research cards (no circles) */
.research-section.modern-cards{ margin-bottom:64px; }
.cards-grid{
  display:grid;
  grid-template-columns: 1.6fr 420px; /* 左重點、右側固定寬度堆疊 */
  grid-template-rows: auto auto;
  gap:20px;
  grid-template-areas:
    "large right-top"
    "large right-bottom";
  align-items:start;
  max-width:1200px;
  margin:0 auto;
  width:100%;
}

/* 左側大卡片：跨兩列（占左側長條） */
.rd-card.large{
  grid-column: 1 / 2;
  grid-row: 1 / span 2;
  min-height:260px;
  padding:22px;
}

/* 支援卡片（右側）會自動排列在第 2、3 欄 */
.rd-card{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 36px rgba(6,8,20,0.5);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
  overflow:hidden;
}

/* 修正 cards-grid 佈局：grid-template-areas，確保左大卡恆在左側且右側兩張上下排列 */
.cards-grid{
  display:grid;
  grid-template-columns: 1.6fr 420px; /* 左重點、右側固定寬度堆疊 */
  grid-template-rows: auto auto;
  gap:20px;
  grid-template-areas:
    "large right-top"
    "large right-bottom";
  align-items:start;
}

/* 指派區域 */
.cards-grid > .rd-card.large{ grid-area: large; }
.cards-grid > .rd-card:nth-child(2){ grid-area: right-top; }
.cards-grid > .rd-card:nth-child(3){ grid-area: right-bottom; }

/* 卡片樣式微調 */
.rd-card{
  position:relative;
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:18px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: 0 12px 36px rgba(6,8,20,0.5);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
  overflow:hidden;
}
.rd-card.large{ padding:22px; min-height:240px; }

/* accent / icon / text 保持既有風格 */
.rd-accent{ width:8px; height:100%; border-radius:6px; flex-shrink:0; margin-right:8px; background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); }
.rd-accent.chip{ background: linear-gradient(180deg, #ffd07a, #7fe0ff); }
.rd-accent.zta{ background: linear-gradient(180deg, #9ef6d8, #8a2be2); }
.rd-accent.ai{ background: linear-gradient(180deg, var(--accent-1), #ffd07a); }

.rd-content{ display:flex; flex-direction:column; gap:10px; width:100%; }
.rd-head{ display:flex; align-items:center; gap:12px; }
.rd-icon{
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.03);
  color:var(--accent-1);
  flex-shrink:0;
}
.rd-content h3{ margin:0; font-size:18px; color:#e9f9ff; }
.rd-list{ margin:0; padding-left:18px; color:rgba(220,235,255,0.92); line-height:1.7; font-size:15px; }
.rd-list li{ margin:8px 0; }

/* hover */
.rd-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(6,10,25,0.6); }