/* ========== 全局樣式 ========== */
/* === Global font === */
:root{
  --font-sans: "Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",
               system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

html, body { font-family: var(--font-sans); }

/* 讓常見元素都沿用 body 字型，避免個別規則蓋掉 */
:where(h1,h2,h3,h4,h5,h6,p,a,button,input,textarea,small){
  font-family: inherit !important;
}
  :root { --hero-gap: 40px; }
  :root { --page-gutter: 16px; }
  /* 站內所有連結的共同樣式（導覽在下面會再微調） */
  a {
    padding: 0 10px;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none !important;
    color: black !important;
    font-family: inherit;
  }
  
  header,
  footer {
    display: block;
    width: 100%;
  }
  
  /* ========== Header ========== */
  .header {
    display: flex;
    align-items: flex-end;             /* 主要仍置中對齊 */
    justify-content: space-between;
    padding: 5px var(--page-gutter) 4px;
    background-color: #fff;
    border-bottom: none; /* 想更粗就 5px / 6px */
    position: relative;
    z-index: 1000;
    margin-bottom: 12px;   /* 想更寬就 16/20px */

  }
  /* 用偽元素畫一條與視窗左右有間距的黑線 */
  .header::after {
    content: "";
    position: absolute;
    left: var(--page-gutter);   /* ← 留白與版心一致 */
    right: var(--page-gutter);  /* ← 留白與版心一致 */
    bottom: 0;
    height: 2.5px;                  /* ← 線的粗細；想更粗改 5/6px */
    background: #000;             /* 純黑 */
    border-radius: 2px;           /* 邊緣圓一點，想直角可刪 */
    pointer-events: none;
  }
  
  /* 品牌區（Logo + 公司名） */
  .logo-container .brand {
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    gap: 0;                          /* 不要空隙 */
  }
  
  /* Logo 尺寸 */
  .header .logo {
    display: block;
    height: 60px;                    /* 視覺可調 60~72 皆可 */
    width: auto;
    margin-right: 0;                 /* 與公司名緊貼 */
  }
  
  /* 公司名稱（中文） */
  .brand-name {
    display: inline-block;     /* 讓它吃到真正的基線 */
    font-family: inherit;
    font-size: 1.25em;               /* 約 22px * 1.25 = 27.5px */
    font-weight: 700;
    color: rgb(30,58,138) !important;/* 蓋掉全域 a 的 color */
    line-height: 1;
    white-space: nowrap;
    padding-bottom: 2px;            /* 與下方底線對齊（可調 10~16） */
  }
  
  /* 語言按鈕（目前未使用，先保留定義） */
  .language-btn { display: none; }
  .header .flag-icon {
    height: 18px;
    width: auto;
    margin: 0 6px 0 0;
  }
  
  /* ========== 導覽 #nav-menu（桌機） ========== */
  /* 固定用 #nav-menu，避免 nav/ID 雙軌 */
  #nav-menu {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin-left: auto;               /* 推到右側 */
    padding-top: 0;
    padding-bottom: 0;            /* 與 .brand-name 對齊 */
    text-align: left;
  }
  
  #nav-menu a {
    padding-top: 0px;      
    display: inline-block;     /* 參與基線，避免被行盒撐高 */
    line-height: 1;            /* 收緊字框 */          /* 比全域 a 再收斂一點，避免壓線 */
    padding-bottom: 2px;
    font-family: inherit
  }
  
  /* 漢堡選單按鈕（桌機隱藏） */
  .menu-toggle {
    display: none;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
    padding-top: 20px;
    position: relative;
    z-index: 10001;
  }
  
  /* ========== Carousel / Video / Footer ========== */
/* ===== Hero：一張圖 + 文字覆蓋 + 兩個按鈕 ===== */
.hero {
    position: relative;
    width: calc(100% - var(--page-gutter) * 2);  /* ← 關鍵 */
    overflow: hidden;
    margin-left: var(--page-gutter);
    margin-right: var(--page-gutter);
    aspect-ratio: 9/ 4;
    height: clamp(320px, 55vh, 640px);
  }
  
  /* 圖片鋪滿、不變形 */
  .hero-img {
    width: 100%;
    height: 100%;              /* 桌機高度：可調 360~520 */
    object-fit: fill;
    object-position: center;
  }
  
  /* 讓白字在淺色圖上也清楚：左到右的淡漸層遮罩 */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
  }
  
  /* 文字區：靠左下，留內距 */
  .hero-content {
    position: absolute;
    left: 30%;
    right: 10%;
    bottom: 40%;
    color: #fff;
    font-family: inherit;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  
  /* 標題 / 副標 */
  .hero-title {
    margin: 0 0 8px 0;
    font-weight: 800;
    font-size: clamp(26px, 3.6vw, 44px);
    line-height: 1.15;
  }
  .hero-subtitle {
    margin: 0 0 16px 0;
    font-weight: 600;
    font-size: clamp(16px, 2.2vw, 22px);
    line-height: 1.35;
    opacity: 0.95;
  }
  
  /* 按鈕群組 */
  .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  /* 共用按鈕樣式 */
  .hero-btn {

    display: inline-block;
    padding: 10px 16px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 12px;
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;

        /* 新增：黑字 + 白色外框 */
    color: #000 !important;
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
    /* 後備：不支援 text-stroke 時用陰影疊邊 */
    text-shadow:
      1px 0 0 #fff, -1px 0 0 #fff,
      0 1px 0 #fff,  0 -1px 0 #fff,
      1px 1px 0 #fff, -1px -1px 0 #fff,
      1px -1px 0 #fff, -1px 1px 0 #fff;
  }
  
  /* 實心款（左邊） */
  .hero-btn--solid,
  .hero-btn--outline {
    background: #6BC0F7;
    color: #110255 !important;
    border: 2px solid #6BC0F7;
    box-shadow: 0 6px 18px rgba(59,130,246,0.35);
    font-family: inherit;
  }
  
  .hero-btn--solid:hover,
  .hero-btn--outline:hover {
    transform: translateY(-1px);
    background: #6BC0F7;
    border-color: #6BC0F7;
    box-shadow: 0 8px 22px rgba(59,130,246,0.45);
    color: #000 !important;          /* 改：hover 仍是黑字 */
  }
  
  :root { --hero-gap: 40px; }
  :root { --page-gutter: 16px; }

 
/* 解決方案區塊標題（中間大標） */
#solutions { 
  margin-top: 1rem !important;  /* 由 bootstrap 的 ~3rem 改短一半 */
}
#solutions.container { max-width: 1320px; }
#solutions h2.fw-bold {
  font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei","Heiti TC",sans-serif;
  color: #1E3A8A;
  font-weight: 900 !important;   /* 或 800，依你要的粗細 */
  letter-spacing: .5px;
  font-size: clamp(25px, 4.2vw, 40px);  /* 👈 放大：手機~桌機都更大 */
  line-height: 1.15;                    /* 緊一點更有氣勢 */
}

/* 解決方案區塊：左上角小標（膠囊、深藍字＋邊、淺紫底） */
#solutions .badge {
  border-radius: 9999px;                 /* 四角圓弧 */
  padding: .45rem 1.1rem;                /* 內距舒服一點 */
  background-color: #EEF2FF !important;  /* 淺紫底 */
  color: #1E3A8A !important;             /* 深黑藍字／箭頭 */
  border: 2px solid #1E3A8A !important;  /* 深黑藍外框 */
  font-weight: 800;                       /* 粗一點 */
  letter-spacing: .5px;                   /* 可選：微拉字距 */
}
/* 覆蓋 p-3 / p-md-4，讓面板本體看起來更大 */
#solutions .rounded-3.p-3,
#solutions .rounded-3.p-md-4 {
  padding: clamp(20px, 2.5vw, 32px) !important;
}
/* 卡片標題與內容字體放大、行距拉開 */
/* 統一左右卡片的小標題大小與粗細 */
#solutions .card { 
  border-radius: 16px !important; 
  display: flex;
  flex-direction: column;
  height: clamp(230px, 30vh, 240px) !important;  /* ← 統一高度 */
  position: relative;
}
#solutions .card-body {
  flex: 1 1 auto;      /* 內文撐滿高度 */
  overflow: auto;      /* 如果某張內容比較多，出現捲軸而不是把卡片撐高 */
}
#solutions .card-title {
  font-size: clamp(20px, 1.8vw, 30px) !important;
  font-weight: 900 !important;                     /* 一律加粗 */
  line-height: 1.1;          /* 縮小行高，避免內部留白 */
  margin: 0 0 .15rem 0;      /* 把下邊距壓到更小 */
  padding: 0;                /* 確認沒有內距 */
  min-height: 0 !important;  /* ← 取消你可能先前加過的 min-height */
  text-align: center;        /* 置中（若已加可保留） */
}
#solutions .card ul { margin-top: 0; }
#solutions .card .small,
#solutions .card li { font-size: 1.325rem; line-height: 1.6; margin-top: .1rem;font-weight: 600 !important; }

/* 卡片本體稍微墊高，視覺更扎實 */
#solutions .card.h-100 { min-height: 150px; }
#solutions .badge { padding: .55rem 1.25rem; font-size: .95rem; }
#solutions .card-icon{
  position: absolute;
  top: -20px;
  width: 64px;
  aspect-ratio: 1 / 1;   /* 保持正方形 */
  height: auto;          /* 或直接刪掉 height 設定 */
  border-radius: 50%;
  overflow: hidden;
  border: none;
  background: transparent;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
#solutions .card-icon.is-left  { left: -14px; }        /* 左上 */
#solutions .card-icon.is-right { right: -14px; }       /* 右上 */

#solutions .card-icon > img{
  width: 100%;
  height: 100%;
  object-fit: cover;                                   /* 任何長寬都能填滿成圓 */
  display: block;
}

/* 讓標題不被角標壓到（預留一點上方間距） */
#solutions .card .card-body { padding-top: 12px; }
/* 統一兩側面板底色（取代原本 bg-light/inline style） */
:root{
  --panel-gray:#C9C9C9;  /* 可調 */
  --panel-blue:#D9E7F9;  /* 可調 */
}
.solutions-panel--gray { background-color: var(--panel-gray); }
.solutions-panel--blue { background-color: var(--panel-blue); }
#solutions h3.fw-bold {
  text-align: center;
  font-weight: 1200 !important;           /* 再加粗 */
  font-size: clamp(24px, 2.6vw, 32px);   /* 放大：手機→桌機自適應 */
  line-height: 1.2;                      /* 緊一點更有力道（可調） */
}
#solutions h3.fw-bold.text-secondary {
  color: #544541 !important; /* 想要的顏色換這裡 */
} 
#solutions h3.fw-bold.text-primary {
  color: #B10D01 !important; /* 紅色，可換成你要的紅碼 */
}

/* 圖片上方的說明文字樣式 */
#solutions .solutions-caption{
  margin-top: 10px;
  margin-bottom: 6px;                 /* 與圖片留一點距離 */
  font-size: clamp(14px, 1.4vw, 16px);
  color: #475569;                     /* 灰藍色，可改 */
  font-weight: 600;                   /* 稍微加粗 */
  line-height: 1.5;
  text-align: left;                   /* 想置中就改成 center */
}



/* ========== 第三個 Section：應用亮點 ========== */
:root{
  --hl-bg: #EAF3FF;     /* 淺藍背景 */
  --hl-title: #1E3A8A;  /* 深藍標題 */
  --hl-text: #334155;   /* 文字顏色 */
}

#highlights{
  background: var(--hl-bg);
}

/* 標題與副標 */
#highlights .highlights-title{
  color: var(--hl-title);
  font-size: clamp(28px, 4.2vw, 60px);
  letter-spacing: .5px;
}

#highlights .highlights-subtitle{
  color: var(--hl-text);
  font-size: clamp(14px, 2.1vw, 30px);
  font-weight: bold;
  opacity: .95;
}

/* 白底卡片 */
.highlight-card{
  background: #fff;
  border-radius: 18px;
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(15,23,42,.06);
}
/* 第一排做「金字塔」置中+縮小水平間距 */
#highlights .pyramid-top{
  --bs-gutter-x: .75rem;   /* 讓兩張卡更靠近（預設約1.5rem） */
  margin-bottom: 2.5rem !important;    /* 跟第二排靠近一點 */
}

/* 卡片內文字 */
.highlight-card__title{
  margin: 0 0 .35rem 0;
  font-weight: 900;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height: 1.2;
  color: #0F172A;
}

.highlight-card__desc{
  margin: 0;
  color: #475569;
  font-weight: 900;
  font-size: clamp(14px, 2.1vw, 22px);
  line-height: 1.65;
}

/* === Use Cases section === */
#use-cases{
  background:#fff;                /* 整塊白底 */
  padding: 3rem 0 3.25rem;        /* 上下留白 */
}

#use-cases .usecases-title{
  color:#1E3A8A;                  /* 深藍大標 */
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.15;
  margin-bottom: .25rem;
}

#use-cases .usecases-subtitle{
  color:#0F172A;                  /* 黑色副標（深灰黑） */
  font-size: clamp(16px, 2.2vw, 22px);
  opacity:.95;
  margin-bottom: 2.25rem;         /* 與下方卡片距離 */
}

/* 卡片本體（figure） */
#use-cases .usecase-card{
  margin:0;
  text-align: center;
}

/* 圖片：圓角、比例、裁切、陰影 */
#use-cases .usecase-img{
  width:100%;
  aspect-ratio: 16 / 10;          /* 固定比例，視覺一致 */
  object-fit: cover;               /* 充滿裁切，不變形 */
  border-radius: 20px;             /* 四角圓弧 */
  display:block;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
#use-cases .usecase-img:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 圖片下方說明文字 */
#use-cases .usecase-caption{
  margin-top: .9rem;
  color:#0B1220;
  font-weight: 800;
  font-size: clamp(16px, 2.4vw, 24px);
  line-height: 1.25;
}

/* === Partners / Case Studies === */
#partners{
  background: #E8F2FF;               /* 淺藍底 */
  padding: 3rem 0 3.25rem;
}

#partners .partners-title{
  color:#1E3A8A;
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 70px);
  line-height: 1.15;
  margin-bottom: .35rem;
}

#partners .partners-subtitle{
  color:#0B1220;
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 35px);
  opacity:.95;
  margin-bottom: 2rem;
}

/* 卡片 */
#partners .partner-card{
  background:#fff;
  border: 3px solid #274690;         /* 深藍外框 */
  border-radius: 18px;
  padding: 20px 22px;
  display:flex;
  gap: 18px;
  align-items:flex-start;
  box-shadow: 0 10px 22px rgba(30,58,138,.08);
}

/* 左側 logo */
#partners .partner-logo{
  flex: 0 0 92px;                     /* 固定寬 */
  display:flex;
  align-items:center;
  justify-content:center;
}
#partners .partner-logo img{
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 50%;                 /* 圓形 logo（若不需要改 12px） */
  display:block;
}

/* 右側文字 */
#partners .partner-body{ flex:1 1 auto; }
#partners .partner-name{
  margin: 2px 0 8px;
  font-weight: 900;
  font-size: clamp(18px, 2.1vw, 26px);
  color:#0B1220;
}
#partners .partner-desc{
  margin: 0 0 14px;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.7;
  color:#0F172A;
}

/* 右側按鈕（深藍底＋白字＋icon） */
#partners .partner-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#103B66;
  color:#fff !important;
  text-decoration:none !important;
  padding: 12px 18px;
  font-weight: 900;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(16,59,102,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
#partners .partner-btn:hover{
  transform: translateY(-1px);
  background:#0D3154;
  box-shadow: 0 10px 22px rgba(16,59,102,.24);
}

/* 底部 CTA */
#partners .partners-cta{ margin-top: 2.25rem; }
#partners .cta-text{
  color:#1E3A8A;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 32px);
  margin-bottom: .85rem;
}
#partners .cta-btn{
  display:inline-block;
  background:#3BA3F6;
  color:#fff !important;
  text-decoration:none !important;
  padding: 12px 26px;
  border-radius: 14px;
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 22px);
  box-shadow: 0 10px 22px rgba(59,163,246,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
#partners .cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(59,163,246,.35);
}


/* Footer */
#site-footer{
  --footer-bg: #16294c;           /* 深藍底 */
  --footer-fg: #ffffff;           /* 白字 */
  --footer-subtle: #cfe0ff;       /* 淺藍字/連結 */
  background: var(--footer-bg);
  color: var(--footer-fg);
  margin-top: 0 !important;
}

#site-footer .footer-logo{
  width: 64px; height: 64px; object-fit: contain;
}
#site-footer .footer-company-title{
  font-weight: 900;
  color: #e6efff;
  letter-spacing: .5px;
}
#site-footer .footer-tagline{
  color: #e6efff;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  margin-top: -0.5rem !important;
  opacity: .95;
}

/* 區塊標題與列表 */
#site-footer .footer-section-title{
  color: #ffffff;
  font-weight: 900;
  margin-bottom: .75rem;
  font-size: clamp(22px, 2.0vw, 30px);
  text-align: center;          /* 置中 */
  display: block;              /* 確保可用 auto margin */
  margin-left: auto;
  margin-right: auto;
}
/* 列表本體：置中、去圓點 */
#site-footer .footer-list{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

/* 每項白字、行距 */
/* 所有列表項目都吃到字級與白字 */
#site-footer .footer-list li{
  color: rgba(255,255,255,.85) !important;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.5;
}

/* 從第二個起才加上間距 */
#site-footer .footer-list li + li{
  margin-top: .35rem;
}

/* 若 li 裡面是 <a>，讓 <a> 繼承 li 的字級 */
#site-footer .footer-list a{
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  font: inherit;           /* ← 跟 li 一樣大小/字重 */
}
#site-footer a:hover,
#site-footer a:focus{
  color: #fff;
  text-decoration: underline;
}

/* 底部細線及字體 */
#site-footer .footer-bottom{
  color: #ffffff;
  font-size: 22px;
  opacity: .9;
}
  
  /* ========== 手機版（<=768px） ========== */
  @media screen and (max-width: 768px) {
    :root { --hero-gap: 16px; }

    :root { --page-gutter: 12px; }
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
  
    main { flex-grow: 1; }
  
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 10px var(--page-gutter);
      margin-bottom: 8px;   /* 想更寬就 16/20px */

    }
    .header::after {
      left: var(--page-gutter);   /* ← 不要用 0 */
      right: var(--page-gutter);  /* ← 不要用 0 */
      height: 3px;               /* 手機略細，看起來更精緻 */
      }
  
    /* Logo 手機縮小、微降視覺基線 */
    .header .logo {
      height: 48px;
      transform: translateY(0);
    }
  
    /* 手機不顯示公司名避免擠版 */
    .brand-name { display: none; }
  
    /* 漢堡與（原本）語言按鈕容器 */
    .menu-container {
      display: flex;
      align-items: center;
      gap: 1px;
    }
  
    /* 顯示漢堡按鈕 */
    .menu-toggle {
      display: block;
      font-size: 28px;
      cursor: pointer;
      padding: 5px 0;
      z-index: 10001;
      margin-top: 10px;
    }
  
    /* 手機下拉選單（用絕對定位覆蓋內容） */
    #nav-menu {
      display: none;                 /* 預設收起 */
      position: absolute;
      top: 55px;                     /* 從 header 底下展開 */
      right: 0;                      /* 靠右 */
      width: 100%;                   /* 滿寬更好點 */
      background-color: #fff;
      text-align: center;
      padding: 5px 0;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      z-index: 999;
      flex-direction: column;        /* 垂直排列 */
    }
  
    /* 由 JS 切換的展開狀態（建議用 class 切換會更穩）*/
    #nav-menu.show { display: flex; }
  
    /* 手機版每條連結樣式 */
    #nav-menu a {
      display: block;
      padding: 10px;
      font-size: 18px;
      font-weight: bold;
      text-decoration: none !important;
      color: black !important;
      font-family: "Biaukai","DFKai-SB","標楷體",sans-serif;
      border-bottom: 1px solid #ddd;
      transition: background 0.3s ease;
    }
    #nav-menu a:hover { background-color: #f1f1f1; }
  
    /* Carousel / Video 手機優化 */
    .hero {
      width: calc(100% - var(--page-gutter) * 2);  /* ← 和桌機一致 */
      margin-left: var(--page-gutter);
      margin-right: var(--page-gutter);
      aspect-ratio: auto;
      height: auto; 
    }
    .hero-img {     
      height: 320px;          /* 你原本的設定 */
      display: block;         /* 新增：避免圖片底部行高縫隙 */ }
    .hero-content {
      left: 16px; right: 16px; bottom: 30%;
      text-align: center;                /* 手機置中 */
    }
    .hero-actions { justify-content: center; }


    /* 手機：卡片標題與內文縮小 */
    #solutions .card-title {
      font-size: 24px !important;
      line-height: 1.15;
    }
    #solutions .card li,
    #solutions .card .small {
      font-size: 1.05rem !important;
      line-height: 1.5;
    }
    #solutions .card-icon{
      top: clamp(-16px, -2vw, -10px);
      width: clamp(32px, 6vw, 44px);  /* 最小32、最大44，依寬度變化 */
      aspect-ratio: 1 / 1;
    }
    #solutions .card-icon.is-left  { left: -16px; }
    #solutions .card-icon.is-right { right: -16px; }
    #solutions .card .card-body { padding-top: 14px; }
    #solutions .solutions-caption{
      font-size: clamp(12px, 4vw, 16px);  /* 手機更小、更順眼 */
      line-height: 1.5;                     /* 可一起微調行距 */
    }
    #highlights { padding-top: 2.25rem; padding-bottom: 2.25rem; }
      /* 統一所有 row 的垂直 gutter（上下距離） */
    #highlights .row{
      --bs-gutter-y: 1.5rem;   /* 想更緊就 1.25rem，想更鬆就 2rem */
    }

    /* 取消為了金字塔效果設定在第一排的特別間距 */
    #highlights .pyramid-top{
      margin-bottom: 1.5rem !important;   /* 與第二排一致，不要更近 */
      --bs-gutter-x: 1.5rem;         /* 水平 gutter 用預設即可 */
    }

    /* 確保卡片本身沒有另外的上下 margin 影響間距（若有再加這段） */
    #highlights .highlight-card{
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    #use-cases{
      padding: 2rem 0 2.5rem;
    }
    #use-cases .usecases-subtitle{
      margin-bottom: 1.5rem;
    }
    /* 手機時每張之間留一樣的垂直距離 */
    #use-cases .row{ --bs-gutter-y: 1.25rem; }
    #partners{ padding: 2.2rem 0 2.6rem; }
    #partners .partner-card{
      padding: 16px;
      gap: 14px;
    }
    #partners .partner-logo{ flex-basis: 72px; }
    #partners .partner-logo img{ width:72px; height:72px; }

    #site-footer .footer-logo{ width: 56px; height: 56px; }
    #site-footer .footer-company-title{ font-size: 20px; }
  }