/* ============================================================
   服務內頁 service_web_page + service_app_page（.sw-* 共用，聯集保序）
   來源 style.css 行 6314-7647（純搬移，內容未改）

   MARK: Service Web Page (service_web_page.php) - 網頁設計內頁
   ============================================================ */

/* hero 標題分隔符（細直線視覺） */
.sw-title-sep {
  display: inline-block;
  margin: 0 14px;
  color: var(--c-brand-hover);
  font-weight: 400;
}

/* hero 主打標語（breadcrumb 下方）：「全客製網站設計」深色粗體 + 其餘灰字 */
.sw-hero-headline {
  margin: clamp(20px, 8.33vw, 160px) 0 0;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 1px;
  color: var(--c-grey-dark);
}

.sw-hero-headline-key {
  font-weight: 700;
  color: var(--c-text-2);
}

/* 方案介紹頁變體：主打標語整行改橘色強調（關鍵字維持粗體；對齊 Figma） */
.sw-hero-headline--brand,
.sw-hero-headline--brand .sw-hero-headline-key {
  color: var(--c-brand);
}

/* 描述移入 copy 區塊後與標語的間距 */
#sw-hero .news-hero-desc {
  margin-top: 20px;
}

/* ---- Hero 右側 UI/UX 玻璃擬物插圖（sv-web-hero）----
   覆寫共用 .news-hero-img：正方形插圖需限制尺寸並靠右置中，
   對齊 Figma（插圖約佔 40% 寬、貼齊右側並落在橘色光暈上） */
/* 合併圖（插圖＋光暈）垂直置中於 hero，避免貼齊上方與主選單重疊 */
#sw-hero .news-hero-img {
  top: 60%;
  bottom: auto;
  right: clamp(0px, 3vw, 20px);
  transform: translateY(-50%);
  width: clamp(380px, 42vw, 868px);
  height: auto;
  z-index: 2;
}
@media (max-width: 1199px) {
  #sw-hero .news-hero-img {
    top: 45%;
  }
}

#sw-hero.sg-hero .news-hero-img {
  top: 55%;
  width: clamp(289px, 60vw, 1136px);
  right: clamp(-20px, 3vw, 10px);
}

#sw-hero.sp-hero .news-hero-img {
  top: 55%;
  width: clamp(217px, 60vw, 765px);
  right: clamp(20px, 8vw, 200px);
}
/* 平板以下：插圖回到右下當淡色襯底，讓上方大標與麵包屑維持清晰 */
@media (max-width: 991.98px) {
  .sw-title-sep {
    margin: 0 8px;
  }
  #sw-hero .news-hero-img {
    top: 12%;
    right: -10%;
    transform: none;
    width: clamp(300px, 70vw, 520px);
  }
  #sw-hero.sg-hero .news-hero-img {
    top: 30%;
    right: -10%;
  }
  #sw-hero.sp-hero .news-hero-img {
    top: 20%;
    right: 0;
  }
  .sw-hero-headline {
    margin: 24px 0 0;
  }
}

/* ---- Hero 淺底版面（斜紋底紋 + 右側橘色光暈 + 大標題/橘色副標）----
   背景改為淺色斜紋底圖 sw-hero-bg.png，橘色光暈以 CSS 製作並置於插圖後方，
   文案順序：大標題 → UI/UX 副標 → 麵包屑 → 主打標語 → 描述（對齊 Figma） */
#sw-hero {
  background: url(../../img/sw-hero-bg.png) top center no-repeat;
  background-size: contain;
  overflow: hidden;
  padding: 220px 0 0;
}

@media (max-width: 1199px) {
  #sw-hero {
    padding: 120px 0 0;
  }
}

@media (max-width: 575px) {
  #sw-hero {
    padding: 80px 0 0;
  }
}

/* 文案區置於最上層，避免被光暈/插圖覆蓋 */
#sw-hero .container {
  position: relative;
  z-index: 5;
}

/* 主標題：頁面大標（深色，64px 級距） */
#sw-hero .news-hero-eyebrow.sw-hero-h1 {
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1.1;
  color: #231815;
  letter-spacing: 1px;
}

/* 副標：橘色 UI/UX Design ＋ 品牌徽章圖示 */
#sw-hero .news-hero-title.sw-hero-uiux {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: 0.5px;
  color: var(--c-brand);
}

#sw-hero .news-hero-title.sw-hero-uiux br {
  display: none;
}
#sw-hero .news-breadcrumb {
  margin-top: 20px;
}
#sw-hero.sg-hero .news-breadcrumb {
  margin-top: 24px;
}
#sw-hero.sp-hero .news-breadcrumb {
  margin-top: 24px;
}

@media (max-width: 991.98px) {
  #sw-hero .news-breadcrumb,
  #sw-hero.sg-hero .news-breadcrumb,
  #sw-hero.sp-hero .news-breadcrumb {
    margin-top: 150px;
  }

  #sw-hero .news-hero-title.sw-hero-uiux {
    margin: 6px 0 0;
    gap: 7px;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  #sw-hero .news-hero-title.sw-hero-uiux br {
    display: block;
  }
}
/* 主打標語：關鍵字改橘色、其餘深灰（對齊 Figma） */
#sw-hero .sw-hero-headline {
  color: #222;
  font-size: clamp(16px, 1.8vw, 24px);
}

#sw-hero .sw-hero-headline-key {
  color: var(--c-brand);
}

/* 描述文：18px / 1.6（對齊 Figma） */
#sw-hero .news-hero-desc {
  font-size: 18px;
  line-height: 1.6;
}

/* 平板以下：光暈移至右下，與插圖一致 */
@media (max-width: 991.98px) {
  #sw-hero .sw-hero-headline-val {
    display: block;
  }
}
@media (max-width: 575px) {
  #sw-hero {
    background: url(../../img/sw-hero-bg-mobile.png) top center no-repeat;
    background-size: contain;
  }
  #sw-hero .news-hero-desc {
    font-size: 14px;
  }
}

/* ---- 全客製網站設計核心 ---- */
.sw-intro {
  padding: 0px 0 0px;
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: -320px;
}

.sw-intro-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-brand);
  margin: 0 0 24px;
  letter-spacing: 1px;
}

.sw-intro-desc {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-black);
  margin: 0;
}
/* 轉換力金字塔示意圖：置中、限制最大寬度（含倒影） */
.sw-intro-pyramid {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 70px auto 0;
}
@media (max-width: 991px) {
  .sw-intro {
    margin-top: 139px;
    margin-bottom: -200px;
    overflow: hidden;
  }
  .sw-intro-pyramid_wrap {
    display: flex;
    justify-content: center;
  }
  .sw-intro-pyramid {
    width: calc(100% + 60px);
    margin: 26px auto 0;
  }
}

@media (max-width: 767px)  {
  .sw-intro {
    margin-top: 80px;
  }
}

@media (max-width: 575px) {
  .sw-intro-pyramid {
    display: none;
  }
}

.sw-intro-pyramid-mobile {
  display: none;
}

@media (max-width: 575px) {
  .sw-intro-pyramid-mobile {
    display: block;
    width: 100%;
    height: auto;
    margin: 15px auto -30px;
  }
}

/* ---- 4 卡 + 右側膠囊清單 ---- */
.sw-features {
  padding: 200px 0 200px;
  position: relative;
  z-index: 0;
}

.sw-features::before {
  content: '';
  position: absolute;
  top: 67%;
  left: 0;
  width: 100%;
  height: 15.625vw;
  background-image: url(../../img/services-bg.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 2;
}

.sw-features::after {
  content: '';
  background: url('../../img/sw_features_bg.png') center center/cover no-repeat;
  position: absolute;
  inset: 0 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sw-features-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}

.sw-feat-card {
  padding: 40px 40px 28px 50px;
  background: var(--c-bg-white);
  border-radius: 40px;
  box-shadow: 0 4px 6.55px rgba(0, 0, 0, 0.25);
}

.sw-feat-title {
  font-size: 36px;
  font-weight: 400;
  color: var(--c-brand);
  margin: 0 0 24px;
  line-height: 1.5;
}

/* RWD 卡標題：分類關鍵字橘色 + 次行黑字 */
.sw-feat-title--rwd {
  color: var(--c-text-2);
}

.sw-feat-title-key {
  color: var(--c-brand);
}

.sw-feat-desc {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text-2);
  margin: 0;
}
@media (max-width: 991px) {
  .sw-features {
    padding-bottom: 176px;
  }
  .sw-features-grid {
    gap: 16px;
  }
  .sw-feat-card {
    padding: 40px 22px;
    box-shadow: 0 4px 13px rgba(0, 0, 0, 0.25);
  }
  .sw-feat-title {
    font-size: var(--fs-base);
    margin-bottom: 24px;
  }
  .sw-feat-desc {
    font-size: var(--fs-sm);
  }
}
@media (max-width: 575px) {
  .sw-features::after {
    /* content: '';
    background: url('../../img/sw_features_bg_mobile.png') center center/contain no-repeat;
    position: absolute;
    inset: 0 0;
    width: 100%;
    height: 100%;
    z-index: 1; */
  }
}
/* 右下成效膠囊（白色霧面 + 橘色圓點 + 階梯排列） */
.sw-pill-list {
  list-style: none;
  margin: 0;
  padding: 24px 0 24px 45px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.sw-pill {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  align-self: flex-start;
  height: 70px;
  padding: 13px 95px 13px 17px;
  border-radius: 84px;

  /* background: rgba(255, 255, 255, 0.1);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.18); */

  background: linear-gradient(180deg, #333333 0%, #292929 48%, #242424 100%);

  border: 1px solid rgba(255, 255, 255, 0.28);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.35);

  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);

  color: var(--c-text-white);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}

.sw-pill-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* background: linear-gradient(135deg, var(--c-brand-hover), var(--c-brand));
  box-shadow: 0 4px 12px rgba(243, 152, 0, 0.4); */
  background: var(--c-brand);
  flex-shrink: 0;
}

.sw-pill--indent {
  margin-left: 80px;
}

.sw-pill--indent2 {
  margin-left: 160px;
}
@media (max-width: 1199px) {
  .sw-pill {
    padding: 13px 48px 13px 17px;
  }
}
@media (max-width: 991px) {
  .sw-pill-list {
    align-items: center;
    padding: 16px 0;
    gap: 20px;
  }
  .sw-pill {
    gap: 10px;
    align-self: center;
    padding: 15px 48px 15px 17px;
    font-size: var(--fs-base);
  }
  .sw-pill:last-child {
    gap: 20px;
    padding-right: 70px;
  }
  .sw-pill-dot {
    width: 30px;
    height: 30px;
  }
}
/* ---- 裝置展示帶（虛線外框） ---- */
.sw-deviceband {
  padding: 0 0 90px;
  background: var(--c-bg-white);
}

.sw-deviceband-box {
  border: 1.5px dashed var(--c-input-border);
  border-radius: 32px;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
}

.sw-deviceband-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- SEO 友善架構（淺色帶 + 霧面白卡） ---- */
.sw-seo {
  position: relative;
  padding: 90px 0 60px;
  background: var(--c-bg-page);
  color: var(--c-text-2);
  overflow: hidden;
}

.sw-seo-head {
  text-align: center;
  margin-bottom: 64px;
}

.sw-seo-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--c-text-black);
  margin: 0 0 24px;
  letter-spacing: 1px;
}

.sw-seo-title .accent {
  color: var(--c-brand);
}

.sw-seo-sub {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-text-2);
  margin: 0;
}

.sw-seo-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 66px;
  max-width: 1466px;
  margin: 0 auto;
}

.sw-seo-card {
  padding: 32px 36px 56px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--c-on-dark);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
}

.sw-seo-card-title {
  font-size: 36px;
  font-weight: 400;
  color: var(--c-text-2);
  margin: 0 0 21px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--c-placeholder);
}

.sw-seo-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sw-seo-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  color: var(--c-text-black);
  letter-spacing: -0.38px;
}

.sw-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-brand);
  flex-shrink: 0;
}

.sw-seo-foot {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-text-black);
  margin: 0;
}
@media (max-width: 991px) {
  .sw-seo {
    padding-top: 5px;
    padding-bottom: 80px;
  }
  .sw-seo-head {
    margin-bottom: 33px;
  }
  .sw-seo-title {
    font-size: var(--fs-lg);
  }
  .sw-seo-sub {
    font-size: var(--fs-sm);
  }
  .sw-seo-cards {
    gap: 16px;
  }
  .sw-seo-card {
    padding: 32px 36px;
  }
  .sw-seo-card-title {
    font-size: var(--fs-lg);
  }
  .sw-seo-list {
    margin-bottom: 18px;
  }
  .sw-seo-list li {
    font-size: 18px;
  }
}
/* ---- UX / UI 雙卡 + 中央使用者體驗 ---- */
.sw-ux {
  padding: 90px 0 150px;
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
}
/* 波浪本體 */
.sw-ux::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}
@media (max-width: 991px) {
  .sw-ux {
    padding: 0 0 50px;
  }
  .sw-ux::after {
    height: 53%;
  }
}
@media (max-width: 575px) {
  .sw-ux::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
}
.sw-ux-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 55px;
  margin-bottom: 66px;
  background: linear-gradient(170deg, #191919 75%, #8d5800, var(--c-yellow));
  border-radius: 220px;
  position: relative;
  padding: 0 100px;
}
.sw-ux-row::after {
  content: '';
  position: absolute;
  top: 29px;
  left: 0;
  z-index: -1;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
  background: linear-gradient(to right, #d4d4d4, #fff 36%);
  border-radius: 220px;
  width: 100%;
  height: 100%;
}
@media (max-width: 1199px) {
  .sw-ux-row {
    gap: 40px;
    padding: 0 50px;
  }
}
@media (max-width: 991px) {
  .sw-ux-row {
    max-width: 390px;
    margin: 0 auto 45px;
    padding: 40px 0 97px;
  }
  .sw-ux-row::after {
  }
}
.sw-ux-tile {
  padding: 20px 36px 70px;
  text-align: center;
}

.sw-ux-icon {
  width: 120px;
  height: 110px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sw-ux-icon img {
  max-width: 100%;
  max-height: 100%;
}

.sw-ux-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text-white);
  margin: 0 0 10px;
}

.sw-ux-desc {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-white);
  margin: 0;
}
@media (max-width: 991px) {
  .sw-ux-tile {
    padding: 0 50px;
  }
  .sw-ux-icon {
    height: 82px;
  }
  .sw-ux-title {
    font-size: var(--fs-lg);
  }
}
/* 中央圓形「使用者體驗」 */
.sw-ux-center {
  position: relative;
  z-index: 0;
  width: 350px;
  height: 350px;
  flex-shrink: 0;
}
.sw-ux-center::after {
  content: '';
  position: absolute;
  inset: -40px -40px;
  z-index: -1;
  border-radius: 50%;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  background: rgba(217, 217, 217, 0.18);
  backdrop-filter: blur(5px);
}
.sw-ux-halo {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(237, 109, 31, 0.18) 0%,
    rgba(237, 109, 31, 0) 70%
  );
  pointer-events: none;
}

.sw-ux-circle {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--c-bg-white);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--c-on-dark);
  box-shadow: 0 18px 40px rgba(237, 109, 31, 0.3);
}

.sw-ux-center-icon {
  width: 128px;
  height: 128px;
  margin-bottom: 27px;
}

.sw-ux-center-text {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0;
  color: var(--c-text-black);
}
@media (max-width: 991px) {
  .sw-ux-center::after {
    inset: -25px -25px;
  }
  .sw-ux-center-icon {
    width: 65px;
    height: 65px;
    margin-bottom: 18px;
  }
  .sw-ux-center-text {
    font-size: var(--fs-sm);
  }
}

.sw-ux-arrow {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
}
.sw-ux-arrow img {
  width: 100%;
  max-width: 88px;
  object-fit: contain;
}
/* 網站轉換率優化（寬卡） */
.sw-conv-card {
  max-width: 850px;
  margin: 0 auto;
  padding: 50px 90px;
  background: linear-gradient(35deg, #d4d4d4, #fff 36%);
  border-radius: 50px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: 2px solid var(--c-bg-white);
}

.sw-conv-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--c-brand);
  margin: 0 0 24px;
}

.sw-conv-desc {
  font-size: var(--fs-md);
  line-height: 1.85;
  color: var(--c-text-black);
  margin: 0;
}
@media (max-width: 991px) {
  .sw-ux-arrow {
    margin-bottom: 18px;
  }

  .sw-conv-card {
    padding: 55px 45px;
  }

  .sw-conv-title {
    font-size: var(--fs-lg);
  }

  .sw-conv-desc {
    font-size: var(--fs-sm);
  }
}

/* ============ RWD ============ */

@media (max-width: 991.98px) {
  .sw-features-grid {
    grid-template-columns: 1fr;
  }

  .sw-feat-card--wide {
    grid-column: auto;
  }

  .sw-pill--indent,
  .sw-pill--indent2 {
    margin-left: 0;
  }

  .sw-seo-cards {
    grid-template-columns: 1fr;
  }

  .sw-ux-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sw-ux-center {
    margin: 0 auto;
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 575.98px) {
  .sw-intro-title,
  .sw-seo-title {
    font-size: var(--fs-lg);
  }
  .sw-feat-card,
  .sw-seo-card {
    padding: 28px 24px;
  }
  .sw-deviceband-box {
    padding: 24px;
    min-height: 220px;
    border-radius: 24px;
  }
}

/* ============================================================
   MARK: Service App Page (service_app_page.php) - 程式設計與APP開發
   ============================================================ */

/* ---- HERO 支援 pills 列 ---- */
.sw-hero-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.sw-hero-pills-prefix {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 4px;
}

.sw-hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid var(--c-brand);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  backdrop-filter: blur(6px);
}

/* ---- 客製化系統開發（左裝飾橘球 + 右 3 列項目） ---- */
.sw-app-intro {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
}

.sw-app-intro-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}

.sw-app-intro-deco {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sw-app-intro-deco-icon1 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

#sw-app-intro-deco-icon2 {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -30%);
  z-index: -1;
  width: 280px;
}

#sw-app-intro-deco-icon3 {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-25%, 45%);
}

#sw-app-intro-deco-icon4 {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (max-width: 1199px) {
  #sw-app-intro-deco-icon1 {
    width: 100px;
  }

  #sw-app-intro-deco-icon2 {
    width: 180px;
  }

  #sw-app-intro-deco-icon3 {
    width: 200px;
  }

  #sw-app-intro-deco-icon4 {
    transform: translate(5%, 65%);
  }
}

@media (max-width: 991px) {
  #sw-app-intro-deco-icon1 {
    transform: translateX(-25%);
  }

  #sw-app-intro-deco-icon2 {
    transform: translate(-25%, -15%);
  }

  #sw-app-intro-deco-icon3 {
    transform: translate(35%, 35%);
  }

  #sw-app-intro-deco-icon4 {
    transform: translate(-100%, 25%);
  }
}

@media (max-width: 767px) {
  #sw-app-intro-deco-icon1 {
    transform: translateX(-50%);
  }

  #sw-app-intro-deco-icon2 {
    transform: translate(25%, -15%);
  }

  #sw-app-intro-deco-icon3 {
    transform: translate(5%, 30%);
  }

  #sw-app-intro-deco-icon4 {
    transform: translate(-80%, 25%);
  }
}

@media (max-width: 575px) {
  #sw-app-intro-deco-icon1 {
    transform: translateX(-70%);
  }

  #sw-app-intro-deco-icon2 {
    transform: translate(45%, -15%);
  }

  #sw-app-intro-deco-icon3 {
    transform: translate(-15%, 50%);
  }

  #sw-app-intro-deco-icon4 {
    transform: translate(-20%, 65%);
  }
}

/* 左側團隊照片（Figma 為圓形遮罩 PNG，已含透明邊角） */
.sw-app-intro-photo {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
}

.sw-app-intro-copy {
  padding-left: 16px;
}

.sw-app-intro-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text-2);
  margin: 0 0 16px;
  letter-spacing: 1px;
}

.sw-app-intro-title span {
  color: var(--c-brand);
}

.sw-app-intro-sub {
  font-size: var(--fs-caption);
  line-height: 1.85;
  color: var(--c-divider);
  margin: 0 0 32px;
}

.sw-bullet-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sw-bullet-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 24px;
  background: var(--c-bg-white);
  border: 1px solid var(--c-bg-page);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  background: linear-gradient(
    -33deg,
    var(--c-brand) 0%,
    rgba(255, 255, 255, 0) 6%
  );
}

.sw-bullet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sw-bullet-body strong {
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  font-weight: 700;
  transition: all 0.35s ease-in-out;
}

.sw-bullet-row:hover .sw-bullet-body strong {
  color: var(--c-brand-hover);
}

.sw-bullet-body span {
  font-size: var(--fs-xs);
  color: var(--c-divider);
  line-height: 1.7;
}

/* ---- 跨平台應用｜3 環圈圖示 ---- */
.sw-app-cross {
  padding: 60px 0;
}

@media (max-width: 575px) {
  .sw-app-cross {
    padding: 60px 0 0;
  }
}

.sw-app-cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.sw-app-cross-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-text-2);
  margin: 0 0 18px;
  letter-spacing: 1px;
}

.sw-app-cross-title span {
  color: var(--c-brand);
}

.sw-app-cross-sub {
  font-size: var(--fs-caption);
  line-height: 1.85;
  color: var(--c-divider);
  margin: 0 0 24px;
}

.sw-app-cross-card {
  padding: 24px 28px;
  border-radius: 12px;
  font-size: var(--fs-xs);
  line-height: 1.85;
  color: var(--c-brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.sw-app-rings {
  text-align: center;
}

/* 3 個 ring：top 置中靠上，left/right 在下方左右側 */
#sw-app-rings-img {
  width: 100%;
  object-fit: contain;
  max-width: 480px;
  display: inline-block;
}

/* ---- 4 卡裝置帶（上淺→中深→下淺漸層帶；圓角圖 + 白字標題） ---- */
.sw-app-band {
  position: relative;
  padding: 28.3854vw 0 19.0625vw;
  color: var(--c-on-dark);
  background: var(--c-bg-page);
}

.sw-app-band::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 28.3854vw;
  background-image: url(../../img/sw-app-band-before.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.sw-app-band::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 19.0625vw;
  background-color: var(--c-bg-page);
  background-image: url(../../img/sw-app-band-after.png);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
}

.sw-process-block {
  background: #191919;
}

.sw-ring--right {
  top: 240px;
  right: 0;
}

/* 上方說明（落在淺色處，灰字） */
.sw-app-band-intro {
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 56px;
  color: var(--c-placeholder);
}

@media (max-width: 575.98px) {
  .sw-app-band-intro {
    font-size: var(--fs-sm);
  }
}

/* 下方說明（落在深色處，白字） */
.sw-app-band-outro {
  max-width: 780px;
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 56px auto 0;
  color: var(--c-on-dark);
}

.sw-app-band-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 62px;
  max-width: 1480px;
  margin: 0 auto;
}

/* 卡片：純圖 + 下方白字，無白底卡 */
.sw-app-band-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.sw-app-band-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
}

.sw-app-band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sw-app-band-title {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-on-dark);
  margin: 0;
  text-align: center;
  line-height: 1.5;
}

.sw-app-band-title small {
  display: block;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--c-on-dark);
}

/* ---- 資安與維護（淺底 + 玻璃卡：橘框膠囊 2 欄 + 右圖） ---- */
.sw-secure {
  position: relative;
  padding: 90px 0 110px;
  color: var(--c-text-2);
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
}
/* 波浪本體 */
.sw-secure::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}

.sw-secure-head {
  text-align: center;
  margin-bottom: 40px;
}

.sw-secure-title {
  font-size: 36px;
  font-weight: 600;
  color: var(--c-text-2);
  margin: 0 0 20px;
  letter-spacing: 1px;
}

.sw-secure-title .accent {
  color: var(--c-brand);
}

.sw-secure-sub {
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-text-2);
  margin: 0;
}

@media (max-width: 575.98px) {
  .sw-secure-sub {
    font-size: var(--fs-sm);
  }
}

/* tabs + card 疊放容器 */
.sw-secure-panel {
  position: relative;
  max-width: 1222px;
  margin: 48px auto 0;
}

.sw-secure-tabs {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 1);
  border-radius: 71px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 2;
}

.sw-secure-tab {
  appearance: none;
  width: 365px;
  max-width: 40%;
  height: 54px;
  border: 0.5px solid var(--c-grey-mid);
  border-radius: 40px;
  background: var(--c-bg-white);
  color: var(--c-grey-dark);
  font-size: var(--fs-md);
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sw-secure-tab.is-active {
  background: linear-gradient(
    to right,
    var(--c-brand-hover) 0%,
    var(--c-brand) 35.58%
  );
  border-color: transparent;
  color: var(--c-on-dark);
  font-weight: 500;
}

.sw-secure-tab:hover:not(.is-active) {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.sw-secure-card {
  display: grid;
  grid-template-columns: 1fr 446px;
  gap: 40px;
  align-items: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--c-on-dark);
  border-radius: 0 0 20px 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.12);
  padding: 56px 48px 48px;
  margin-top: -32px;
}

/* 隱藏未啟用的切換面板（覆寫 display:grid，使 hidden 屬性生效） */
.sw-secure-card[hidden] {
  display: none;
}

.sw-secure-card-title {
  font-size: var(--fs-xl);
  font-weight: 400;
  color: var(--c-brand);
  margin: 0 0 14px;
}

.sw-secure-card-sub {
  font-size: var(--fs-sm);
  color: var(--c-bg-black);
  margin: 0 0 28px;
}

/* 橘色外框膠囊（2 欄、內容寬度） */
.sw-secure-pills {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 16px;
  justify-content: start;
}

.sw-secure-pill {
  display: inline-flex;
  align-items: center;
  padding: 0 21px;
  border-radius: 53px;
  font-size: var(--fs-base);
  color: var(--c-text-2);
  letter-spacing: -0.38px;
  white-space: nowrap;
  position: relative;
}

.sw-secure-pill::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  width: 10px;
  height: 10px;
  background-color: var(--c-brand);
  border-radius: 50%;
}

.sw-secure-card-img {
  align-self: stretch;
  display: flex;
}

.sw-secure-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 30px;
}

.sw-secure-outro {
  text-align: center;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--c-brand);
  margin: 48px 0 0;
}

/* ============ RWD ============ */
@media (max-width: 1199.98px) {
  .sw-app-band-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .sw-hero-pills {
    gap: 8px;
  }

  .sw-hero-pill {
    font-size: var(--fs-xs);
    padding: 6px 14px;
  }

  .sw-app-intro-layout {
    grid-template-columns: 1fr;
    gap: 96px;
  }

  .sw-app-cross-grid {
    grid-template-columns: 1fr;
  }

  .sw-app-intro-deco {
    order: -1;
  }

  .sw-app-rings {
    height: 540px;
    max-width: 480px;
    margin: 0 auto;
  }

  .sw-secure-card {
    grid-template-columns: 1fr;
    padding: 44px 28px 32px;
  }

  .sw-secure-card-img {
    order: -1;
    min-height: 240px;
  }

  .sw-secure-pills {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .sw-secure-pill {
    width: 100%;
  }

  .sw-secure-tab {
    max-width: 50%;
    font-size: var(--fs-sm);
  }
}

@media (max-width: 575.98px) {
  .sw-secure {
    padding: 90px 0 50px;
  }
  .sw-secure::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
  .sw-hero-pills-prefix {
    width: 100%;
    margin-bottom: 4px;
  }

  .sw-app-intro-title,
  .sw-app-cross-title,
  .sw-secure-title {
    font-size: var(--fs-lg);
  }

  .sw-app-band-grid {
    grid-template-columns: 1fr;
  }

  .sw-app-rings {
    height: 480px;
  }

  .sw-ring {
    width: 160px;
  }

  .sw-ring-circle {
    width: 160px;
    height: 160px;
    border-width: 6px;
  }

  .sw-ring-circle img {
    width: 70px;
    height: 70px;
  }

  .sw-ring--left {
    top: 200px;
  }

  .sw-ring--right {
    top: 200px;
  }
}

/* ============================================================
   MARK: Service Graphic Page (service_graphic_page.php) - 平面設計
   ============================================================ */

/* ---- LOGO 設計區塊（分類標籤 + 左圖牆右說明） ---- */
.sg-logo {
  padding: 80px 0 200px;
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
}
/* 波浪本體 */
.sg-logo::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}
/* 平面設計分類標籤列（懸浮膠囊列：半透明白底 + 圓角 + 陰影） */
.sg-cat-tabs {
  margin-bottom: 37px;
  padding: 13px 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 71px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

/* 內層橫向捲動軌道：永遠一列、超出可捲動、可滑鼠拖曳 */
.sg-cat-tabs-track {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-inline: 24px;
  user-select: none;
  /* 左右漸淡：iOS 不顯示滑桿，改用遮罩漸層提示尚有可捲動內容。
     JS（refresh_draggable / scroll）依捲動位置切換 is-at-start / is-at-end 關閉該側（不加動畫） */
  --sg-fade-left: 28px;
  --sg-fade-right: 28px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sg-fade-left),
    #000 calc(100% - var(--sg-fade-right)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--sg-fade-left),
    #000 calc(100% - var(--sg-fade-right)),
    transparent 100%
  );
}

/* 已捲到最左：取消左側漸淡 */
.sg-cat-tabs-track.is-at-start {
  --sg-fade-left: 0px;
}

/* 已捲到最右：取消右側漸淡 */
.sg-cat-tabs-track.is-at-end {
  --sg-fade-right: 0px;
}

.sg-cat-tabs-track::-webkit-scrollbar {
  display: none;
}

/* 內容超出可拖曳時：軌道顯示抓取游標 */
.sg-cat-tabs-track.is-draggable {
  cursor: grab;
}

/* 軌道拖曳進行中：顯示抓住游標 */
.sg-cat-tabs-track.is-grabbing {
  cursor: grabbing;
}

/* 捲動指示條（依 Figma：4px 圓角淺灰）：絕對定位於膠囊框內底部，不佔版面流、不影響標籤上下置中；預設隱藏 */
.sg-cat-tabs-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 5px;
  height: 4px;
  display: none;
}
@media (max-width: 991.98px) {
  /* 對齊手機版膠囊框左右內距（padding 14px） */
  .sg-cat-tabs-bar {
    left: 14px;
    right: 14px;
  }
}
@media (max-width: 575px) {
  .sg-logo {
    padding: 80px 0 90px;
  }
  .sg-logo::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
}
/* 軌道內容超出（track 帶 is-draggable）時，顯示其後方的指示條 */
.sg-cat-tabs-track.is-draggable ~ .sg-cat-tabs-bar {
  display: block;
}

/* 指示條把手：寬度與位置由 JS 依捲動比例即時計算，可直接拖曳 */
.sg-cat-tabs-thumb {
  position: absolute;
  top: 0;
  left: 10px;
  height: 4px;
  min-width: 24px;
  border-radius: 2px;
  background: #c7c7c7;
  cursor: grab;
}

/* 把手拖曳進行中：顯示抓住游標 */
.sg-cat-tabs-thumb.is-grabbing {
  cursor: grabbing;
}

/* 單顆分類膠囊（未選：灰框白底；選中：橘色漸層白字） */
.sg-cat-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 8px 21px;
  border: 1.5px solid #c3c3c3;
  border-radius: 53px;
  background: var(--c-bg-white);
  color: #222;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.342px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sg-cat-tab:hover:not(.is-active) {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.sg-cat-tab.is-active {
  background: linear-gradient(
    to right,
    var(--c-brand-hover) 60%,
    var(--c-yellow)
  );
  border-color: var(--c-brand);
  color: var(--c-on-dark);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.38px;
}

/* 左圖牆 + 右說明（外框白邊 + 陰影 + 角落橘色漸層卡片） */
.sg-logo-layout {
  display: grid;
  grid-template-columns: minmax(0, 494px) 1fr;
  gap: 62px;
  padding: 28px 76px 23px 28px;
  border: 1px solid var(--c-bg-white);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(
      -63deg,
      rgba(243, 152, 0, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 10.709%
    ),
    var(--c-bg-white);
}
.sg-logo-layout.sg-cat--poster {
  padding: 52px 42px 40px 4px;
}
.sg-logo-layout.sg-cat--card {
  padding: 52px 42px 40px 4px;
}
.sg-logo-layout.sg-cat--corp {
  padding: 30px 25px;
}
.sg-logo-layout.sg-cat--package {
  padding: 30px 25px 25px;
}
.sg-logo-layout.sg-cat--largeformat {
  padding: 30px 25px 25px;
}
.sg-logo-layout.sg-cat--cis {
  padding: 30px 25px;
}

.sg-logo-wall img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.sg-logo-copy {
  margin-top: 24px;
}
.sg-logo-title {
  font-size: 36px;
  font-weight: 400;
  color: var(--c-text-2);
  margin: 0 0 24px;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

/* 標題分類關鍵字（｜前段）橘色強調 */
.sg-logo-title-key {
  color: var(--c-brand);
  font-weight: 500;
}

.sg-logo-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-2);
  margin: 0 0 32px;
}

.sg-logo-subtitle {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-text-2);
  margin: 0 0 16px;
}

/* 服務內容清單（2 欄、橘色外框膠囊） */
.sg-logo-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 32px;
  justify-content: start;
}

.sg-logo-list li {
  display: inline-flex;
  width: max-content;
  align-items: center;
  height: 44px;
  padding: 0px 21px;
  border-radius: 53px;
  font-size: var(--fs-base);
  color: var(--c-text-2);
  line-height: 1.5;
  letter-spacing: -0.342px;
  white-space: nowrap;
  position: relative;
}

.sg-logo-list li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--c-brand);
  border-radius: 50%;
}

.sg-logo-foot {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-brand);
  margin: 0;
}
.sg-logo-foot span {
  display: block;
}
/* 案例與方案改用全站統一的 .sw-pricing-split（定義於上方網頁設計頁區塊） */

/* ============ RWD ============ */
@media (max-width: 991.98px) {
  .sg-logo-layout {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 18px 16px 27px;
  }
  .sg-logo-layout.sg-cat--poster,
  .sg-logo-layout.sg-cat--card,
  .sg-logo-layout.sg-cat--corp,
  .sg-logo-layout.sg-cat--package,
  .sg-logo-layout.sg-cat--largeformat,
  .sg-logo-layout.sg-cat--cis {
    padding: 18px 16px 27px;
  }
  .sg-logo-wall {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .sg-logo-layout {
    gap: 8px;
  }
  .sg-logo-copy {
    margin-top: 0px;
  }
  .sg-logo-title {
    font-size: var(--fs-lg);
    margin-bottom: 16px;
  }
  .sg-logo-title-key {
    display: block;
  }
  .sg-logo-title-line {
    display: none;
  }

  .sg-logo-subtitle {
    font-size: var(--fs-base);
    margin-bottom: 10px;
  }
  .sg-logo-list {
    grid-template-columns: 1fr;
    margin-bottom: 23px;
  }

  .sg-logo-list li {
    height: auto;
    white-space: normal;
    font-size: var(--fs-sm);
  }

  .sg-cat-tabs {
    overflow: hidden;
    padding: 14px 0px 14px 14px;
    border-radius: 40px;
  }

  .sg-cat-tabs-track {
    gap: 10px;
    padding-right: 10px;
  }

  .sg-cat-tab {
    height: 46px;
    padding: 6px 16px;
    font-size: var(--fs-sm);
  }

  .sg-cat-tab.is-active {
    font-size: var(--fs-sm);
  }
}

@media (max-width: 399.98px) {
  .sg-logo-list li {
    width: auto;
  }
}
/* ============================================================
   MARK: Service Web Plan (service_web_plan.php) - 網站設計方案介紹
   .swp-* 命名，避免與 .sw-* 共用樣式互相影響
   ============================================================ */

/* ---- 方案比較表區段（淺底；白卡比較表，Basic 為精選欄） ---- */
.swp-plans {
  padding: 0px 0 132px;
  background: var(--c-bg-page);
  color: var(--c-text-2);
}

.swp-head {
  text-align: center;
  margin-bottom: 54px;
}

.swp-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--c-brand);
  margin: 0 0 24px;
  letter-spacing: 1px;
}

.swp-sub {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 991px) {
  .swp-plans {
    padding: 140px 0 70px;
  }
}
@media (max-width: 767.98px) {
  .swp-plans {
    padding: 80px 0 70px;
  }
  .swp-title {
    font-size: var(--fs-lg);
    margin-bottom: 27px;
  }
  .swp-head {
    margin-bottom: 43px;
  }
  .swp-sub {
    font-size: var(--fs-sm);
  }
}

/* ---- 手機版方案標頭（深綠卡片 + 右側箭頭切換；桌機隱藏） ---- */
.swp-mswitch {
  display: none;
}

.swp-mhead {
  /* 預設隱藏，僅顯示當前方案（由 .swp-table[data-plan] 控制） */
  display: none;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--c-bg-white);
  color: var(--c-text-2);
  border-bottom: 1px solid #c1c1c1;
}

.swp-mhead-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 4px;
}

.swp-mhead-en {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
}

.swp-mhead-zh {
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.swp-mhead-price {
  margin: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.swp-mhead-cur {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.swp-mhead-amt {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* 右側白底圓形 + 橘色右箭頭 */
.swp-mhead-arrow-next {
  appearance: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  /* background: var(--c-bg-white); */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); */
}

.swp-mhead-arrow-next::before {
  content: '';
  width: 26px;
  height: 26px;
  /* 使用專案提供的橘色箭頭圖（已內含 #F39800 色） */
  background: url('../../img/swp-mhead-arrow-next.png') no-repeat center / contain;
}

.swp-mhead-arrow-prev {
  appearance: none;
  flex: 0 0 auto;
  margin-right: auto;
  width: 48px;
  height: 48px;
  border: 0;
  background: none;
  /* background: var(--c-bg-white); */
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.swp-mhead-arrow-prev::before {
  content: '';
  width: 26px;
  height: 26px;
  /* 使用專案提供的橘色箭頭圖（已內含 #F39800 色） */
  background: url('../../img/swp-mhead-arrow-prev.png') no-repeat center / contain;
}

#swp-table-bottom-arrow-btn-block {
  display: none;
}

/* 右側白底圓形 + 橘色右箭頭 */
.swp-bottom--arrow-next {
  appearance: none;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: none;
  background: var(--c-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  margin: 0 10px;
}

.swp-bottom--arrow-next::before {
  content: '';
  width: 18px;
  height: 18px;
  /* 使用專案提供的橘色箭頭圖（已內含 #F39800 色） */
  background: url('../../img/swp-mhead-arrow-next.png') no-repeat center / contain;
}

.swp-bottom--arrow-prev {
  appearance: none;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--c-bg-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  margin: 0 10px;
}

.swp-bottom--arrow-prev::before {
  content: '';
  width: 18px;
  height: 18px;
  /* 使用專案提供的橘色箭頭圖（已內含 #F39800 色） */
  background: url('../../img/swp-mhead-arrow-prev.png') no-repeat center / contain;
}

/* Standard / Full 手機標頭：維持電腦版配色（白底、深色方案名、橘色價格；Basic 仍為深綠） */
.swp-mhead--active {
  background: linear-gradient(to right, var(--c-teal) 0%, #0a2f30 100%);
  color: var(--c-on-dark);
  position: relative;
}

.swp-mhead--active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-38px);
  width: 100%;
  height: 40px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(to right, var(--c-teal) 0%, #0a2f30 100%);
}

.swp-mhead--active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100px);
  width: 209px;
  height: 138px;
  background-image: url(../../img/plan_table_head_icon.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.swp-mhead .swp-mhead-amt {
  color: var(--c-brand);
}

.swp-mhead--active .swp-mhead-amt {
  color: var(--c-on-dark);
}

/* 依當前方案顯示對應標頭卡片 */
.swp-table[data-plan='basic'] .swp-mhead--basic,
.swp-table[data-plan='standard'] .swp-mhead--standard,
.swp-table[data-plan='full'] .swp-mhead--full {
  display: flex;
}
@media (max-width: 991.98px) {
  .swp-mswitch {
    display: block;
  }
}

/* ---- 比較表本體：單一 CSS Grid，列高自動對齊 ---- */
.swp-table {
  background: var(--c-bg-white);
  border-radius: 40px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.08);
  /* overflow: hidden; */
  margin-top: 110px;
}

@media (max-width: 991px) {
  .swp-table {
    display: none;
  }
}

.swp-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.5fr) repeat(3, minmax(0, 1.1fr));
}

/* 共用儲存格（值置中、含底線分隔） */
.swp-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60px;
  padding: 20px 54px;
  font-size: var(--fs-md);
  line-height: 1.5;
  border-bottom: 1px solid #c1c1c1;
  border-left: 1px solid #c1c1c1;
  color: var(--c-text);
  gap: 13px;
  position: relative;
}
.swp-cell:nth-child(4n + 1) {
  border-left: none;
}
/* 左側項目名稱欄：靠左、灰字 */
.swp-c-label {
  color: #525252;
  font-weight: 500;
}

.swp-c-label-active {
  /* color: #005355; */
  border-left: 2px solid #005355;
  border-right: 2px solid #005355;
  background: rgba(125, 202, 202, 0.35);
}
/* 最後一列（參考案例）移除底線 */
.swp-grid > .swp-cell:nth-last-child(-n + 4) {
  border-bottom: 0;
}

.swp-grid > .swp-cell:nth-last-child(-n + 4).swp-c-label-active {
  border-bottom: 2px solid #005355;
}

/* Basic 精選欄：淡綠底 + 兩側框線 + 綠字強調 */
.swp-c-basic {
  background: rgba(0, 83, 85, 0.05);
  color: var(--c-teal);
  font-weight: 600;
  box-shadow:
    inset 1px 0 0 rgba(0, 83, 85, 0.16),
    inset -1px 0 0 rgba(0, 83, 85, 0.16);
}

/* 表頭儲存格：左名稱、右價格 */
.swp-headcell {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 92px;
  border-bottom: 1px solid #ededed;
  border-left: none;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.swp-headcell:nth-child(4){
  border-radius: 0 40px 0 0;
}

.swp-corner.swp-cell {
  min-height: 92px;
  border-bottom: none;
}

.swp-head-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
}

.swp-head-en {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--c-placeholder);
}
.swp-headcell--hl .swp-head-en {
  color: var(--c-text-white);
}
.swp-head-zh {
  font-size: var(--fs-sm);
  font-weight: 400;
  margin-top: 2px;
}

.swp-head-price {
  margin: 0;
  white-space: nowrap;
}

.swp-head-cur {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.swp-head-amt {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--c-brand);
  letter-spacing: -0.5px;
}

/* Basic 表頭：深綠漸層、白字、上方圓角 */
.swp-headcell--hl {
  background: linear-gradient(to right, #005355, #191919);
  color: var(--c-on-dark);
  border-bottom: 0;
  position: relative;
}

.swp-headcell--hl::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-38px);
  width: 100%;
  height: 40px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(to right, #005355, #191919);
}

.swp-headcell--hl::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -90px);
  width: 209px;
  height: 138px;
  background-image: url(../../img/plan_table_head_icon.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.swp-headcell--hl .swp-head-amt {
  color: var(--c-on-dark);
}

/* 支援打勾（SVG 遮罩，統一深綠色） */
.swp-tick {
  display: inline-block;
  width: 24px;
  height: 20px;
  background-color: var(--c-bg-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / contain;
}
.swp-tick.swp-tick-c-teal {
  /* background-color: var(--c-teal); */
}
/* 參考案例儲存格：灰底縮圖 + 客戶名 */
.swp-c-case {
  padding-top: 46px;
  padding-bottom: 32px;
}

.swp-c-case-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 25px;
  border: 1px solid #999;
  border-radius: 81px;
  background: none;
  color: #999;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.25s;
}

.swp-c-case-link:hover {
  background: linear-gradient(90deg, var(--c-brand) 22%, #EA9604 100%);
  color: #fff;
  border: 1px solid transparent;
}

/* 送出按鈕右側 icon (Figma: 25×31px) */
.swp-c-case-link-icon {
  width: 25px;
  height: 31px;
  background: #999;
  mask-image: url(../../img/cta_submit_icon.svg);
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: all 0.25s;
}

.swp-c-case-link:hover .swp-c-case-link-icon {
  background: #fff;
}

/* RWD：平板以下改為「項目名稱 + 單一方案欄」，並以箭頭標頭切換 */
@media (max-width: 1399px) {
  .swp-head-amt {
    font-size: var(--fs-xl);
  }
  .swp-cell {
    padding: 20px 25px;
  }
}
@media (max-width: 1199px) {
  .swp-head-amt {
    font-size: var(--fs-md);
  }
  .swp-head-en {
    font-size: var(--fs-sm);
  }
}
@media (max-width: 991.98px) {
  /* 標頭卡片滿版貼齊（圓角由 .swp-table overflow:hidden 裁切） */
  .swp-table {
    padding: 0;
  }
  /* 隱藏格內表頭列（角落 + 三方案表頭），改由上方 .swp-mswitch 箭頭標頭呈現 */
  .swp-corner,
  .swp-headcell {
    display: none;
  }
  .swp-grid {
    grid-template-columns: minmax(109px, 0.95fr) minmax(0, 1.5fr);
  }
  /* 依「欄位位置」隱藏非當前方案欄（不依賴內容格 class，避免切換時一列變 3 格而換行跑版）。
     第 1 欄=項目名稱(4n+1)、第 2~4 欄=Basic/Standard/Full(4n+2/3/4)；表頭格另行隱藏故以 :not(.swp-headcell) 排除 */
  .swp-grid > .swp-cell:not(.swp-headcell):nth-child(4n + 2),
  .swp-grid > .swp-cell:not(.swp-headcell):nth-child(4n + 3),
  .swp-grid > .swp-cell:not(.swp-headcell):nth-child(4n + 4) {
    display: none;
  }
  .swp-table[data-plan='basic']
    .swp-grid
    > .swp-cell:not(.swp-headcell):nth-child(4n + 2),
  .swp-table[data-plan='standard']
    .swp-grid
    > .swp-cell:not(.swp-headcell):nth-child(4n + 3),
  .swp-table[data-plan='full']
    .swp-grid
    > .swp-cell:not(.swp-headcell):nth-child(4n + 4) {
    display: flex;
  }
  .swp-cell:nth-last-child(-n + 4) {
    border-radius: 0;
  }
}
@media (max-width: 575.98px) {
  .swp-cell {
    padding: 15px 60px;
    font-size: var(--fs-base);
  }
  .swp-cell.swp-c-label {
    padding: 15px 4px;
  }
  .swp-cell.swp-c-case {
    padding: 20px 25px;
  }
  .swp-mhead {
    padding: 28px 0px;
    gap: 10px;
  }
  .swp-mhead-en {
    font-size: 18px;
  }
  .swp-mhead-amt {
    font-size: 26px;
  }
  .swp-mhead-arrow-next {
    width: 42px;
    height: 42px;
  }
}

.swp-cell-text {
  position: relative;
}

.plan_table_icon{
  width: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: -55px;
  transform: translate(0%, -55%);
}

/* ---- 網站可直接升級為購物網站 ---- */
.swp-upgrade {
  padding: 20px 0 390px;
  background: var(--c-bg-page);
  color: var(--c-text-2);
  position: relative;
}

@media(max-width: 1199px) {
  .swp-upgrade {
    padding-bottom: 310px;
  }
}

@media(max-width: 991px) {
  .swp-upgrade {
    padding-bottom: 230px;
  }
}

@media(max-width: 767px) {
  .swp-upgrade {
    padding: 8px 0 200px;
  }
}

.swp-upgrade-head {
  text-align: center;
  margin-bottom: 48px;
}

.swp-upgrade-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--c-brand);
  margin: 0 0 24px;
  letter-spacing: 1px;
}

.swp-upgrade-desc {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--c-text);
  margin: 0;
}
@media (max-width: 767.98px) {
  .swp-upgrade-title {
    font-size: var(--fs-lg);
    margin-bottom: 40px;
  }
  .swp-upgrade-head {
    margin-bottom: 40px;
  }
  .swp-upgrade-desc {
    font-size: var(--fs-sm);
  }
  /* 手機版改以段落呈現，移除桌機強制斷行 */
  .swp-upgrade-desc br {
    display: none;
  }
}

/* 升級功能白卡 */
.swp-upgrade-card {
  background: var(--c-bg-white);
  border-radius: 24px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.08);
  padding: 30px 36px 16px;
}
@media (max-width: 991.98px) {
  .swp-upgrade-card {
    padding: 25px 0px 0px;
    border-radius: 18px;
  }
}

/* 模組分頁列（橫向可捲動膠囊） */
.swp-mod-tabs {
  margin-bottom: 12px;
}

/* 讓漸淡寬度可被 transition 動畫（自訂屬性需註冊型別，否則預設為離散瞬切） */
@property --swp-fade-left {
  syntax: "<length>";
  inherits: false;
  initial-value: 28px;
}
@property --swp-fade-right {
  syntax: "<length>";
  inherits: false;
  initial-value: 28px;
}

.swp-mod-tabs-track {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 16px;
  padding-bottom: 4px;
  /* 左右漸淡：iOS 不顯示滑桿，改用遮罩漸層提示尚有可捲動內容。
     漸淡寬度以變數控制，JS 依捲動位置切換 is-at-start / is-at-end 來關閉該側 */
  --swp-fade-left: 28px;
  --swp-fade-right: 28px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--swp-fade-left),
    #000 calc(100% - var(--swp-fade-right)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--swp-fade-left),
    #000 calc(100% - var(--swp-fade-right)),
    transparent 100%
  );
}

/* 已捲到最左：取消左側漸淡 */
.swp-mod-tabs-track.is-at-start {
  --swp-fade-left: 0px;
}

/* 已捲到最右：取消右側漸淡 */
.swp-mod-tabs-track.is-at-end {
  --swp-fade-right: 0px;
}

.swp-mod-tabs-track::-webkit-scrollbar {
  height: 5px;
}
 
.swp-mod-tabs-track::-webkit-scrollbar-track {
  background: #ddd;
}
 
.swp-mod-tabs-track::-webkit-scrollbar-thumb {
  background: #666; 
}

/* 拖曳捲動時的游標提示 */
.swp-mod-tabs-track.is-dragging {
  /* cursor: grabbing;
  scroll-behavior: auto; */
}

.swp-mod-tab {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 30px;
  border: 1px solid var(--c-grey-mid);
  border-radius: 53px;
  background: var(--c-bg-white);
  color: var(--c-grey-dark);
  font-size: var(--fs-md);
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.swp-mod-tab:hover:not(.is-active) {
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.swp-mod-tab.is-active {
  background: linear-gradient(
    to right,
    var(--c-brand-hover) 0%,
    var(--c-yellow) 90%
  );
  border-color: transparent;
  color: var(--c-on-dark);
  font-weight: 500;
}
@media (max-width: 991.98px) {
  .swp-mod-tabs {
    margin: 0 15px;
  }
}
@media (max-width: 575.98px) {
  .swp-mod-tabs-track {
    gap: 8px;
  }
  .swp-mod-tab {
    min-height: 42px;
    padding: 6px 16px;
    font-size: var(--fs-sm);
  }
}

/* 功能格：桌機 3 欄，列間以滿版細線分隔（column-gap=0 使分隔線連續）
   多個面板僅顯示當前 .is-active 者，其餘隱藏（由分頁切換控制） */
.swp-mod-grid {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.swp-mod-grid.is-active {
  display: grid;
}

.swp-mod-item {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 36px 24px;
  border-bottom: 1px solid #ededed;
}

/* 最後一列（3 格）移除底線 */
.swp-mod-grid > .swp-mod-item:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.swp-mod-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 18px;
  color: var(--c-brand);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
  border-right: 2px solid var(--c-brand);
  width: 185px;
}

@media(max-width: 1400px) {
  .swp-mod-pill {
    width: 150px;
  }
}

.swp-mod-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text-black);
}
@media (max-width: 1199px) {
  .swp-mod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .swp-mod-grid > .swp-mod-item:nth-last-child(-n + 4) {
    border-bottom: 1px solid #ededed;
  }
}
@media (max-width: 991.98px) {
  /* 平板：3 欄 → 1 欄，分隔線自動連續 */
  .swp-mod-grid {
    grid-template-columns: 1fr;
  }
  /* 手機版改 grid：固定 pill 欄寬，使各列說明文字開頭對齊在同一直欄 */
  .swp-mod-item {
    display: grid;
    grid-template-columns: 185px 1fr;
    align-items: center;
    gap: 20px;
    padding: 20px 18px 10px;
  }
  /* pill 於固定欄內靠左、依內容自身寬度顯示（不撐滿欄） */
  .swp-mod-pill {
    justify-self: start;
    width: 185px;
    justify-content: flex-start;
    text-align: left;
  }
  /* 說明文字靠左，欄位起點一致 → 各列開頭對齊 */
  .swp-mod-text {
    text-align: left;
  }
  .swp-mod-grid > .swp-mod-item:nth-last-child(-n + 3) {
    border-bottom: 1px solid #ededed;
  }
  .swp-mod-grid > .swp-mod-item:last-child {
    border-bottom: 0;
  }
}
@media (max-width: 575.98px) {
  .swp-mod-item {
    gap: 15px;
    grid-template-columns: 125px 1fr;
  }

  .swp-mod-pill {
    min-height: 48px;
    padding: 15px 10px;
    font-size: var(--fs-sm);
    width: 125px;
  }
  .swp-mod-text {
    font-size: var(--fs-sm);
    text-align: left;
  }
}
/* ============================================================
   MARK: Service Photo Page (service_photo_page.php) - 商業攝影
   （Hero 沿用 #sw-hero；製作流程/聯絡為共用元件。圖片以 .sp-ph 占位框呈現）
   ============================================================ */

.sp-section {
  padding: clamp(56px, 7vw, 100px) 0;
  background: var(--c-bg-white);
  color: var(--c-text-2);
  overflow: hidden;
}

/* 圖片占位框（圖片待補） */
.sp-ph {
  display: block;
  background: linear-gradient(135deg, #ececec 0%, #e0e0e0 100%);
  border-radius: 16px;
}

/* 左右並排（圖／文）；手機改為單欄堆疊 */
.sp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 65px);
  align-items: center;
}
@media (max-width: 991.98px) {
  .sp-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 區段標題（橘色關鍵字 + 深色其餘） */
.sp-title {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  color: var(--c-text-2);
  margin: 0 0 24px;
  line-height: 1.4;
  letter-spacing: 0.5px;
}

.sp-title-key {
  color: var(--c-brand);
  font-weight: 700;
}

.sp-text,
.sp-sub {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--c-text-black);
  margin: 0;
}

.sp-foot {
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--c-placeholder);
  margin: 28px 0 0;
}

.sp-product {
  background: var(--c-bg-page);
  padding-top: 85px;
  padding-bottom: 146px;
}
/* ---- 產品情境攝影：左側兩張交錯產品圖 ---- */
.sp-product-imgs {
  position: relative;
  /* 容器高度隨寬度等比（容納兩張交錯圖） */
  aspect-ratio: 1 / 0.92;
  /* 讓後方太陽光暈可向左/下出血 */
  overflow: visible;
}

/* 後方橘色太陽光暈：往左下、亮部露於左緣（DOM 在圖片之前，自然位於圖片後方） */
.sp-product-sun {
  position: absolute;
  left: -26%;
  bottom: -10%;
  width: 56%;
  height: auto;
  pointer-events: none;
}

.sp-product-img {
  position: absolute;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.12);
}

/* 左上較大張（sp-product-1：395×497） */
.sp-product-img--1 {
  top: 0;
  left: 0;
  width: 53%;
  aspect-ratio: 395 / 497;
}

/* 右下較小張（sp-product-2：307×417） */
.sp-product-img--2 {
  right: 0;
  bottom: 0;
  width: 44%;
  aspect-ratio: 307 / 417;
}

/* ---- 人像與團隊攝影：標題 + 三張作品 ---- */
.sp-head {
  margin-bottom: clamp(10px, 4vw, 26px);
}

.sp-portrait-block {
  max-width: 1255px;
  margin: 0 auto;
}

.sp-portrait-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
.sp-portrait-imgs-mobile {
  display: none;
}
.sp-portrait-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 767.98px) {
  .sp-product {
    padding-top: 55px;
    padding-bottom: 80px;
  }
  .sp-title {
    margin-bottom: 24px;
  }
  .sp-text {
    text-align: center;
  }
  .sp-product-imgs {
    margin: 0 25px;
  }
  /* 左上較大張（sp-product-1：395×497） */
  .sp-product-img--1 {
    top: -10%;
    width: 60%;
    z-index: 1;
  }

  /* 右下較小張（sp-product-2：307×417） */
  .sp-product-img--2 {
    width: 50%;
  }

  .sp-product-sun {
    display: none;
  }

  .sp-portrait {
    padding-bottom: 80px;
  }
  .sp-portrait-imgs {
    margin: 0 0 24px;
  }
  .sp-portrait-imgs-pc {
    display: none;
  }
  .sp-portrait-imgs-mobile {
    display: block;
  }
}

/* ---- 拍攝風格 / 服裝建議 / 場景設計：三個重疊圓 ---- */
.sp-circles {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-circle {
  width: clamp(150px, 15vw, 266px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(217, 217, 217, 0.18);
  border: 1px solid var(--c-bg-white);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  color: var(--c-brand);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: 1px;
  backdrop-filter: blur(2px);
}

.sp-circle + .sp-circle {
  margin-left: clamp(-44px, -3vw, -24px);
}
@media (max-width: 767.98px) {
  .sp-style {
    padding-top: 10px;
    padding-bottom: 80px;
  }
  .sp-circles {
    order: -1;
  }
}
@media (max-width: 575.98px) {
  .sp-circle {
    font-size: var(--fs-sm);
    width: 100%;
    max-width: 150px;
  }
}

.sp-adapt {
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
  overflow: visible;
  padding-top: 0;
  padding-bottom: 263px;
}
/* 波浪本體 */
.sp-adapt::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}
/* ---- 數位適配：左圖 + 右說明清單 ---- */
.sp-adapt-img {
  display: block;
  width: 100%;
  height: auto;
}

.sp-adapt-eg {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-brand);
  margin: 24px 0 14px;
}

.sp-adapt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-adapt-list li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 11px 22px;
  border: 1px solid var(--c-grey-light);
  border-radius: 40px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  line-height: 1.4;
}

.sp-adapt-list li::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-brand-hover), var(--c-brand));
  flex-shrink: 0;
}
@media (max-width: 991.98px) {
  .sp-adapt {
    padding-bottom: 30px;
  }
  /* 數位適配：手機時圖在上、文字在下 */
  .sp-adapt .sp-adapt-img {
    order: -1;
  }
}
@media (max-width: 575px) {
  .sp-adapt::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
}
/* ---- 商業攝影：人像區標題與說明置中（高特異度覆寫，避免被前述規則蓋過） ---- */
.sp-portrait {
  padding-top: 0;
  background: var(--c-bg-page);
}
.sp-portrait .sp-head {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sp-style {
  padding-top: 16px;
  background: var(--c-bg-page);
}

.sp-style .sp-text {
  font-size: var(--fs-md);
}
@media (max-width: 767px) {
  .sp-style .sp-text {
    font-size: var(--fs-base);
  }
}
/* ---- 商業攝影：數位適配整區卡片（白框 + 圓角 + 陰影 + 右下橘色漸層，對齊 Figma Frame 295／同 .sg-logo-layout） ---- */
.sp-adapt .sp-split {
  align-items: flex-start;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--c-bg-white);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  background:
    linear-gradient(
      -63deg,
      rgba(243, 152, 0, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 10.709%
    ),
    var(--c-bg-white);
}
.sp-copy {
  padding-top: 23px;
}
/* ---- 商業攝影：數位適配 清單膠囊與說明校正（對齊 Figma） ----
   清單：1.5px 橘框膠囊、黑字18px、文字置中、無左側圓點
   例如：黑字24px medium；說明 sp-foot：16px 橘字 */
.sp-adapt .sp-adapt-eg {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--c-text-black);
}
.sp-adapt .sp-adapt-list li {
  justify-content: center;
  gap: 0;
  min-height: 44px;
  padding: 8px 21px;
  border: 1.5px solid var(--c-brand);
  border-radius: 53px;
  font-size: var(--fs-base);
  color: var(--c-text-black);
  letter-spacing: -0.342px;
  line-height: 1.5;
}
.sp-adapt .sp-adapt-list li::before {
  content: none;
}
.sp-adapt .sp-foot {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--c-brand);
}
@media (max-width: 767px) {
  .sp-adapt .sp-split {
    gap: 14px;
  }
  .sp-copy {
    padding-top: 0;
  }
  .sp-adapt .sp-title-key {
    display: block;
  }
  .sp-adapt .sp-title-line {
    display: none;
  }
  .sp-adapt .sp-text {
    text-align: left;
  }
  .sp-adapt .sp-adapt-eg {
    margin: 16px 0 10px;
    font-size: var(--fs-base);
  }
  .sp-adapt .sp-adapt-list li {
    font-size: var(--fs-sm);
  }
  .sp-adapt .sp-foot {
    margin-top: 25px;
  }
}

/* ============================================================
   MARK: Service Host Page (service_host_page.php) - 主機服務
   沿用 #sw-hero（HERO）與 .sw-process（流程＋方案）；其餘區塊以 .sh-* 命名
   ============================================================ */

/* 標題橘色分隔符（｜），主機服務各區塊標題共用 */
.sh-title-sep {
  display: inline-block;
  margin: 0 6px;
  color: var(--c-brand);
  font-weight: 400;
}

/* ---- 穩定代管與 SSL 安全憑證配置（左圖右文 + 例如膠囊） ---- */
.sh-host {
  padding: 90px 0;
  background: var(--c-bg-page);
}

.sh-host-layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 64px;
  align-items: center;
}

/* 左：主機環境示意圖（深色圓角） */
.sh-host-media {
  overflow: hidden;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
}

.sh-host-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sh-host-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-text-2);
  margin: 0 0 24px;
  letter-spacing: 0.5px;
}
.sh-host-title-key {
  color: var(--c-brand);
}
.sh-host-desc {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-2);
  margin: 0 0 28px;
}

.sh-host-eg {
  font-size: 18px;
  font-weight: 500;
  color: var(--c-text-black);
  margin: 0 0 8px;
}

/* 例如膠囊（2 欄外框膠囊 + 橘點） */
.sh-pill-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 225px 1fr;
  gap: 0px 50px;
}

.sh-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 22px;
  border-radius: 40px;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
  width: fit-content;
  position: relative;
}

.sh-pill::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-brand);
}

/* ---- SEO 友善架構 置中標題帶 ---- */
.sh-seo-head-band {
  padding: 70px 0 50px;
  background: var(--c-bg-page);
  text-align: center;
}

.sh-seo-head-band .sw-seo-title {
  margin-bottom: 20px;
}

/* ---- 三大維運主軸（高可用 / 效能 / 資安；霧面白卡） ---- */
.sh-cols-section {
  padding: 60px 0 100px;
  background: var(--c-bg-page);
}

/* sh-cols：桌機 ≥1200 為三欄 grid（Slick 未初始化，3 張卡片直接排版）；
   手機 <1200 改由 Slick 輪播（見 service_host_page.php 的初始化 script） */
@media (min-width: 1200px) {
  .sh-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
  }
}

/* Slick 輪播（手機）：卡片等高 + 留出陰影空間 */
.sh-cols .slick-track {
  display: flex; /* 讓各卡等高 */
}

.sh-cols .slick-slide {
  height: auto; /* 配合 flex track 拉伸對齊最高卡 */
  margin: 0 8px; /* 卡片左右間距 */
}

/* Slick 於 centerMode 會內聯設定 .slick-list{padding:0 Xpx}；
   以 !important 補上上下內距，讓卡片陰影不被 overflow:hidden 裁切 */
.sh-cols .slick-list {
  padding-top: 18px !important;
  padding-bottom: 30px !important;
}

/* 手機輪播左右切換鈕（白底圓鈕＋橘色箭頭，置中於輪播下方）
   預設隱藏：桌機不輪播也不顯示箭頭，僅手機（<1200）顯示（見下方 RWD） */
.sh-cols-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-top: 24px;
}

.sh-cols-arrow {
  width: 57px;
  height: 57px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-bg-white);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* 箭頭以 CSS 邊框繪製（橘色 V 形） */
.sh-cols-arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  border-top: 2.5px solid var(--c-brand);
  border-right: 2.5px solid var(--c-brand);
}

.sh-cols-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.sh-cols-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.sh-cols-arrow:hover {
  transform: scale(1.06);
}

/* 到頭／到尾時切換鈕淡化、停用 */
.sh-cols-arrow.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* 霧面白卡（對齊 Figma 1413:39513；同 .sw-seo-card 質感） */
.sh-col {
  display: flex;
  flex-direction: column;
  padding: 25px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--c-on-dark);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
}

/* 卡標：關鍵字橘色 30px ＋ 次行 24px 深色 */
.sh-col-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-black);
  margin: 0 0 20px;
}

.sh-col-title-key {
  color: var(--c-brand);
}

.sh-col-title-sub {
  display: inline-block;
  font-size: 24px;
}

/* 標題下分隔線 */
.sh-col-line {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 20px;
}

.sh-col-desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-black);
  margin: 0 0 24px;
}

.sh-col-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sh-col-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  color: var(--c-text-black);
  letter-spacing: -0.38px;
}

.sh-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-brand);
  flex-shrink: 0;
}

/* 欄底示意圖（圓角，貼齊欄底） */
.sh-col-media {
  margin-top: auto;
  overflow: hidden;
}

.sh-col-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- 為什麼網站主機與資安會影響 SEO？（淺底 + 霧面白卡 8 卡 4×2） ---- */
.sh-why {
  padding: 90px 0 200px;
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
}
/* 波浪本體 */
.sh-why::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}

.sh-why-title {
  text-align: center;
  font-size: 36px;
  font-weight: 400;
  color: var(--c-brand);
  margin: 0 0 56px;
  letter-spacing: 1px;
}

.sh-why-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 22px;
}

/* 霧面白卡：內容置中（垂直＋水平），與上方欄位同質感 */
.sh-why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 205px;
  padding: 28px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--c-on-dark);
  border-radius: 20px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.25);
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.sh-why-card:hover {
  border-color: var(--c-brand);
  transform: translateY(-4px);
}

.sh-why-card-title {
  font-size: var(--fs-lg);
  font-weight: 400;
  color: var(--c-text-black);
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.456px;
}

.sh-why-card-desc {
  font-size: var(--fs-sm);
  font-weight: 300;
  line-height: 1.6;
  color: var(--c-text-black);
  margin: 0;
  letter-spacing: -0.304px;
}

/* ============ RWD ============ */
@media (max-width: 1199.98px) {
  .sh-pill-grid {
    grid-template-columns: 1fr;
    gap: 0px 20px;
  }
  /* 手機才顯示輪播切換箭頭 */
  .sh-cols-nav {
    display: flex;
  }
  .sh-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sh-host-layout {
    align-items: stretch;
  }
}

@media (max-width: 991.98px) {
  .sh-host {
    padding: 60px 0;
  }
  .sh-host-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sh-host-title-br {
    display: none;
  }
  .sh-why-title {
    font-size: var(--fs-xl);
    margin-bottom: 36px;
  }
}

@media (max-width: 575.98px) {
  .sh-host-title,
  .sh-why-title {
    font-size: var(--fs-lg);
  }
  .sh-host-eg {
    font-size: 18px;
  }
  .sh-seo-head-band {
    padding: 50px 0 30px;
  }
  .sh-cols-section {
    padding: 40px 0 70px;
  }
  .sh-col-title {
    font-size: var(--fs-lg);
  }
  .sh-col-title-sub {
    font-size: var(--fs-md);
  }
  .sh-col-list li {
    font-size: var(--fs-sm);
  }
  .sh-why-grid {
    grid-template-columns: 1fr;
  }
  .sh-why {
    padding: 60px 0 70px;
  }
  .sh-why::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
}

/* ============================================================
   MARK: Web Marketing Page (service_marketing_page.php) - 網站行銷
   沿用 #sw-hero（HERO）與 .sw-process（流程＋方案）；
   新增區塊以 .mk-* 命名：數位適配 / 廣告投放 / 整合行銷
   背景沿用 body 的 --c-bg-page，故各區塊背景透明、無接縫
   ============================================================ */

/* 區塊共用標題（關鍵字 teal、分隔符與利益點深色） */
.mk-sec-head {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.mk-sec-title {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--c-text-2);
  letter-spacing: 0.5px;
  margin: 0 0 18px;
  line-height: 1.3;
}

.mk-sec-key {
  color: var(--c-brand);
}

.mk-sec-sep {
  margin: 0 4px;
  font-weight: 400;
  color: var(--c-text-2);
}

.mk-sec-desc {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--c-text-2);
  margin: 0;
  max-width: 720px;
}

/* ---- 數位適配服務（左：多裝置產品圖／右：適配膠囊 + 備註） ---- */
.mk-adapt {
  position: relative;
  overflow: hidden;
}

/* 左下角橘色光暈（對齊 Figma 裝飾橢圓） */
.mk-adapt::before {
  content: '';
  position: absolute;
  left: 7%;
  bottom: 6%;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 1 / 1;
  background-image: url(../../img/mk-adapt.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .mk-adapt::before {
    left: 13%;
    bottom: 40%;
  }
}

@media (max-width: 575.98px) {
  .mk-adapt::before {
    left: -3%;
    bottom: 46%;
  }
}

.mk-adapt-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.mk-adapt-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.mk-adapt-pills {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.mk-adapt-pill {
  padding: 9px 24px;
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: var(--c-text-black);
  position: relative;
}

.mk-adapt-pill::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background-color: var(--c-brand);
  border-radius: 50%;
}

.mk-adapt-note {
  margin: 0;
  max-width: 520px;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text-2);
}

/* ---- 廣告投放｜精準獲客（左：標題+說明卡／右：成長曲線圖表） ---- */
.mk-ads {
  margin: 0 0 clamp(40px, 6vw, 80px);
}

@media (max-width: 991.98px) {
  .mk-ads {
    margin: clamp(40px, 10vw, 80px) 0;
  }
}

.mk-ads-split {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  align-items: end;
}

/* 策略規劃說明卡（白底圓角 + 柔和陰影） */
.mk-ads-note {
  margin-top: clamp(24px, 3vw, 40px);
  background: var(--c-bg-white);
  border-radius: 24px;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.08);
  padding: clamp(26px, 3vw, 44px);
}

.mk-ads-note p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 2;
  color: var(--c-text-2);
}

/* 成長曲線圖表：箭頭為底層，三階段成效卡靠下排列、高度遞增 */
.mk-ads-chart {
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
}

/* ---- 整合行銷｜全面提升成效（左：行銷漏斗／右：說明） ---- */
.mk-funnel {
  padding: clamp(40px, 6vw, 200px) 0;
  background: var(--c-bg-page);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 50px 25px rgba(0, 0, 0, 0.25));
}
/* 波浪本體 */
.mk-funnel::after {
  content: '';
  position: absolute;
  top: 55%;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  background: var(--c-bg-page);
  mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
  -webkit-mask: url('../../img/sw-ux-mask.png') no-repeat center bottom / cover;
}

.mk-funnel-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
}

.mk-funnel-visual {
  position: relative;
}

.mk-funnel-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 漏斗各層文字（疊在漏斗圖上方，依層級定位） */
.mk-funnel-labels {
  position: absolute;
  inset: 0;
}

.mk-funnel-stage {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  line-height: 1.2;
}

.mk-funnel-stage--1 {
  top: 12%;
}

.mk-funnel-stage--2 {
  top: 39%;
}

.mk-funnel-stage--3 {
  top: 61%;
}

.mk-funnel-stage--4 {
  top: 83%;
}

@media(max-width: 575px) {
  .mk-funnel-stage--4 {
    top: 81%;
  }
}

.mk-funnel-en {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 26px);
  letter-spacing: 0.5px;
}

.mk-funnel-zh {
  font-size: clamp(12px, 1.2vw, 16px);
}

/* 第 1、3 層為橘色實心 → 白字；第 2、4 層為白色 → 深字 + 橘色中文 */
.mk-funnel-stage--1 .mk-funnel-en,
.mk-funnel-stage--1 .mk-funnel-zh,
.mk-funnel-stage--3 .mk-funnel-en,
.mk-funnel-stage--3 .mk-funnel-zh {
  color: var(--c-on-dark);
}

.mk-funnel-stage--2 .mk-funnel-en,
.mk-funnel-stage--4 .mk-funnel-en {
  color: var(--c-grey-dark);
}

.mk-funnel-stage--2 .mk-funnel-zh,
.mk-funnel-stage--4 .mk-funnel-zh {
  color: var(--c-brand);
}

.mk-funnel-copy {
  padding: clamp(24px, 3vw, 40px);
  background: var(--c-bg-white);
  border-radius: 24px;
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.08);
}

.mk-funnel-copy .mk-sec-title {
  margin-bottom: 24px;
}

.mk-funnel-desc {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--c-text-2);
  margin: 0 0 20px;
}

.mk-funnel-desc:last-child {
  margin-bottom: 0;
}

/* 行銷漏斗關鍵字橘色（保險：若全域 .accent 未涵蓋） */
.mk-funnel-desc .accent {
  color: var(--c-brand);
  font-weight: 500;
}

/* ---- RWD：平板以下單欄堆疊，圖在上、文在下 ---- */
@media (max-width: 991.98px) {
  .mk-adapt-grid,
  .mk-ads-split,
  .mk-funnel-split {
    grid-template-columns: 1fr;
  }

  .mk-adapt-visual {
    order: -1;
    max-width: 560px;
    margin: 0 auto;
  }

  .mk-funnel-visual {
    max-width: 480px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .mk-funnel::after {
    mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center bottom / cover;
    -webkit-mask: url('../../img/sw-ux-mask-mobile.png') no-repeat center
      bottom / cover;
  }
  .mk-adapt-pill {
    font-size: var(--fs-sm);
    padding: 8px 18px;
  }

  .mk-adapt-note,
  .mk-ads-note p,
  .mk-sec-desc,
  .mk-funnel-desc {
    font-size: var(--fs-sm);
  }
}

.swp-table-mobile {
  display: none;
}

@media (max-width: 991px) {
  .swp-table-mobile {
    display: block;
  }
}

.swp-table-mobile-head-block { 
  gap: 14px;
  padding: 18px 30px;
  background: var(--c-bg-white);
  color: var(--c-text-2);
  margin-top: 45px;
  border-radius: 40px;
  display: flex;
  justify-content: space-between; 
  align-items: center;
  position: relative;
  cursor: pointer;
}

.swp-table-mobile-head-block.is-open {
  border-radius: 40px 40px 0 0;
}

.swp-table-mobile-head-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  gap: 4px;
}

.swp-table-mobile-head-en {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
}

.swp-table-mobile-head-zh {
  font-size: var(--fs-sm);
  margin-top: 2px;
}

.swp-table-mobile-head-price {
  margin: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.swp-table-mobile-head-cur {
  font-size: var(--fs-sm);
  font-weight: 500;
}

.swp-table-mobile-head-amt {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--c-brand);
}

.swp-table-mobile-head-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
}

.swp-table-mobile-head-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -4px;
  width: 100%;
  height: 2px;
  transform: translateY(-50%) rotate(-45deg);
  background: var(--c-brand);
}

.swp-table-mobile-head-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -3px;
  width: 100%;
  height: 2px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--c-brand);
}

.is-open .swp-table-mobile-head-arrow::before {
  transform: translateY(-50%) rotate(45deg);
}

.is-open .swp-table-mobile-head-arrow::after {
  transform: translateY(-50%) rotate(-45deg);
}

.swp-active {
  background: linear-gradient(to right, var(--c-teal) 0%, #0a2f30 100%);
  color: var(--c-on-dark);
  position: relative;
}

.swp-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0%;
  transform: translate(-30px, -45px);
  width: 105px;
  height: 69px;
  background-image: url(../../img/plan_table_head_icon.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

@media (max-width: 575px) {
  .swp-active::after {
    transform: translate(-10px, -45px);
  }
}

.swp-active .swp-table-mobile-head-amt {
  color: var(--c-on-dark);
}

.swp-active .swp-table-mobile-head-arrow::before {
  background: var(--c-on-dark);;
}

.swp-active .swp-table-mobile-head-arrow::after {
  background: var(--c-on-dark);;
}

.swp-table-mobile-cell-block {
  display: none;
  grid-template-columns: minmax(109px, 0.95fr) minmax(0, 1.5fr);
  background: var(--c-bg-white);
  border-radius: 0 0 40px 40px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.08);
}

.swp-table-mobile-cell-block.swp-cell-active .swp-c-standard{
  color: #005355;
}

.swp-table-mobile-cell-block.swp-cell-active .swp-tick{
  background-color: #005355;
}

.swp-table-mobile-cell-block.is-open {
  display: grid;
}

.swp-table-mobile-cell-block > .swp-cell:not(.swp-headcell):nth-child(4n + 4) {
    display: flex;
}

/* 最後一列（參考案例）移除底線 */
.swp-table-mobile-cell-block > .swp-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.swp-table-mobile-cell-block .swp-cell:nth-child(2n + 1) {
  border-left: none;
}