/* =========================================================
   客製化系統程式開發服務頁（/service/system）專用樣式
   以 ss- 為前綴，避免與 service.css 其他服務頁的樣式互相干擾
   ========================================================= */

/* 設計變數：集中管理色彩，所有文字配色皆已確認符合 AA 對比度 4.5:1 */
.ss-page {
    --ss-ink: #1e1b4b; /* 深靛藍：標題與行動呼籲背景，沉穩可靠的企業系統印象 */
    --ss-indigo: #4338ca; /* 靛藍主色：與白色對比約 7.9:1，可用於小字與按鈕底色 */
    --ss-indigo-soft: #eef2ff; /* 淺靛藍：圖示底色與首屏背景 */
    --ss-cyan: #0e7490; /* 青色輔助色：與白色對比約 5.4:1，用於副標與重點 */
    --ss-blue: #1170b7; /* 品牌主色，沿用網站既有藍色，用於焦點框 */
    --ss-text: #1f2937; /* 內文主色 */
    --ss-muted: #4b5563; /* 次要文字，與白色對比約 7.5:1 */
    --ss-line: #e5e7eb; /* 分隔線與卡片框線 */
    --ss-bg-alt: #f6f7fb; /* 交錯區塊背景，帶一點靛藍色調與主色協調 */
    --ss-radius: 16px; /* 卡片與圖片統一圓角 */
    --ss-shadow: 0 12px 32px rgba(30, 27, 75, 0.1); /* 統一陰影，營造浮起層次 */

    display: block; /* main 在舊瀏覽器預設為 inline，明確指定避免版面錯亂 */
    overflow-x: clip; /* 裁切 AOS 滑入動畫的初始位移，避免手機出現水平捲軸；不用 hidden 是因為會讓本頁導覽的 sticky 失效 */
    color: var(--ss-text);
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; /* 中文優先使用 layouts 已載入的 Noto Sans TC */
    line-height: 1.8; /* 中文長段落閱讀較舒適的行高 */
    letter-spacing: 0.03em;
}

/* 跳到主要內容後 main 會取得焦點，但 main 本身不需要顯示焦點框 */
.ss-page:focus {
    outline: none;
}

/* 錨點跳轉時預留固定選單與本頁導覽的高度，避免標題被遮住 */
.ss-page [id],
#contact {
    scroll-margin-top: 130px;
}

/* 使用者點擊本頁錨點時平滑捲動；偏好減少動態者維持瞬間跳轉 */
@media (prefers-reduced-motion: no-preference) {
    html:has(.ss-page) {
        scroll-behavior: smooth;
    }
}

/* ---------- 共用：按鈕 ---------- */

.ss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px; /* 觸控目標至少 44px，方便手指點擊 */
    padding: 10px 26px;
    border: 2px solid transparent;
    border-radius: 999px; /* 膠囊形按鈕，與網站浮動按鈕風格一致 */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.ss-btn:hover {
    transform: translateY(-2px); /* 輕微上浮，提示可點擊 */
}

.ss-btn img {
    width: 20px;
    height: 20px;
}

/* LINE 按鈕：使用 LINE 官方綠色加深版，白字對比約 4.6:1 */
.ss-btn-line {
    background-color: #06833a;
    color: #fff;
}

.ss-btn-line:hover,
.ss-btn-line:focus {
    background-color: #056b30;
    color: #fff;
}

/* 淺色背景上的次要按鈕：靛藍框 */
.ss-btn-outline {
    border-color: var(--ss-indigo);
    background-color: #fff;
    color: var(--ss-indigo);
}

.ss-btn-outline:hover,
.ss-btn-outline:focus {
    background-color: var(--ss-indigo);
    color: #fff;
}

/* 深色背景上的次要按鈕：白框白字 */
.ss-btn-outline-light {
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
}

.ss-btn-outline-light:hover,
.ss-btn-outline-light:focus {
    background-color: #fff;
    color: var(--ss-ink);
}

/* 鍵盤焦點：加粗外框並與元素保留距離，淺色背景使用品牌藍 */
.ss-btn:focus-visible,
.ss-toc a:focus-visible,
.ss-related a:focus-visible,
.ss-compare:focus-visible,
.ss-faq-item summary:focus-visible {
    outline: 3px solid var(--ss-blue);
    outline-offset: 3px;
}

/* 深色的行動呼籲區改用亮黃色焦點框，藍色在深色底上看不清楚 */
.ss-cta .ss-btn:focus-visible {
    outline-color: #ffbf47;
}

/* ---------- 共用：區塊、標題與圖示 ---------- */

.ss-section {
    padding: 88px 0;
}

/* 交錯背景：讓長頁面的段落邊界更清楚 */
.ss-section-alt {
    background-color: var(--ss-bg-alt);
}

.ss-section-head {
    max-width: 780px;
    margin: 0 auto 56px;
    text-align: center;
}

/* 英文小標：增加視覺層次，左側短線引導視線到標題 */
.ss-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: var(--ss-indigo);
    font-family: Montserrat, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ss-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background-color: currentColor;
}

.ss-title {
    margin: 0 0 16px;
    color: var(--ss-ink);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
}

.ss-desc {
    margin: 0;
    color: var(--ss-muted);
    font-size: 1.0625rem;
}

/* 圓角方形圖示底：多個區塊共用 */
.ss-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-color: var(--ss-indigo-soft);
    color: var(--ss-indigo);
    font-size: 1.375rem;
}

/* 重點清單：以勾選圖示呈現，讓段落有可快速掃讀的摘要 */
.ss-check {
    margin: 16px 0 0;
    padding: 16px 0 0;
    border-top: 1px dashed var(--ss-line); /* 虛線區隔說明與重點，卡片層次更清楚 */
    list-style: none;
}

.ss-check li {
    position: relative;
    padding-left: 24px;
    color: var(--ss-text);
    font-size: 0.9375rem;
    line-height: 1.9;
}

.ss-check li::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    color: var(--ss-cyan);
    font-family: "Font Awesome 5 Free";
    font-size: 0.8125rem;
    font-weight: 900;
}

/* ---------- 首屏 ---------- */

.ss-hero {
    position: relative;
    padding: 72px 0 96px;
    overflow: hidden; /* 裁切背景裝飾，避免產生水平捲軸 */
    /* 點陣背景：以漸層繪製，呈現資料與系統感，不需額外圖檔 */
    background-color: #f7f8ff;
    background-image:
        radial-gradient(rgba(67, 56, 202, 0.12) 1px, transparent 1px),
        linear-gradient(160deg, #eef2ff 0%, #ffffff 55%, #ecfeff 100%);
    background-size: 22px 22px, 100% 100%;
}

.ss-hero-title {
    margin: 0 0 20px;
    color: var(--ss-ink);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 副標：漸層文字強調訴求，不支援 background-clip 的瀏覽器會退回靛藍色文字 */
.ss-hero-subtitle {
    display: block;
    margin-top: 8px;
    color: var(--ss-indigo);
    font-size: 1.5rem;
    font-weight: 700;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .ss-hero-subtitle {
        background: linear-gradient(90deg, var(--ss-indigo) 0%, var(--ss-cyan) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

.ss-hero-lead {
    max-width: 560px;
    margin: 0 0 32px;
    color: var(--ss-muted);
    font-size: 1.0625rem;
}

.ss-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

/* 核心數據：三欄等寬，以左側線條分隔 */
.ss-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 520px;
    margin: 0;
}

.ss-hero-stats div {
    display: flex;
    flex-direction: column-reverse; /* HTML 中說明（dt）在前符合語意，畫面上數值在上較醒目 */
    padding-left: 16px;
    border-left: 3px solid #c7d2fe;
}

.ss-hero-stats dt {
    color: var(--ss-muted);
    font-size: 0.875rem;
    font-weight: 400;
}

.ss-hero-stats dd {
    margin: 0;
    color: var(--ss-ink);
    font-family: Montserrat, "Noto Sans TC", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- 首屏：管理後台示意畫面 ---------- */

.ss-dash-wrap {
    max-width: 600px;
    margin: 0 auto;
}

/* 圖片四周含透明留白（供陰影與標籤使用），放大並往左偏移留白的比例，視窗本體才會貼齊欄寬 */
.ss-dash-wrap .ss-dash-img {
    display: block;
    width: 113.33%;
    max-width: none;
    height: auto;
    margin: -6.67% 0 -8% -6.67%;
}

.ss-dash-caption {
    margin-top: 30px; /* 與圖片保留距離，圖片下方的陰影才不會壓到文字 */
    color: #64748b; /* 與白色對比約 4.8:1 */
    font-size: 0.8125rem;
    text-align: center;
}

/* ---------- 本頁導覽 ---------- */

/* 捲動時固定在選單下方，長頁面隨時可跳轉段落 */
.ss-toc {
    position: sticky;
    top: 70px;
    z-index: 10;
    border-top: 1px solid var(--ss-line);
    border-bottom: 1px solid var(--ss-line);
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px); /* 半透明底搭配模糊，捲過內容時文字仍清楚 */
}

.ss-toc ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 10px 0;
    overflow-x: auto; /* 手機上項目過多時改為水平滑動，不換成多行佔用版面 */
    list-style: none;
    scrollbar-width: none; /* 隱藏捲軸保持版面乾淨，仍可滑動 */
}

.ss-toc ul::-webkit-scrollbar {
    display: none;
}

/* 以首尾 auto 外距置中：空間足夠時置中，項目溢出時外距歸零，不像 justify-content: center 會把第一項裁到捲動範圍外 */
.ss-toc li:first-child {
    margin-left: auto;
}

.ss-toc li:last-child {
    margin-right: auto;
}

.ss-toc a {
    display: block;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--ss-muted);
    font-size: 0.9375rem;
    white-space: nowrap; /* 避免項目文字被擠成兩行 */
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.ss-toc a:hover,
.ss-toc a:focus {
    background-color: var(--ss-indigo-soft);
    color: var(--ss-indigo);
}

/* ---------- 系統開發項目 ---------- */

.ss-solutions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.ss-solution {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    background-color: #fff;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.ss-solution:hover {
    border-color: #c7d2fe;
    box-shadow: var(--ss-shadow);
    transform: translateY(-4px);
}

/* 滑過時圖示改為實心底色，強化卡片焦點 */
.ss-solution .ss-icon {
    margin-bottom: 18px;
    transition: background-color 0.25s, color 0.25s;
}

.ss-solution:hover .ss-icon {
    background-color: var(--ss-indigo);
    color: #fff;
}

.ss-solution h3 {
    margin: 0 0 10px;
    color: var(--ss-ink);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
}

.ss-solution > p {
    flex: 1; /* 撐開說明文字區，讓同一列卡片的重點清單對齊 */
    margin: 0;
    color: var(--ss-muted);
    font-size: 0.9375rem;
    line-height: 1.75;
}

/* ---------- 導入時機 ---------- */

.ss-signals {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-signals li {
    padding: 28px 20px;
    border-radius: var(--ss-radius);
    background-color: #fff;
    text-align: center;
    box-shadow: 0 4px 16px rgba(30, 27, 75, 0.06);
}

.ss-signals .ss-icon {
    margin-bottom: 14px;
    border-radius: 50%; /* 圓形圖示與上方開發項目的方形區隔，表示不同性質的內容 */
    background-color: #ecfeff;
    color: var(--ss-cyan);
}

.ss-signals h3 {
    margin: 0 0 8px;
    color: var(--ss-ink);
    font-size: 1.0625rem;
    font-weight: 700;
}

.ss-signals p {
    margin: 0;
    color: var(--ss-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- 與套裝軟體比較 ---------- */

.ss-compare {
    max-width: 960px;
    margin: 0 auto;
    overflow-x: auto; /* 窄螢幕時表格可水平捲動，不撐破版面 */
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    background-color: #fff;
    box-shadow: var(--ss-shadow);
}

.ss-compare table {
    width: 100%;
    min-width: 560px; /* 低於此寬度改為捲動，避免每格文字被擠成直排 */
    border-collapse: collapse;
}

.ss-compare th,
.ss-compare td {
    padding: 16px 22px;
    border-bottom: 1px solid var(--ss-line);
    font-size: 0.9375rem;
    line-height: 1.7;
    text-align: left;
    vertical-align: top;
}

.ss-compare tbody tr:last-child th,
.ss-compare tbody tr:last-child td {
    border-bottom: 0;
}

.ss-compare thead th {
    background-color: var(--ss-bg-alt);
    color: var(--ss-ink);
    font-size: 1rem;
    font-weight: 700;
}

/* 客製化系統欄：表頭以主色強調，內容欄淡色底，引導視線 */
.ss-compare thead th.is-highlight {
    background-color: var(--ss-indigo);
    color: #fff;
}

.ss-compare td.is-highlight {
    background-color: #f5f7ff;
    color: var(--ss-ink);
    font-weight: 700;
}

.ss-compare tbody th {
    width: 22%;
    color: var(--ss-ink);
    font-weight: 700;
    white-space: nowrap;
}

.ss-compare td {
    color: var(--ss-muted);
}

/* ---------- 為什麼選擇微源 ---------- */

/* 每項優勢：圖文兩欄，偶數項以 ss-why-reverse 左右對調 */
.ss-why {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 56px;
    align-items: center;
    max-width: 1040px;
    margin: 0 auto;
}

.ss-why + .ss-why {
    margin-top: 48px;
}

.ss-why-reverse {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

.ss-why-reverse .ss-why-media {
    order: 2;
}

.ss-why-media img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
}

/* 序號：大字體淺色數字，作為視覺錨點 */
.ss-why-no {
    margin: 0 0 4px;
    color: #c7d2fe;
    font-family: Montserrat, sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.ss-why-body h2 {
    margin: 0 0 12px;
    color: var(--ss-ink);
    font-size: 1.625rem;
    font-weight: 700;
}

.ss-why-body > p:last-child {
    margin: 0;
    color: var(--ss-muted);
}

/* ---------- 開發流程 ---------- */

.ss-process {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ss-step; /* 以 CSS 計數器產生步驟編號，增減步驟時不需手動調整 */
}

.ss-process li {
    position: relative;
    padding: 30px 16px 24px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    background-color: #fff;
    text-align: center;
    counter-increment: ss-step;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ss-process li:hover {
    border-color: #c7d2fe;
    box-shadow: var(--ss-shadow);
}

/* 步驟序號：卡片上緣置中的小圓標 */
.ss-process li::before {
    content: counter(ss-step, decimal-leading-zero);
    position: absolute;
    top: -14px;
    left: 50%;
    padding: 2px 12px;
    border-radius: 999px;
    background-color: var(--ss-indigo);
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    transform: translateX(-50%);
}

.ss-process .ss-icon {
    margin-bottom: 14px;
}

.ss-process h3 {
    margin: 0 0 8px;
    color: var(--ss-ink);
    font-size: 1.125rem;
    font-weight: 700;
}

.ss-process p {
    margin: 0;
    color: var(--ss-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- 常見問題 ---------- */

.ss-faq {
    max-width: 860px;
    margin: 0 auto;
}

.ss-faq-item {
    margin-bottom: 14px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    background-color: #fff;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.ss-faq-item[open] {
    border-color: #c7d2fe;
    box-shadow: var(--ss-shadow);
}

.ss-faq-item summary {
    position: relative;
    padding: 20px 60px 20px 24px;
    border-radius: var(--ss-radius);
    cursor: pointer;
    list-style: none; /* 移除預設三角形，改用自訂圖示 */
}

/* Safari 需另外移除預設三角形 */
.ss-faq-item summary::-webkit-details-marker {
    display: none;
}

/* 自訂展開圖示：圓形底加號，展開時旋轉成叉號，視覺呈現開合狀態 */
.ss-faq-item summary::after {
    content: "\f067";
    position: absolute;
    top: 50%;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--ss-indigo-soft);
    color: var(--ss-indigo);
    font-family: "Font Awesome 5 Free";
    font-size: 0.8125rem;
    font-weight: 900;
    transform: translateY(-50%);
    transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.ss-faq-item[open] summary::after {
    background-color: var(--ss-indigo);
    color: #fff;
    transform: translateY(-50%) rotate(45deg);
}

.ss-faq-item summary h3 {
    display: inline; /* 標題在 summary 內維持行內，避免多出額外行距 */
    margin: 0;
    color: var(--ss-ink);
    font-size: 1.125rem;
    font-weight: 700;
}

.ss-faq-item p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--ss-muted);
}

/* ---------- 相關服務 ---------- */

.ss-related {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-related a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.ss-related a:hover,
.ss-related a:focus {
    border-color: #c7d2fe;
    box-shadow: var(--ss-shadow);
    transform: translateY(-3px);
}

.ss-related .ss-icon {
    margin-bottom: 16px;
}

.ss-related-title {
    margin-bottom: 6px;
    color: var(--ss-ink);
    font-size: 1.125rem;
    font-weight: 700;
}

/* 標題後方的箭頭：提示整張卡片可點擊 */
.ss-related-title::after {
    content: "\f061";
    margin-left: 8px;
    color: var(--ss-indigo);
    font-family: "Font Awesome 5 Free";
    font-size: 0.875rem;
    font-weight: 900;
    transition: margin-left 0.2s;
}

.ss-related a:hover .ss-related-title::after {
    margin-left: 12px;
}

.ss-related-text {
    color: var(--ss-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* ---------- 行動呼籲 ---------- */

.ss-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ss-ink) 0%, #312e81 60%, #155e75 100%); /* 靛藍漸層至青色，與首屏配色前後呼應 */
    color: #fff;
    text-align: center;
}

/* 背景大圓形裝飾，增加深色區塊的層次 */
.ss-cta::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -120px;
    width: 420px;
    height: 420px;
    border: 60px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.ss-cta .container {
    position: relative;
}

.ss-cta h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.ss-cta p {
    margin: 0 0 32px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1.0625rem;
}

.ss-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

/* ---------- 響應式：大型平板與小筆電 ---------- */

@media (max-width: 1199.98px) {
    /* 六欄過擠，改為三欄兩列 */
    .ss-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 36px; /* 預留步驟序號凸出卡片上緣的空間 */
    }

    /* 五欄過擠，改為三欄 */
    .ss-signals {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ss-hero-title {
        font-size: 2.5rem;
    }
}

/* ---------- 響應式：平板 ---------- */

@media (max-width: 991.98px) {
    .ss-section {
        padding: 64px 0;
    }

    .ss-hero {
        padding: 48px 0 64px;
        text-align: center;
    }

    .ss-hero .ss-eyebrow::before {
        display: none; /* 置中排版時左側短線會讓標題看起來偏移 */
    }

    .ss-hero-lead,
    .ss-hero-stats {
        margin-right: auto;
        margin-left: auto;
    }

    .ss-hero-actions {
        justify-content: center;
    }

    .ss-hero-stats div {
        padding-left: 0;
        border-left: 0;
    }

    /* 平板以下選單高度改變，導覽列不再固定，避免與展開的選單重疊 */
    .ss-toc {
        position: static;
    }

    .ss-solutions,
    .ss-signals,
    .ss-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 優勢改為上圖下文單欄排列 */
    .ss-why,
    .ss-why-reverse {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        text-align: center;
    }

    .ss-why-reverse .ss-why-media {
        order: 0;
    }

    .ss-why-media img {
        max-width: 360px;
    }

    .ss-why + .ss-why {
        margin-top: 56px;
    }
}

/* ---------- 響應式：手機 ---------- */

@media (max-width: 575.98px) {
    .ss-section {
        padding: 52px 0;
    }

    .ss-title,
    .ss-cta h2 {
        font-size: 1.5rem;
    }

    .ss-hero-title {
        font-size: 2rem;
    }

    .ss-hero-subtitle {
        font-size: 1.125rem;
    }

    .ss-hero-stats dd {
        font-size: 1.25rem;
    }

    /* 手機按鈕滿版，觸控更容易 */
    .ss-hero-actions .ss-btn,
    .ss-cta-actions .ss-btn {
        width: 100%;
    }

    .ss-solutions,
    .ss-signals,
    .ss-process,
    .ss-related {
        grid-template-columns: minmax(0, 1fr);
    }

    .ss-why-no {
        font-size: 2.25rem;
    }

    .ss-why-body h2 {
        font-size: 1.375rem;
    }

    /* 手機取消表格最小寬度，三欄直接排進畫面：捲動式表格在手機上不易發現第三欄，比較的意義會消失 */
    .ss-compare table {
        min-width: 0;
    }

    .ss-compare th,
    .ss-compare td {
        padding: 12px 10px;
        font-size: 0.875rem;
    }

    .ss-compare tbody th {
        width: auto;
        white-space: normal; /* 比較項目允許換行，把寬度留給內容欄 */
    }
}