/*第四頁css樣式*/
/* 讓整個首頁區塊佔滿螢幕高 */

#differ {
  height: 100vh;                /* 讓整個區塊佔滿視窗高度 */
  display: flex;                /* 啟用 flex 排版（方便垂直與水平置中） */
  justify-content: center;      /* 垂直方向置中所有內容 */
  align-items: center;          /* 水平方向置中所有內容 */
  flex-direction: column;       /* 內容由上往下排列（主標題 → 三欄） */
  text-align: center;           /* 文字置中 */
  color: rgba(255,255,255,0.9); /* 字體顏色（微透明白） */
  padding: 80px 40px;           /* 上下左右留白（避免內容太擠） */
  box-sizing: border-box;       /* 包含 padding 在內的寬高計算 */
}

/* # 主標題樣式（懂才抱與 AI 的差別） */
#differ h2 {
  font-size: 48px;                              /* 字體大小 */
  font-weight: 800;                             /* 粗體程度（越大越粗） */
  margin-bottom: 60px;                          /* 與下方三欄的距離 */
  letter-spacing: 6px;                          /* 字距（每個字之間間隔） */
  text-shadow: 0 4px 12px rgba(233, 221, 221, 0.25);     /* 文字陰影（讓白字更立體） */
}

/* # 三欄容器設定（包住三個 feature-item） */
.feature-grid {
  display: flex;                /* 啟用 flex 讓三欄橫向排列 */
  justify-content: center;      /* 水平置中三欄 */
  align-items: flex-start;      /* 每個欄位上對齊 */
  gap: 90px;                    /* 三欄之間的間距 */
  flex-wrap: wrap;              /* 若螢幕太小，自動換行（RWD） */
  max-width: 1200px;            /* 最大寬度限制，避免太寬 */
}

/* # 單一卡片樣式（每一欄 feature-item） */
.feature-item {
  background: rgba(255,255,255,0.05);   /* 半透明背景（微亮） */
  border: 1px solid rgba(255,255,255,0.1); /* 細白框線 */
  border-radius: 20px;                 /* 圓角邊框 */
  padding: 20px 20px 20px;             /* 內距，上右下左 */
  width: 340px;                        /* 卡片寬度 */
  min-height: 370px;                   /* 卡片最小高度（確保一致） */
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* 陰影（浮起感） */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑的 hover 動畫 */
}

/*# 滑鼠移入效果（卡片浮起） */
.feature-item:hover {
  transform: translateY(-10px);                 /* 向上移動 10px */
  box-shadow: 0 15px 40px rgba(120, 80, 255, 0.4); /* 陰影加深，發光感 */
}

/* # 標題設定（每張卡片的小標題）*/
.feature-title {
  font-size: 20px;                 /* 標題字體大小 */
  font-weight: 700;                /* 字體粗細 */
  color: #fff;                     /* 純白 */
  margin-bottom: 18px;             /* 與內文距離 */
  line-height: 1.5;                /* 行距 */
}

/* # 內文設定（每張卡片的多行段落）*/
.feature-item p {
  font-size: 16px;                 /* 內文字體大小 */
  line-height: 1.9;                /* 行距，讓文字好讀 */
  color: rgba(255,255,255,0.8);    /* 微透明白字 */
  margin-bottom: 8px;              /* 每行間距 */
}

/* 底部圓形 CTA 按鈕（向下箭頭） */
#differ .cta-button{
  width: 40px; height: 40px; /*按鈕大小*/
  border: 0; border-radius: 9999px;  /*移除預設邊框*/
  display: inline-flex; align-items: center; justify-content: center; /*置中箭頭*/
  background: radial-gradient(120% 120% at 30% 20%, #ff77b7 0%, #a78bfa 60%, #7c6ef6 100%);  /*放射漸層*/
  box-shadow: 0 12px 36px rgba(135,110,255,.45);  /*模糊陰影*/
  cursor: pointer; /*手指圖示*/
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;  /*滑鼠移入有平滑過度*/
  margin-top: 60px;
}
#differ .cta-button:hover{
  transform: translateY(-3px) scale(1.06); /*滑鼠移去浮動變大*/
  box-shadow: 0 18px 48px rgba(135,110,255,.6);  /*陰影變身*/
  filter: brightness(1.05);  /*變亮*/
}
#differ .cta-button:active{ transform: scale(0.98); }   /*點下去縮小*/
#differ .cta-button svg{ width: 34px; height: 34px; fill: #fff; }  /*按鈕大小*/