/* ==========================================================================
   💎 SAiGEN 靜奢風（Quiet Luxury）與 Bento Grid 完整旗艦級 CSS 系統
   ========================================================================== */
:root {
  --bs-body-font-family: "Inter", sans-serif;
  --bs-body-bg: #f7f3ee; /* 溫潤、柔和的高級淺金色底座 */
  --bs-body-color: #191c1e;
  --color-gold-custom: #f7d5a4;
  --color-navy-dark: #0f1c36;
  --color-bronze-primary: #8c5e3c;

  /* 🎨 全新統一的同色系階梯變數 (Warm Espresso / Gold 家族) */
  --tonal-espresso-dark: #221610;
  --tonal-taupe-mid: #c8bcb0;
  --tonal-champagne-light: #efe8e1;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--bs-body-font-family);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* 確保 main 容器頂部不留多餘空白 */
main.w-full {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: var(--bs-body-bg);
}

.font-serif {
  font-family: "Playfair Display", Georgia, serif;
}

/* 高級微互動效果 */
.transition-hover {
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.transition-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 1.25rem 2.5rem rgba(114, 91, 56, 0.12) !important;
}

/* ==========================================================================
   ✨ 關於希杰 About Banner 專屬視覺系統
   ========================================================================== */
.about-banner-section {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  background-color: var(--color-navy-dark);
  margin-top: 0 !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  overflow: hidden;
}

.banner-bg-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.banner-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(1.04) contrast(108%) saturate(95%) hue-rotate(-5deg);
  -webkit-filter: brightness(1.04) contrast(108%) saturate(95%)
    hue-rotate(-5deg);
  transform: scale(1);
  will-change: transform;
  transition: transform 0.1s cubic-bezier(0, 0, 0.2, 1);
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(15, 28, 54, 0.9) 0%,
    rgba(15, 28, 54, 0.72) 45%,
    rgba(15, 28, 54, 0.35) 75%,
    rgba(15, 28, 54, 0.1) 100%
  );
  pointer-events: none;
}

.text-gold-custom {
  color: var(--color-gold-custom) !important;
  letter-spacing: 2.5px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.text-shadow-lg {
  text-shadow:
    0 4px 20px rgba(0, 0, 0, 0.95),
    0 2px 6px rgba(0, 0, 0, 0.9);
}
.text-shadow-md {
  text-shadow:
    0 3px 18px rgba(0, 0, 0, 0.9),
    0 1px 5px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   ⏱️ 完美置中的垂直進度時間軸系統
   ========================================================================== */
.timeline-container {
  position: relative;
  padding-left: 2.2rem !important;
}

.timeline-axis {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7.5px;
  width: 2px;
  background: linear-gradient(180deg, #725b38 0%, rgba(114, 91, 56, 0.25) 100%);
  border-radius: 2px;
}

.timeline-dot {
  position: absolute;
  left: calc(-2.2rem + 3px);
  top: 7px;
  width: 10px;
  height: 10px;
  background-color: #ffffff;
  border: 2px solid #725b38;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(114, 91, 56, 0.12);
  transition: all 0.3s ease;
}

.timeline-dot.pulse-dot {
  position: absolute;
  left: calc(-2.2rem - 3px);
  top: 4px;
  width: 24px;
  height: 24px;
  background-color: #725b38;
  border: 3.5px solid #f7d5a4;
  border-radius: 50%;
  box-shadow:
    0 0 15px rgba(247, 213, 164, 0.6),
    0 0 5px rgba(114, 91, 56, 0.8);
  animation: alwaysOnMasterStrobe 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes alwaysOnMasterStrobe {
  0% {
    transform: scale(0.95);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(1.45);
  }
  100% {
    transform: scale(0.95);
    filter: brightness(1);
  }
}

/* ==========================================================================
   ✨ Bento Grid 網格與滿版沉浸式卡片精緻光影系統
   ========================================================================== */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.bento-card {
  border-radius: 1.25rem;
  padding: 2.25rem;
  border: 1px solid rgba(140, 94, 60, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bento-card.p-0 {
  padding: 0 !important;
}

/* Bento 2, 3, 5（直向方卡片）微幅加深濾鏡與底色 */
.bento-mission-card,
.bento-vision-card,
.bento-personality-card {
  background-color: rgba(15, 10, 8, 0.2) !important;
  border: 1px solid rgba(247, 213, 164, 0.4) !important;
  box-shadow: 0 1rem 3rem rgba(15, 12, 10, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
}

.bento-mission-bg,
.bento-vision-bg,
.bento-personality-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: brightness(0.78) contrast(108%) saturate(98%) !important;
  -webkit-filter: brightness(0.78) contrast(108%) saturate(98%) !important;
  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s ease !important;
}

.bento-mission-overlay,
.bento-vision-overlay,
.bento-personality-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(15, 10, 8, 0.65) 0%,
    rgba(15, 10, 8, 0.35) 60%,
    rgba(15, 10, 8, 0.1) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Bento 4, 6（橫向大卡片）「左深到右淺」的專業光影漸層 */
.bento-values-fullscreen-card,
.bento-promise-fullscreen-card {
  background-color: rgba(20, 15, 12, 0.1) !important;
  border: 1px solid rgba(247, 213, 164, 0.4) !important;
  box-shadow: 0 1rem 3rem rgba(15, 12, 10, 0.2) !important;
  position: relative !important;
  overflow: hidden !important;
}

.bento-values-fs-bg,
.bento-promise-fs-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter: brightness(0.88) contrast(105%) saturate(100%) !important;
  -webkit-filter: brightness(0.88) contrast(105%) saturate(100%) !important;
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s ease !important;
}

.bento-values-fs-overlay,
.bento-promise-fs-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(18, 13, 10, 0.85) 0%,
    rgba(18, 13, 10, 0.55) 40%,
    rgba(18, 13, 10, 0.15) 75%,
    rgba(18, 13, 10, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* 統一的 Hover 互動放大 */
.bento-mission-card:hover .bento-mission-bg,
.bento-vision-card:hover .bento-vision-bg,
.bento-personality-card:hover .bento-personality-bg,
.bento-values-fullscreen-card:hover .bento-values-fs-bg,
.bento-promise-fullscreen-card:hover .bento-promise-fs-bg {
  transform: scale(1.03) !important;
}

/* 確保絕對定位背景層精準貼齊框框 */
.bento-values-fullscreen-card .position-absolute,
.bento-promise-fullscreen-card .position-absolute,
.bento-mission-card .position-absolute,
.bento-vision-card .position-absolute,
.bento-personality-card .position-absolute {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.editorial-box {
  box-shadow: 0 20px 50px rgba(15, 28, 54, 0.05);
}

/* 滿版暗色卡片專屬：暗金玻璃霧面標籤 */
.glass-pill-badge-dark {
  background: rgba(25, 28, 30, 0.35) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(247, 213, 164, 0.4) !important;
  color: #f7d5a4 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-pill-badge-dark:hover {
  background: rgba(35, 40, 45, 0.65) !important;
  border-color: rgba(247, 213, 164, 0.8) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(247, 213, 164, 0.2);
}
/* --------------------------------------------------------------------------
   時代淬鍊下的戰略定位 - 今日 Logo 節點（Logo 放大、白底縮小、精準置中）
   -------------------------------------------------------------------------- */
.timeline-dot-logo {
    width: 32px;  /* 將白色圓形底座稍微縮小 */
    height: 32px;
    background-color: #ffffff; /* 純白底座 */
    border: none !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -42px; /* 🎯 配合 32px 寬度，精準向左偏移一半（16px），讓中心完美壓在垂直時間軸線上 */
    top: 0px;    /* 微調垂直對齊標題文字 */
    z-index: 5;
    /* 高奢發光體（Glow）設定：外圍散發高雅的香檳金光暈 */
    box-shadow: 0 0 12px rgba(247, 213, 164, 0.7), 0 0 25px rgba(140, 94, 60, 0.35);
}

.timeline-logo-icon {
    width: 36px;  /* 🌟 將 Logo 放大至 36px，使其稍微大於 32px 的白底，呈現滿版且極具張力的視覺焦點 */
    height: 36px;
    object-fit: contain;
}

/* 🌟 脈衝發光動態（Pulse Glow Animation） */
.pulse-dot-logo-wrap {
    animation: logoGlowPulse 2.8s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes logoGlowPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(247, 213, 164, 0.5), 0 0 20px rgba(140, 94, 60, 0.25);
    }
    50% {
        transform: scale(1.12); /* 呼吸微幅放大 */
        box-shadow: 0 0 22px rgba(247, 213, 164, 0.95), 0 0 45px rgba(247, 213, 164, 0.6); /* 峰值時發出璀璨金光 */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(247, 213, 164, 0.5), 0 0 20px rgba(140, 94, 60, 0.25);
    }
}
/* ----------------------------------------------------
   Tier 2: 其他半版卡片樣式 (Bento 1)
   ---------------------------------------------------- */
.bento-editorial-card {
  background-color: var(--tonal-taupe-mid) !important;
  border: 1px solid rgba(140, 94, 60, 0.25) !important;
  box-shadow: 0 1rem 3rem rgba(50, 42, 38, 0.12);
}

.bg-values-tone {
  background-color: var(--tonal-taupe-mid) !important;
}

.text-values-title {
  color: #221a15 !important;
}

.text-values-body {
  color: #38302a !important;
  opacity: 0.95;
  font-size: 0.825rem;
}

/* 圖片羽化遮罩系統 (僅適用於半版卡片) */
.bento-feathered-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 25%,
    rgba(0, 0, 0, 1) 75%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 25%,
    rgba(0, 0, 0, 1) 75%
  );
  
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bento-editorial-card:hover .bento-feathered-img {
  transform: scale(1.04);
}
@media (min-width: 992px) {
  .bento-feathered-img {
    min-height: 280px;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 1) 85%
    );
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.45) 35%,
      rgba(0, 0, 0, 1) 85%
    );
  }
}
/* ==========================================================================
   ✨ Advisory CTA 區塊專屬深海藍灰濾鏡與互動系統 (已注入精緻藍調)
   ========================================================================== */
.advisory-navy-bg {
  /* 💡 增加藍色微調：透過 hue-rotate(185deg) 轉向冷色系，並降低飽和度與亮度，營造高階科技藍調 */
  filter: brightness(0.85) contrast(110%) saturate(85%) hue-rotate(185deg);
  -webkit-filter: brightness(0.85) contrast(110%) saturate(85%)
    hue-rotate(185deg);
  transition:
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s ease;
}

section:hover .advisory-navy-bg {
  transform: scale(1.03);
  filter: brightness(0.92) contrast(112%) saturate(90%) hue-rotate(185deg);
}

/* 💡 藍灰色調沉浸式漸層遮罩：與頂部 Banner 完美呼應 */
section
  .position-absolute.inset-0.w-100.h-100[style*="background: linear-gradient"] {
  background: linear-gradient(
    135deg,
    rgba(15, 28, 54, 0.94) 0%,
    rgba(15, 28, 54, 0.85) 100%
  ) !important;
}

.advisory-cta-btn {
  background-color: #0f1c36;
  border: 1px solid rgba(247, 213, 164, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.advisory-cta-btn:hover {
  background-color: #1a2f5a;
  border-color: #f7d5a4;
  color: #f7d5a4;
  transform: translateY(-3px);
  box-shadow:
    0 0.75rem 2rem rgba(247, 213, 164, 0.25),
    0 4px 15px rgba(0, 0, 0, 0.5);
}

.advisory-cta-btn:hover .material-symbols-outlined {
  transform: translateX(4px);
  transition: transform 0.3s ease;
}

/* 網格跨欄設定 */
.bento-span-4 {
  grid-column: span 4;
}

.bento-span-8 {
  grid-column: span 8;
}

/* ==========================================================================
   📱 響應式佈局 (Responsive)
   ========================================================================== */
@media (max-width: 991.98px) {
  .bento-span-4,
  .bento-span-8 {
    grid-column: span 12 !important;
  }

  .bento-card {
    min-height: auto !important;
  }

  .bento-card .row.g-0 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  .bento-card .col-md-7 {
    width: 100% !important;
    height: auto !important;
    padding: 2rem 1.5rem !important;
  }

  .bento-card .col-md-5 {
    width: 100% !important;
    height: 260px !important;
    min-height: 260px !important;
    position: relative !important;
  }
}

/* 捲軸美icon / 美化 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f0eae4;
}
::-webkit-scrollbar-thumb {
  background: #a38d79;
  border-radius: 3px;
}