#process-section {padding: 100px 0%;position: relative;overflow: hidden;}
.container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

.section-header { text-align: center; margin-bottom: 80px; }
.eyebrow { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #00AEEF; background: rgba(0,174,239,0.1); padding: 6px 16px; border-radius: 30px; margin-bottom: 15px; }
.main-title {font-size: 38px;font-weight: 900;color: #222;margin: 0 0 15px 0;letter-spacing: 1px;text-align: center;}
.subtitle {font-size: 16px;color: #666;text-align: center;}

.process-grid {
  display:grid;grid-template-columns:repeat(3,1fr);gap:60px 40px;/* 上下60px,左右40px */
  position:relative;
}

.process-card { background: #fff; border: 1px solid #f0f0f0; border-radius: 20px; padding: 40px 30px; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.03); transition: all 0.4s cubic-bezier(0.165,0.84,0.44,1); display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; }
.process-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,174,239,0.12); border-color: rgba(0,174,239,0.3); }

.step-num { position: absolute; top: 15px; right: 20px; font-size: 60px; font-weight: 900; font-family: 'Nunito',sans-serif; color: rgba(0,174,239,0.04); z-index: -1; pointer-events: none; transition: color 0.4s ease; line-height: 1; }
.process-card:hover .step-num { color: rgba(0,174,239,0.08); }

.icon-wrap { width: 75px; height: 75px; background: #f4f9ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; color: #00AEEF; transition: all 0.4s ease; }
.process-card:hover .icon-wrap { background: #00AEEF; color: #fff; transform: scale(1.1); }
.icon-wrap svg { width: 34px; height: 34px; }

.card-title { font-size: 20px; font-weight: 800; color: #222; margin: 0 0 20px 0; position: relative; padding-bottom: 15px; }
.card-title::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; background: #00AEEF; border-radius: 2px; transition: width 0.3s ease; }
.process-card:hover .card-title::after { width: 50px; }
.card-list { list-style: none; padding: 0; margin: 0 auto; text-align: left; display: flex; flex-direction: column; width: fit-content; /* 讓靠左的清單整體置中 */ }
.card-list li { position: relative; padding-left: 18px; font-size: 15px; color: #666; margin-bottom: 8px; line-height: 1.6; }
.card-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: #00AEEF; border-radius: 50%; }
/* 最終步驟特殊樣式 */.step-final { justify-content: center; background: linear-gradient(135deg,#fff,#f4f9ff); }
.step-final .card-title { font-size: 24px; margin-bottom: 0; padding-bottom: 0; color: #00AEEF; }
.step-final .card-title::after { display: none; }

.arrow-indicator { position: absolute; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2300AEEF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");background-size: contain; background-repeat: no-repeat; z-index: 2; opacity: 0.4; }

@media (min-width:993px) {

  .step-right .arrow-indicator { right: -32px; top: 50%; transform: translateY(-50%); }
  .step-left .arrow-indicator { left: -32px; top: 50%; transform: translateY(-50%) rotate(180deg); }
  .step-down .arrow-indicator { bottom: -42px; left: 50%; transform: translateX(-50%) rotate(90deg); }

  .process-card:nth-child(4) { grid-column: 3; grid-row: 2; }
  .process-card:nth-child(5) { grid-column: 2; grid-row: 2; }
  .process-card:nth-child(6) { grid-column: 1; grid-row: 2; }
 
  .process-card:nth-child(7) { grid-column: 1; grid-row: 3; }
  .process-card:nth-child(8) { grid-column: 2; grid-row: 3; }
  .process-card:nth-child(9) { grid-column: 3; grid-row: 3; }

  .process-card:nth-child(10) { grid-column: 3; grid-row: 4; }
  .process-card:nth-child(11) { grid-column: 2; grid-row: 4; }
  .process-card:nth-child(12) { grid-column: 1; grid-row: 4; }
}

@media (max-width:992px) {
  #process-section { padding: 80px 5%; }
  .process-grid { grid-template-columns: repeat(2,1fr); gap: 30px; }
 
  .arrow-indicator { display: none; }
  
  .process-card { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width:650px) {
  .process-grid { grid-template-columns: 1fr; }
  .main-title { font-size: 30px; }
  .process-card { padding: 30px 20px; }
}