/* ============================================
   SKI-PRO v1 — Style Sheet
   Breakpoint: 991px (desktop ≥992 / mobile ≤991)
   Max width: 1920px
   ============================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'LINE Seed TW';
  src: url('assets/fonts/LINESeedTW_OTF_Rg.otf') format('opentype');
  font-weight: 400;
}

@font-face {
  font-family: 'LINE Seed TW';
  src: url('assets/fonts/LINESeedTW_OTF_Bd.otf') format('opentype');
  font-weight: 600;
}

@font-face {
  font-family: 'Unbounded';
  src: url('assets/fonts/Unbounded-Light.ttf') format('truetype');
  font-weight: 300;
}

@font-face {
  font-family: 'Unbounded';
  src: url('assets/fonts/Unbounded-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Unbounded';
  src: url('assets/fonts/Unbounded-SemiBold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Unbounded';
  src: url('assets/fonts/Unbounded-ExtraBold.ttf') format('truetype');
  font-weight: 800;
}

/* ---------- Design Tokens (from Figma Variables — v1 collection) ---------- */
:root {

  /* ── Color / Base ── */
  --color-base-white: #fefefe;
  --color-base-dark: #0d0f10;
  --color-base-dark-80: rgba(13, 15, 16, 0.80);
  --color-base-dark-50: rgba(13, 15, 16, 0.50);
  --color-base-black-15: rgba(0, 0, 0, 0.15);
  --color-base-grey-13: #202020;
  --color-base-grey-35-20: rgba(86, 86, 95, 0.20);
  --color-base-grey-35-35: rgba(86, 86, 95, 0.35);
  --color-base-grey-57: #8a9099;
  --color-base-grey-95: #eff0f3;
  --color-base-orange-55: #f24900;

  /* ── Color / Neutral ── */
  --color-neutral-obsidian-black: #191d1e;
  --color-neutral-obsidian-black-80: rgba(25, 29, 30, 0.80);
  --color-neutral-obsidian-black-60: rgba(25, 29, 30, 0.60);
  --color-neutral-obsidian-black-40: rgba(25, 29, 30, 0.40);
  --color-neutral-obsidian-black-15: rgba(25, 29, 30, 0.15);
  --color-neutral-arctic-white: #f8fbf8;
  --color-neutral-arctic-white-25: rgba(248, 251, 248, 0.25);
  --color-neutral-arctic-white-15: rgba(248, 251, 248, 0.15);
  --color-neutral-mist-silver: #ced2d7;
  --color-neutral-mist-silver-50: rgba(206, 210, 215, 0.50);
  --color-neutral-mist-silver-15: rgba(206, 210, 215, 0.15);
  --color-neutral-mist-silver-6: rgba(206, 210, 215, 0.06);
  --color-neutral-rock-gray: #424242;

  /* ── Color / Accent ── */
  --color-accent-steel-blue: #5a9cb3;
  --color-accent-steel-blue-30: rgba(90, 156, 179, 0.30);
  --color-accent-steel-blue-20: rgba(90, 156, 179, 0.20);
  --color-accent-steel-blue-15: rgba(90, 156, 179, 0.15);
  --color-accent-steel-blue-10: rgba(90, 156, 179, 0.10);
  --color-accent-steel-blue-8: rgba(90, 156, 179, 0.08);
  --color-accent-steel-blue-0: rgba(90, 156, 179, 0);
  --color-accent-orange-red: #ff4a18;
  --color-accent-orange-red-6: rgba(255, 74, 24, 0.06);
  --color-accent-orange-red-0: rgba(255, 74, 24, 0);
  --color-accent-slate-teal: #5b8184;
  --color-accent-sand: #a08d73;
  --color-accent-ice-blue: #1d2a64;

  /* ── Opacity ── */
  --opacity-100: 1;
  --opacity-70: 0.70;
  --opacity-50: 0.50;
  --opacity-30: 0.30;
  --opacity-15: 0.15;
  --opacity-6: 0.06;
  --opacity-0: 0;

  /* ── Font Family ── */
  --ff-display: 'Unbounded', 'Noto Sans TC', sans-serif;
  --ff-body: 'LINE Seed TW', sans-serif;
  --ff-paragraph-en: 'Unbounded', sans-serif;

  /* ── Font Size (Desktop) ── */
  --fs-display: 52px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 30px;
  --fs-h4: 24px;
  --fs-h5: 21px;
  --fs-h6: 18px;
  --fs-p: 18px;
  --fs-small: 16px;
  --fs-small2: 15px;

  /* ── Font Weight ── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  /* ── Line Height ── */
  --lh-16: 16px;
  --lh-20: 20px;
  --lh-24: 24px;
  --lh-28: 28px;
  --lh-34: 34px;
  --lh-40: 40px;
  --lh-48: 48px;
  --lh-58: 58px;
  --lh-70: 70px;
  --lh-84: 84px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* ── Letter Spacing ── */
  --ls-tight: -1px;
  --ls-none: 0px;
  --ls-normal: 1px;
  --ls-wide: 2px;

  /* ── Stroke Weight ── */
  --stroke-1: 1px;
  --stroke-2: 2px;
  --stroke-16: 16px;

  /* ── Item Spacing ── */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-168: 168px;
  --space-neg-24: -24px;

  /* ── Width / Breakpoint ── */
  --bp-compact-max: 599px;
  --bp-medium-min: 600px;
  --bp-expanded-min: 840px;
  --bp-large-min: 1200px;
  --bp-extra-large-min: 1600px;

  /* ── Width / Custom ── */
  --width-540: 540px;
  --width-680: 680px;
  --width-720: 720px;

  /* ── Layout ── */
  --section-py: 60px;
  --section-px: 80px;
  --container-max: 1280px;
  --page-max: 1920px;

  /* ── Radius ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 100px;

  /* ── Transitions ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.3s;

  /* ── Legacy aliases (保留向下相容) ── */
  --color-dark: var(--color-base-dark);
  --color-dark-80: var(--color-base-dark-80);
  --color-white: var(--color-base-white);
  --color-steel: var(--color-accent-steel-blue);
  --color-steel-15: var(--color-accent-steel-blue-15);
  --color-steel-08: var(--color-accent-steel-blue-8);
  --color-orange: var(--color-accent-orange-red);
  --color-mist: var(--color-neutral-mist-silver);
  --color-mist-15: var(--color-neutral-mist-silver-15);
  --color-arctic: var(--color-neutral-arctic-white);
  --color-gray-95: var(--color-base-grey-95);
  --color-gray-57: var(--color-base-grey-57);
  --color-rock: var(--color-neutral-rock-gray);
  --color-dark-60: var(--color-neutral-obsidian-black-60);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* -webkit-font-smoothing: antialiased; */
  /* 關閉抗鋸齒 避免Retina螢幕上中文字體太細 */
  overflow-x: hidden;
  max-width: 100%;
}

/* ---------- Skip Link (無障礙) ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 12px 24px;
  background: var(--color-dark);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

/* ---------- Focus Styles (無障礙) ---------- */
*:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Reduced Motion (無障礙) ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .marquee-row--left .marquee-row__track,
  .marquee-row--right .marquee-row__track {
    animation: none;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .testimonials__grid .review-card {
    opacity: 1;
    transform: none;
  }
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  line-height: var(--lh-normal);
  color: var(--color-dark);
  background: var(--color-white);
  /* max-width: var(--page-max); */
  margin: 0 auto;
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

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

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
}

/* =============================================
   ATOMS — 基礎元件樣式 (Atomic Design)
   ============================================= */

/* ---------- Typography: Headings ---------- */
.display__title {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
}

.h1__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-48);
}

.h2__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  padding-bottom: var(--space-16);
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-neutral-mist-silver-50);
}

.h3__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  margin-top: var(--space-48);
  margin-bottom: var(--space-24);
}

.h4__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.h5__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  color: var(--color-steel);
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.h5__title::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url('assets/images/pointer.svg') center / contain no-repeat;
  mask: url('assets/images/pointer.svg') center / contain no-repeat;
}

.h6__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

/* ---------- Typography: Body Text ---------- */
.body__text {
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-rock);
  margin-bottom: var(--space-16);
}

.display__title~.body__text {
  margin: 18px auto 48px;
}

.body__text--light {
  color: var(--color-arctic);
}

.desc__text {
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-gray-57);
}

.small__text {
  font-family: var(--ff-body);
  font-size: var(--fs-small2);
  font-weight: var(--fw-regular);
  color: var(--color-gray-57);
}

/* ---------- Typography: Nav Text ---------- */
.nav__text {
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  letter-spacing: 0.01em;
  transition: color var(--duration) var(--ease);
}

/* ---------- Typography: Link Text ---------- */
.link__text {
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  color: var(--color-mist);
  transition: color var(--duration) var(--ease);
}

.link__text:hover {
  color: var(--color-white);
}

.link__text--small {
  font-size: var(--fs-small2);
  color: var(--color-gray-57);
}

.link__text--small:hover {
  color: var(--color-white);
}

/* ---------- Image Atoms ---------- */
.img--rounded-sm {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.img--rounded-md {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.img--rounded-lg {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- Utilities ---------- */
/* 螢幕閱讀器可見、視覺隱藏（無障礙標題） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: var(--color-rock);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-57);
  font-size: var(--fs-small);
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: var(--radius-md);
}

.image-placeholder--dark {
  background: #1a1d20;
}

.image-placeholder--small {
  min-height: 120px;
  border-radius: var(--radius-sm);
}

.image-placeholder--gallery {
  min-height: 200px;
  border-radius: var(--radius-md);
}

/* ---------- Tags ---------- */
/* ── Ice Tag — 冰塊內凹透明感 ── */
.tag {
  display: inline-block;
  font-size: var(--fs-small);
  padding: 6px 20px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  letter-spacing: 1px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* 內凹：上方暗（凹進陰影）、下方亮（底部受光） */
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-top-color: rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.06),
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 -2px 3px rgba(255, 255, 255, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.6);
  color: var(--color-dark-60);
}

.tag--outline {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(0, 0, 0, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 -2px 3px rgba(255, 255, 255, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--color-mist);
}

.tag--filled {
  background: rgba(90, 156, 179, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(90, 156, 179, 0.12);
  border-top-color: rgba(0, 0, 0, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 2px 4px rgba(90, 156, 179, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    inset 0 -2px 3px rgba(255, 255, 255, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--color-steel);
}

.tag--mist {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(0, 0, 0, 0.1);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(0, 0, 0, 0.06),
    inset 0 -2px 3px rgba(255, 255, 255, 0.15),
    0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--fs-p);
  letter-spacing: 0.01em;
  line-height: 1.75;
}

.section-tag {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  margin-bottom: 8px;
}

.tag~.h1__title {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

/* ---------- Buttons (base) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-p);
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 18px 48px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  text-decoration: none;
}

.btn--wide,
.metallic-btn.btn--wide {
  width: 100%;
  max-width: 420px;
}

.btn--float {
  background: var(--color-steel);
  color: var(--color-white);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 20px rgba(90, 156, 178, 0.4);
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}

.btn--float:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(90, 156, 178, 0.5);
}

/* ─── Glass Button System ─── */
/* 玻璃質感：細邊反光 + 柔和光線掠過動畫 */

@keyframes glass-shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(250%) skewX(-15deg);
  }
}

.metallic-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-p);
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: var(--space-16) var(--space-48);
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  margin-top: 18px;
  /* 玻璃基底 */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* 細邊反光 — 上亮下暗模擬光源 */
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  /* 內側上緣高光 + 柔和外陰影 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--color-dark);
  transition: transform 0.15s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.metallic-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

.metallic-btn:active {
  transform: scale(0.97);
}

/* 文字層 */
.metallic-btn span {
  position: relative;
  z-index: 5;
}

/* 柔和反光掠過動畫 — 自動循環 */
.metallic-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 20%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0.08) 80%,
      transparent 100%);
  z-index: 3;
  pointer-events: none;
  animation: glass-shimmer 4s ease-in-out infinite;
  animation-delay: 1s;
}

/* 上緣細反光線 — 靜態高光 */
.metallic-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.9) 30%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 0.9) 70%,
      transparent);
  z-index: 4;
  pointer-events: none;
}

/* edge / edge-glow 保留結構但改為玻璃風格 */
.metallic-btn .edge {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  z-index: 2;
  pointer-events: none;
  border: none;
  /* 上方微亮、下方微暗的玻璃層次 */
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.12) 0%,
      transparent 40%,
      transparent 70%,
      rgba(0, 0, 0, 0.03) 100%);
}

.metallic-btn .edge-glow {
  display: none;
}

/* ── Variant: Obsidian — 深色玻璃 ── */
.metallic-btn.btn-obsidian {
  background: rgba(25, 29, 30, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom-color: rgba(255, 255, 255, 0.04);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08);
}

.metallic-btn.btn-obsidian span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.metallic-btn.btn-obsidian:hover {
  background: rgba(25, 29, 30, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

.metallic-btn.btn-obsidian::before {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.03) 20%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.03) 80%,
      transparent 100%);
}

.metallic-btn.btn-obsidian::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.35) 30%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.35) 70%,
      transparent);
}

/* ── Variant: Mist — 霧面玻璃 ── */
.metallic-btn.btn-mist {
  background: rgba(206, 210, 215, 0.45);
  color: var(--color-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.metallic-btn.btn-mist span {
  text-shadow: none;
}

.metallic-btn.btn-mist:hover {
  background: rgba(206, 210, 215, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ── Variant: Chrome — 透明玻璃 ── */
.metallic-btn.btn-chrome {
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
}

.metallic-btn.btn-chrome span {
  text-shadow: none;
}

.metallic-btn.btn-chrome:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ── Variant: Steel Blue — 鋼青玻璃 ── */
.metallic-btn.btn-steel {
  background: rgba(90, 156, 179, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.3);
  border-bottom-color: rgba(90, 156, 179, 0.3);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(90, 156, 179, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.metallic-btn.btn-steel span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.metallic-btn.btn-steel:hover {
  background: rgba(90, 156, 179, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 20px rgba(90, 156, 179, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.metallic-btn.btn-steel::before {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.04) 20%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0.04) 80%,
      transparent 100%);
}

.metallic-btn.btn-steel::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4) 30%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.4) 70%,
      transparent);
}

/* ── Variant: LINE — 官方品牌綠（無閃光、緊湊 padding） ── */
.metallic-btn.btn-line {
  background: #06C755;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.metallic-btn.btn-line:hover {
  background: #05B74D;
  box-shadow: 0 2px 6px rgba(6, 199, 85, 0.25);
}

.metallic-btn.btn-line::before,
.metallic-btn.btn-line::after {
  display: none;
}

.metallic-btn.btn-line .edge,
.metallic-btn.btn-line .edge-glow {
  display: none;
}

.metallic-btn.btn-line .line-icon {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* SVG 原為灰色半透明，濾鏡翻白不受原色影響 */
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* ── Variant: Ghost — 透明底＋淺灰文字／邊框，hover 變 metallic ── */
.metallic-btn.btn--ghost {
  background: transparent;
  color: var(--color-mist);
  border: 1px solid var(--color-mist);
  box-shadow: none;
}

.metallic-btn.btn--ghost::before,
.metallic-btn.btn--ghost::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.metallic-btn.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-top-color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

.metallic-btn.btn--ghost:hover::before,
.metallic-btn.btn--ghost:hover::after {
  opacity: 1;
}

/* ---------- Subtle Button ---------- */
.btn-subtle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-p);
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 14px 40px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-dark-60);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-subtle:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--color-dark);
}

.btn-subtle:active {
  background: rgba(0, 0, 0, 0.14);
}

/* ---------- Checklist ---------- */
.check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 24px 0;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-p);
  color: var(--color-gray-57);
}

.check-list li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-steel);
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.check-list--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.snowland__content .check-list--horizontal {
  padding: 0 24px;
}

.check-list--light li {
  color: var(--color-white);
}

.check-list--light li:before {
  background: var(--color-neutral-arctic-white-25);
}

/* ============================================
   HEADER
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--color-white), transparent);
  border-bottom: none;
  /* max-width: var(--page-max); */
  margin: 0 auto;
  transition: background 0.3s ease, border-bottom 0.3s ease, box-shadow 0.3s ease;
}

.header.is-scrolled {
  background: var(--color-white);
  border-bottom: 1px solid rgba(206, 210, 215, 0.15);
  box-shadow: 0 -1px 12px rgb(41 47 55 / 15%);
}

/* 內頁用：static 白底 64px，捲動後固定 */
.header--static {
  position: static;
  background: var(--color-white);
  border-bottom: 1px solid rgba(206, 210, 215, 0.15);
}

.header--static.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 -1px 12px rgb(41 47 55 / 15%);
  /* 不用 forwards：避免 transform: translateY(0) 殘留在 header 上，
     因為 transformed 祖先會讓 position:fixed 的子元素（.header__nav 手機選單）
     錨定到 header 而非 viewport，導致選單被壓縮在 header 區域內看不全 */
  animation: header-slide-down 0.3s ease;
}

@keyframes header-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--space-24);
  height: 80px;
  max-width: calc(var(--container-max) + var(--space-24) * 2);
  margin: 0 auto;
  transition: height 0.3s ease;
}

.header.is-scrolled .header__inner {
  height: 64px;
}

.header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo img {
  height: 64px;
  width: 147px;
  object-fit: contain;
}

.header__nav {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  flex: 1;
  align-self: stretch;
}

.header__nav a {
  color: var(--color-dark);
  white-space: nowrap;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  /* border-radius: var(--radius-pill); */
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.header__nav a:hover {
  background: var(--color-neutral-obsidian-black);
  color: #fff;
}

/* Header dropdown */
.header__dropdown {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

.header__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--color-dark);
  white-space: nowrap;
  padding: 0 12px;
  /* border-radius: var(--radius-pill); */
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.header__dropdown-toggle:hover,
.header__dropdown.is-open .header__dropdown-toggle {
  background: #191d1e;
  color: #fff;
}

.header__dropdown-arrow {
  transition: transform var(--duration) var(--ease);
}

.header__dropdown[aria-expanded="true"] .header__dropdown-arrow {
  transform: rotate(180deg);
}

.header__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--color-white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  padding: var(--space-8) 0;
  min-width: 180px;
  list-style: none;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0.2s;
}

.header__dropdown-menu a:hover {
  background: var(--color-neutral-obsidian-black-15);
  color: var(--color-neutral-obsidian-black);
}

.header__dropdown.is-open .header__dropdown-menu,
.header__dropdown:hover .header__dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.header__dropdown:hover .header__dropdown-toggle {
  background: #191d1e;
  color: #fff;
}

.header__dropdown:hover .header__dropdown-arrow {
  transform: rotate(180deg);
}

.header__dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-16);
  font-size: var(--fs-p);
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.header__dropdown-item:hover {
  background: var(--color-accent-steel-blue-30);
  color: var(--color-steel);
}

/* Header right side (currency + language) */
.header__right {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  align-self: stretch;
}

/* Currency wrap (dropdown container) */
.header__currency-wrap {
  position: relative;
  align-self: stretch;
  display: flex;
}

.header__currency,
.header__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  align-self: stretch;
  font-size: var(--fs-p);
  color: #191d1e;
  font-weight: 400;
  /* backdrop-filter: blur(6px); */
  background: rgba(206, 210, 215, 0.06);
  border: 1px solid rgba(206, 210, 215, 0.15);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.header__currency {
  gap: 4px;
  width: 72px;
  border: none;
  font-family: inherit;
}

.header__currency-arrow {
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}

.header__currency[aria-expanded="true"] .header__currency-arrow {
  transform: rotate(180deg);
}

/* Hover：黑底反白字 */
.header__currency:hover,
.header__currency-wrap:hover .header__currency,
.header__currency[aria-expanded="true"] {
  background: #191d1e;
  color: #fff;
}

.header__currency-wrap:hover .header__currency-arrow {
  transform: rotate(180deg);
}

/* Language wrap (dropdown container) */
.header__lang-wrap {
  position: relative;
  align-self: stretch;
  display: flex;
}

.header__lang {
  gap: 4px;
  width: auto;
  min-width: 72px;
  padding: 0 10px;
  border: none;
  font-family: inherit;
}

.header__lang-flag {
  font-size: 18px;
  line-height: 1;
}

.header__lang-option-flag {
  margin-right: 8px;
  font-size: 16px;
}

.header__lang-arrow {
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}

.header__lang[aria-expanded="true"] .header__lang-arrow {
  transform: rotate(180deg);
}

/* Hover：黑底反白字 — 語言按鈕 */
.header__lang:hover,
.header__lang-wrap:hover .header__lang,
.header__lang[aria-expanded="true"] {
  background: #191d1e;
  color: #fff;
}

.header__lang-wrap:hover .header__lang-arrow {
  transform: rotate(180deg);
}

/* Language dropdown */
.header__lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(206, 210, 215, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  /* padding-top 多 2px 作為滑鼠橋接區，避免 hover 中斷 */
  padding: 8px 0 6px;
  z-index: 1000;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.header__lang-dropdown.is-open,
.header__lang-wrap:hover .header__lang-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header__lang-option {
  padding: 8px 16px;
  font-size: 13px;
  color: #3a3f44;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.header__lang-option:hover {
  background: linear-gradient(135deg,
      rgba(200, 206, 213, 0.2) 0%,
      rgba(230, 233, 237, 0.35) 50%,
      rgba(200, 206, 213, 0.2) 100%);
  color: #111;
}

.header__lang-option.is-active {
  font-weight: 600;
  color: #111;
  background: rgba(206, 210, 215, 0.12);
}

/* Currency dropdown */
.header__currency-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(206, 210, 215, 0.25);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  /* padding-top 多 2px 作為滑鼠橋接區，避免 hover 中斷 */
  padding: 8px 0 6px;
  z-index: 1000;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.header__currency-dropdown.is-open,
.header__currency-wrap:hover .header__currency-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header__currency-option {
  padding: 8px 16px;
  font-size: 13px;
  color: #3a3f44;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.header__currency-option:hover {
  background: linear-gradient(135deg,
      rgba(200, 206, 213, 0.2) 0%,
      rgba(230, 233, 237, 0.35) 50%,
      rgba(200, 206, 213, 0.2) 100%);
  color: #111;
}

.header__currency-option.is-active {
  font-weight: 600;
  color: #111;
  background: rgba(206, 210, 215, 0.12);
}

.header__nav-active {
  font-weight: 700 !important;
}

/* Hamburger — hidden on desktop */
.header__hamburger {
  display: none;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  height: 90vh;
  min-height: 500px;
  max-height: 900px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8caabb 0%, #c5d5de 40%, #e8ecee 100%);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 48px var(--section-px);
  background: linear-gradient(transparent, rgba(13, 15, 16, 0.7));
}

.hero__logo-type {
  display: block;
  height: 48px;
  width: auto;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Invert the dark SVG fill to white */
  filter: brightness(0) invert(1);
}

/* ============================================
   STATS
   ============================================ */
.stats {
  background: #191d1e;
  color: var(--color-white);
  padding: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Ellipse2 — 大面積光暈 */
.bg-gradient-black::before {
  content: '';
  position: absolute;
  width: 1062px;
  height: 1062px;
  top: -360px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(206, 210, 215, 0.10) 0%,
      rgba(206, 210, 215, 0.05) 30%,
      rgba(206, 210, 215, 0.02) 55%,
      transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

/* Ellipse3 — 較亮的集中光暈 */
.bg-gradient-black::after {
  content: '';
  position: absolute;
  width: 532px;
  height: 532px;
  top: -310px;
  left: calc(50% + 10px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(248, 251, 248, 0.14) 0%,
      rgba(206, 210, 215, 0.08) 35%,
      rgba(206, 210, 215, 0.03) 60%,
      transparent 80%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.stats__inner {
  /* max-width: var(--container-max); */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
  position: relative;
  z-index: 1;
}

.stats__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 48px var(--section-px) 0;
}

.stats__desc {
  max-width: 640px;
  letter-spacing: 0.01em;
}

/* h1 內 logotype 圖片：尺寸跟隨 display__title font-size，深色 SVG 反白配深底 */
.stats__logo-type {
  display: block;
  width: 60%;
  height: auto;

  max-width: 100%;
  margin: 0 auto;
  margin-top: var(--space-24);
  filter: brightness(0) invert(1);
}

.stats__grid {
  position: relative;
  background: rgba(0, 0, 0, 0.15);
  padding: 40px var(--section-px) 48px;
}

.stats__divider-h {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(to right,
      rgba(90, 156, 179, 0) 0%,
      rgba(90, 156, 179, 0.3) 50%,
      rgba(90, 156, 179, 0) 100%);
}

.stats__items {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--container-max);
  margin: 0 auto;
}

.stats__item {
  flex: 1;
  text-align: center;
}

.stats__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.stats__number .num {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: 2.56px;
  background: linear-gradient(130deg, #e7e9ec 0%, #9399a2 50%, #d4d4d4 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.4s var(--ease);
}

.stats__symbol {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.25;
  background: linear-gradient(110deg, #ced2d7 0%, #8a9099 50%, #ced2d7 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.4s var(--ease);
}

/* Hover：金屬反光動畫 */
.stats__item:hover .stats__number .num,
.stats__item:hover .stats__symbol {
  background: linear-gradient(130deg,
      #8a9099 0%,
      #f8fbf8 25%,
      #ced2d7 50%,
      #f8fbf8 75%,
      #8a9099 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: metallic-shine 1.5s ease infinite;
}

@keyframes metallic-shine {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: -100% 50%;
  }
}

.stats__symbol--lg {
  font-size: 48px;
}

.stats__divider-v {
  width: 1px;
  height: 104px;
  background: rgba(206, 210, 215, 0.2);
  flex-shrink: 0;
  align-self: center;
}

.stats__label {
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* ============================================
   ABOUT TEINE
   ============================================ */
.teine {
  text-align: center;
  background: url('./assets/images/teine-banner2.webp') no-repeat center top;
  background-size: 100%;
  background-position: center 50px;
  position: relative;
}

.teine::before {
  content: "";
  width: 100%;
  height: 100px;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: linear-gradient(180deg, var(--color-white) 0%, transparent 100%);
}


.about-spotlight-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  padding: 0 var(--space-32);
  margin-top: 40px;
}

/* ============================================
   PRODUCTS
   ============================================ */
.products {
  background:
    radial-gradient(500px 500px at 50% -80px, var(--color-accent-steel-blue-30) 0%, var(--color-accent-steel-blue-0) 100%),
    radial-gradient(1256px 1256px at 50% 26px, var(--color-neutral-mist-silver-6) 0%, var(--color-white) 100%),
    var(--color-white);
  color: var(--color-dark);
  padding: var(--section-py) var(--section-px);
  text-align: center;
}

.products__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.products__subtitle {
  font-size: calc(var(--fs-display) * 0.8);
}

.products__desc {
  max-width: 600px;
  margin: 0 auto 48px;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 40px;
  text-align: center;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.plans-panel .product-card {
  align-items: flex-start;
}

.plans-panel .product-card__price span {
  font-size: var(--fs-h6);
}

.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.product-card__icon {
  width: 160px;
  height: 160px;
  margin-bottom: 8px;
}

.product-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__name {
  color: var(--color-dark);
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

.product-card__summary {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  width: 100%;
  margin-bottom: var(--space-8);
  text-align: left;
  color: var(--color-base-grey-57);
}

.product-card__summary .product-info__summary-item {
  align-items: flex-start;
  gap: var(--space-8);
  line-height: 1.5;
}

.product-card__summary .summary-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: inherit;
}


.product-card__price {
  font-family: var(--ff-display);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--color-steel);
  margin-bottom: 8px;
}

.product-card__price span {
  font-size: var(--fs-h3);
  font-weight: 800;
}

.plans-carousel .product-card__price span {
  font-size: var(--fs-h5);
}

.product-card__price small {
  font-size: var(--fs-small);
  font-weight: 400;
}

.product-card .metallic-btn {
  padding: 18px 64px;
}

.product-card__actions {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
}

.product-card__actions .metallic-btn {
  margin-top: 0;
}

.products__cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Plans Carousel ---------- */
.plans-carousel {
  position: relative;
  margin-top: var(--space-32);
}

.plans-carousel__viewport {
  overflow: hidden;
}

.plans-carousel__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
}

.plans-carousel__slide {
  flex: 0 0 calc((100% - 48px) / 3);
  align-items: flex-start;
}

/* private-lesson hero 情境圖自動淡入淡出 */
.pl-banner {
  position: relative;
  width: 100%;
  min-height: 360px;
  aspect-ratio: 5 / 3.3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-mist-silver-15);
}

.pl-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.pl-banner__img.is-active {
  opacity: 1;
}

/* private-lesson 方案輪播：viewport 隱藏溢出、track 用 transform 切換 */
#pl-plans-carousel .plans-carousel__viewport {
  overflow: hidden;
  width: 100%;
}

#pl-plans-carousel .plans-carousel__track {
  display: flex;
  gap: 24px;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 切換時的 fade+scale 動畫（疊加在 slide 之上） */
@keyframes pl-plan-switch {
  0% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#pl-plans-carousel .plans-carousel__track.is-switching>.product-card {
  animation: pl-plan-switch 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 桌機 ≥1200：一頁 3 張 */
#pl-plans-carousel .plans-carousel__track>.product-card {
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
  align-items: flex-start;
}

#pl-plans-carousel .product-card__price {
  align-self: flex-start;
}

#pl-plans-carousel .product-card__price span {
  font-size: var(--fs-h6);
}

/* 1199 以下：一頁 2 張 */
@media (max-width: 1199px) {
  #pl-plans-carousel .plans-carousel__track>.product-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

/* Reviews Carousel — 客戶好評（一頁兩張，淡入淡出） */
.reviews-carousel {
  width: 100%;
}

.reviews-carousel__viewport {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.reviews-carousel__slide {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-48);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.reviews-carousel .review-card {
  background: var(--color-base-grey-95);
  border-bottom: none;
  padding: var(--space-24);
  border-radius: var(--radius-md);
}

.reviews-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991px) {
  .reviews-carousel__slide {
    grid-template-columns: 1fr;
  }
}

.reviews-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

.reviews-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-neutral-mist-silver);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.reviews-carousel__dot.is-active {
  width: 24px;
  border-radius: 4px;
  background: var(--color-dark);
}

/* Plans Tabs — 滑雪教練課 / 自由滑雪 切換 */
.plans-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  background: var(--color-base-grey-95);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: var(--space-24) 0 var(--space-32);
}

.plans-tabs::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: var(--tab-indicator-left, 4px);
  width: var(--tab-indicator-width, 0);
  background: var(--color-dark);
  border-radius: var(--radius-pill);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

.plans-tab {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-32);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--fs-p);
  font-weight: 600;
  color: var(--color-gray-57);
  border-radius: var(--radius-pill);
  transition: color 0.3s ease;
}

.plans-tab:hover {
  color: var(--color-dark);
}

.plans-tab.is-active {
  color: var(--color-white);
}

.plans-tab.is-active:hover {
  color: var(--color-white);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
  max-width: 900px;
  margin: 0 auto;
}

/* Plans 面板容器 + 左右切換按鈕 */
.plans-panels {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

.plans-panels>.plans-panel {
  grid-row: 1;
  grid-column: 1;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plans-panels>.plans-panel:not(.is-active) {
  opacity: 0;
  transform: scale(0.94) translateX(40px);
  pointer-events: none;
}

.plans-panels>.plans-panel.is-active {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}

.plans-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plans-nav img {
  width: 28px;
  height: 28px;
  display: block;
  transition: transform 0.2s ease;
}

.plans-nav--prev {
  left: -8px;
}

.plans-nav--next {
  right: -8px;
}

.plans-nav--prev:hover img {
  transform: translateX(-3px);
}

.plans-nav--next:hover img {
  transform: translateX(3px);
}

/* Split layout — 左側標題、右側一次 2 張卡片 */
.plans-split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: var(--space-48);
  align-items: center;
}

.plans-split__title {
  padding-right: var(--space-16);
}

.plans-split__carousel {
  min-width: 0;
  position: relative;
}

.plans-carousel--split {
  margin-top: 0;
}

.plans-carousel--split .plans-carousel__slide {
  flex: 0 0 calc((100% - 24px) / 2);
}

.plans-carousel--split .plans-carousel__btn {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  width: 40px;
  height: 40px;
}

.plans-carousel--split .plans-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.plans-carousel--split .plans-carousel__btn:disabled:hover img {
  transform: none;
}

.plans-carousel--split .plans-carousel__btn--prev {
  left: 12px;
}

.plans-carousel--split .plans-carousel__btn--next {
  right: 12px;
}

.plans-carousel--split .plans-carousel__btn img {
  width: 20px;
  height: 20px;
}

.plans-carousel__slide {}

.plans-carousel__btn {
  position: absolute;
  top: 50%;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

.plans-carousel__btn img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.25s ease;
}

.plans-carousel__btn--prev {
  left: -40px;
}

.plans-carousel__btn--next {
  right: -40px;
}

.plans-carousel__btn--prev:hover img {
  transform: translateX(-6px);
}

.plans-carousel__btn--next:hover img {
  transform: translateX(6px);
}

.plans-carousel__media {
  width: 100%;
  aspect-ratio: 5 / 3.3;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.plans-carousel__media .image-placeholder {
  min-height: 0;
  height: 100%;
  border-radius: var(--radius-md);
}

/* ============================================
   SNOW LAND
   ============================================ */
.snowland {
  position: relative;
  background: var(--color-white);
  padding: 60px var(--section-px);
  overflow: hidden;
}

.snowland::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-steel-blue-30) 0%, var(--color-accent-steel-blue-0) 48%, var(--color-accent-steel-blue-0) 100%), radial-gradient(circle, var(--color-accent-steel-blue) 0%, var(--color-accent-steel-blue-0) 38%, var(--color-accent-steel-blue-0) 100%);
  pointer-events: none;
}

.snowland__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.48fr 1fr;
  border-radius: 34px;
  overflow: hidden;
  background: var(--color-steel);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.08);
}

.snowland__image {
  overflow: hidden;
}

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

.snowland__content {
  padding-top: 24px;
  color: var(--color-white);
  position: relative;
}

.snowland__content .metallic-btn,
.snowland__content .metallic-btn .edge,
.snowland__content .metallic-btn .edge-glow {
  border-radius: 0;
}

.snowland__content .metallic-btn {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: unset;
  height: 20%;
}

.snowland__title {
  margin-bottom: 16px;
  padding: 0 24px;
}

.snowland__title .en {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: 2px;
}

.snowland__desc {
  margin-bottom: 8px;
  padding: 0 24px;
}

/* ============================================
   CERTIFICATIONS
   ============================================ */
.certifications {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  padding: var(--section-py) var(--section-px);
}

.certifications::before {
  content: "";
  display: block;
  position: absolute;
  left: 10%;
  right: 0;
  top: -15%;
  bottom: 0;
  z-index: 0;
  background: url(assets/images/Supporting-elements-2.webp) center top / 80% no-repeat;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

.certifications::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, var(--color-white) 100%);
}

.certifications__inner {
  position: relative;
}


.certifications__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.48fr;
  gap: 64px;
  align-items: center;
}

.certifications__inner+.certifications__inner {
  margin-top: 96px;
}

.certifications__image {
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -22px rgba(20, 35, 60, 0.28);
}

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

.certifications__desc.body__text {
  color: var(--color-gray-57);
}

.certifications__cta-row {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

/* ============================================
   KOL VIDEOS
   ============================================ */
.kol {
  position: relative;
  overflow: hidden;
  padding: var(--section-py) var(--section-px);
  text-align: center;
}

.kol::before {
  content: "";
  display: block;
  position: absolute;
  left: 10%;
  right: 0;
  top: -15%;
  bottom: 0;
  z-index: 0;
  background: url('assets/images/Supporting-elements-2.png') right top / 80% no-repeat;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
}

.kol::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, var(--color-white) 100%);
}

.kol__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.8) 20%, transparent 70%);
}

.kol__desc {
  margin-bottom: 48px;
}

.kol__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 32px;
  column-gap: 12px;
  text-align: left;
}

/* 嘗試隱藏 Instagram 嵌入內的 Footer / SocialProof（跨域 iframe 通常無效，保留作為測試） */
.Embed .Footer,
.Embed .SocialProof,
.Embed .CaptionComments,
.Embed .Actions {
  display: none !important;
}

.kol-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kol-card__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #1a1d20;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.03);
}

.kol-card__video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.kol-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 4px;
  color: var(--color-neutral-rock-gray);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}

.kol-card__link svg {
  color: #ff0000;
  flex-shrink: 0;
}

.kol-card__link:hover {
  color: var(--color-neutral-obsidian-black);
  text-decoration: underline;
}

/* YouTube play button overlay */
.kol-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.kol-card__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent #fff;
}

.kol-card__thumb:hover .kol-card__play {
  background: rgba(255, 0, 0, 0.85);
  transform: translate(-50%, -50%) scale(1.1);
}


/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials {
  background: linear-gradient(180deg, var(--color-white) 0%, #f3f1ee 15%, #f7f6f3 40%, #fbfafa 70%, var(--color-white) 100%);
  padding: var(--section-py) var(--section-px);
  text-align: center;
}

.testimonials__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.testimonials__title {
  margin: var(--space-48) 0;
}

.testimonials__gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 48px;
  margin-left: calc(-1 * var(--section-px));
  margin-right: calc(-1 * var(--section-px));
  overflow: hidden;
}

.testimonials__gallery::before,
.testimonials__gallery::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}

.testimonials__gallery::before {
  left: 0;
  background: linear-gradient(to right, #f3f1ee, transparent);
}

.testimonials__gallery::after {
  right: 0;
  background: linear-gradient(to left, #f3f1ee, transparent);
}

.marquee-row {
  overflow: hidden;
}

.marquee-row__track {
  display: flex;
  gap: 16px;
  width: max-content;
}

.marquee-row--left .marquee-row__track {
  animation: marquee-left 60s linear infinite;
}

.marquee-row--right .marquee-row__track {
  animation: marquee-right 60s linear infinite;
}

.marquee-row__track img {
  width: 280px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

@keyframes marquee-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ---------- Scroll Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 {
  transition-delay: 0.2s;
  animation-delay: 0.2s;
}

.reveal-delay-2 {
  transition-delay: 0.4s;
  animation-delay: 0.4s;
}

.reveal-delay-3 {
  transition-delay: 0.6s;
  animation-delay: 0.6s;
}

.reveal-delay-4 {
  transition-delay: 0.8s;
  animation-delay: 0.8s;
}

.testimonials__grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  max-width: 1080px;
  margin: 0 auto;
}

/* 評論依序由右至左滑入 */
@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 覆寫 reveal 預設動畫，改由子元素各自控制 */
.testimonials__grid.reveal {
  opacity: 1;
  transform: none;
}

.testimonials__grid .review-card {
  opacity: 0;
  transform: translateX(60px);
}

.testimonials__grid.is-visible .review-card {
  animation: slide-in-right 0.5s ease-out forwards;
}

.testimonials__grid.is-visible .review-card:nth-child(1) {
  animation-delay: 0s;
}

.testimonials__grid.is-visible .review-card:nth-child(2) {
  animation-delay: 0.1s;
}

.testimonials__grid.is-visible .review-card:nth-child(3) {
  animation-delay: 0.2s;
}

.testimonials__grid.is-visible .review-card:nth-child(4) {
  animation-delay: 0.3s;
}

.testimonials__grid.is-visible .review-card:nth-child(5) {
  animation-delay: 0.4s;
}

/* 隱藏評論：個別卡片依需要分批顯示 */
.testimonials__hidden .review-card {
  display: none;
}

.testimonials__hidden .review-card.is-revealed {
  display: block;
  animation: slide-in-right 0.5s ease-out forwards;
}

.review-card {
  background: none;
  padding: var(--space-32) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.review-card:last-child {
  border-bottom: none;
}

.review-card__body {
  flex: 1;
}

.review-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.review-card__stars {
  display: flex;
  gap: 4px;
}

.review-card__stars .star-icon {
  width: 24px;
  height: 24px;
}

.review-card__info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-card__name {
  font-weight: 700;
}


.review-card__title {
  margin-bottom: 8px;
}

.testimonials__hidden {
  display: contents;
}

.reviews-toggle-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 48px;
}

.reviews-toggle-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 120px;
  background: linear-gradient(to top, var(--color-white), transparent);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.reviews-toggle-wrap.is-open::before {
  opacity: 0;
}


/* ============================================
   ABOUT
   ============================================ */
.about {
  color: var(--color-dark);
  padding: var(--section-py) var(--section-px);
}

.about__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about .tag--filled {
  background: var(--color-steel-15);
  color: var(--color-steel);
}

.about__title {
  margin: 24px 0 20px;
}

.about__desc {
  margin-bottom: 16px;
}

.about .body__text--light {
  color: var(--color-gray-57);
}

/* ============================================
   PARTNERS
   ============================================ */
.partners {
  color: var(--color-dark);
}

.partners__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 48px 0;
  border-top: 1px solid var(--color-base-grey-35-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.partners__eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 4px;
  color: var(--color-base-grey-57);
  text-transform: uppercase;
}

.partners__logos {
  width: 100%;
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.partners__logo {
  min-width: 120px;
  display: inline-block;
  width: calc(20% - 4px);
  padding: 12px;
}

.partners__logo img {
  max-width: 100%;
  max-height: 56px;
  margin: 0 auto;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter var(--duration) var(--ease), opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.partners__logo:hover img,
.partners__logo:focus-visible img {
  filter: grayscale(0%);
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 768px) {

  .partners__inner {
    padding: 32px 0;
    gap: 24px;
  }

  .partners__logos {
    gap: 56px 32px;
    justify-content: center;
  }

  .partners__logo {
    flex: 0 0 calc(50% - 16px);
    min-width: 0;
  }

  .stats__logo-type {
    width: 80%;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  position: relative;
  background: var(--color-dark) url(./assets/images/footer-bg.png) 100% 100% no-repeat;
  color: var(--color-mist);
  padding: 48px 40px;
  overflow: hidden;
}

.footer__divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-accent-steel-blue-0), var(--color-accent-steel-blue-30) 50%, var(--color-accent-steel-blue-0));
}

.footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 0 var(--space-32);
}

.footer__top {
  display: flex;
  gap: var(--space-48);
  align-items: flex-end;
  padding-bottom: var(--space-24);
}

.footer__brand {
  flex: 0.5;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.footer__logo {
  opacity: 0.7;
}

.footer__logo-img {
  height: 78px;
  width: 240px;
  object-fit: contain;
  filter: brightness(0) invert(0.85) sepia(0.05) saturate(0.3) hue-rotate(180deg);
}

.footer__socials {
  display: flex;
  gap: var(--space-16);
}

.footer__mid .footer__socials {
  margin-left: auto;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  opacity: 0.5;
  transition: opacity var(--duration) var(--ease);
}

.footer__social:hover {
  opacity: 1;
}

.footer__social img {
  width: 40px;
  height: 40px;
}

.footer__links {
  display: flex;
  gap: var(--space-24);
  flex: 1;
  padding-left: var(--space-48);
}

.footer__col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.footer__col--contact {
  flex: none;
  width: 260px;
}

.footer__col-title {
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.14px;
  color: var(--color-neutral-mist-silver-50);
  margin: var(--space-12) 0;
  letter-spacing: 4px;
}

.footer__col-list {
  display: flex;
  flex-direction: column;
}

.footer__link {
  font-size: var(--fs-p);
  line-height: 1.75;
  letter-spacing: 0.18px;
  color: var(--color-mist);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--duration) var(--ease);
}

.footer__link:hover {
  color: var(--color-white);
}

.footer__link--sm {
  font-size: 16px;
  letter-spacing: 0.16px;
}

.footer__mid {
  display: flex;
  gap: var(--space-80);
  align-items: center;
  padding-top: 17px;
  border-top: 1px solid var(--color-neutral-mist-silver-15);
}

.footer__info {
  font-size: var(--fs-small);
  line-height: 1.7;
  letter-spacing: 0.14px;
  color: var(--color-neutral-mist-silver-50);
  width: 300px;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 17px;
  border-top: 1px solid var(--color-neutral-mist-silver-15);
}

.footer__bottom-left {
  display: flex;
  gap: var(--space-16);
  padding: var(--space-8) 0;
}

.footer__bottom-link {
  font-family: var(--ff-paragraph-en), var(--ff-body);
  font-size: 12.8px;
  line-height: 24px;
  color: var(--color-neutral-mist-silver-50);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.footer__bottom-link:hover {
  color: var(--color-mist);
}

.footer__copyright {
  font-family: var(--ff-paragraph-en), var(--ff-body);
  font-size: 12.8px;
  line-height: 24px;
  color: var(--color-neutral-mist-silver-50);
}


/* ============================================
   CONTACT US
   ============================================ */
.contact {
  position: relative;
  padding: var(--section-py) var(--section-px);
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.contact__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.contact__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(13, 15, 16, 0.7) 0%, rgba(13, 15, 16, 0.3) 70%, transparent 100%);
  z-index: 1;
}

.contact__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.contact__title {
  color: var(--color-white);
  margin-bottom: 16px;
}

.contact__desc {
  margin-bottom: var(--space-24);
  margin-top: var(--space-24);
}

/* ============================================
   INNER PAGE — SHARED
   ============================================ */

/* Breadcrumb */
/* ── Breadcrumb Bar — 流動金屬感 ── */
@keyframes metal-flow {
  0% {
    background-position: 0% 50%;
  }

  15% {
    background-position: 100% 50%;
  }

  30% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.breadcrumb-bar {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 var(--section-px);
  background:
    linear-gradient(90deg,
      #c8ccd0 0%,
      #dfe1e4 12%,
      #f5f5f6 24%,
      #e2e4e7 36%,
      #cdd1d5 48%,
      #b8bcc1 56%,
      #d3d6da 68%,
      #edeef0 80%,
      #d8dade 90%,
      #c8ccd0 100%);
  background-size: 200% 100%;
  animation: metal-flow 24s ease-in-out infinite;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* 上方反光線 */
.breadcrumb-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 10%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 70%, transparent 90%);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-64);
  font-size: var(--fs-small);
  color: var(--color-neutral-rock-gray);
  max-width: calc(var(--container-max) + var(--space-64) * 2);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.breadcrumb a {
  color: var(--color-neutral-rock-gray);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.breadcrumb a:hover {
  color: var(--color-dark);
}

.breadcrumb__sep {
  color: rgba(0, 0, 0, 0.25);
}

/* ============================================
   COVER HERO — 全螢幕影片開場
   ============================================ */
.cover-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 36px);
  min-height: 540px;
  overflow: hidden;
  background: #000;
}

.cover-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* 影片載入完成前顯示的預設封面圖，載入後淡出 */
.cover-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.cover-hero__poster.is-hidden {
  opacity: 0;
}

/* 底部漸層讓 scroll cue 對比更明顯 */
.cover-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 1;
}

.cover-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-32);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-white);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  animation: cover-cue-bounce 2s ease-in-out infinite;
}

.cover-hero__scroll-cue svg {
  width: 22px;
  height: 22px;
  display: block;
}

@keyframes cover-cue-bounce {

  0%,
  100% {
    transform: translate(-50%, 0);
    opacity: 0.85;
  }

  50% {
    transform: translate(-50%, 8px);
    opacity: 1;
  }
}

/* 暫停／播放按鈕（WCAG 2.2.2 — 自動播放超過 5 秒須提供控制） */
.cover-hero__toggle {
  position: absolute;
  top: var(--space-24);
  right: var(--space-24);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.cover-hero__toggle:hover {
  background: rgba(0, 0, 0, 0.65);
  border-color: rgba(255, 255, 255, 0.75);
}

.cover-hero__toggle:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.cover-hero__toggle:active {
  transform: scale(0.94);
}

.cover-hero__toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* 預設播放中：顯示暫停 icon */
.cover-hero__toggle .cover-hero__toggle-play {
  display: none;
}

.cover-hero__toggle[data-state="paused"] .cover-hero__toggle-pause {
  display: none;
}

.cover-hero__toggle[data-state="paused"] .cover-hero__toggle-play {
  display: block;
}

@media (max-width: 767px) {
  .cover-hero {
    min-height: 480px;
  }

  .cover-hero__toggle {
    top: var(--space-16);
    right: var(--space-16);
  }
}

/* Page Hero */
.page-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--color-dark);
  display: flex;
  align-items: flex-end;
  padding: var(--space-48) var(--section-px);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--color-base-dark-80), transparent 60%);
}

.page-hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
  width: 100%;
  color: var(--color-white);
}

@media (max-width: 991px) {
  .page-hero__content {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .teine {
    background-size: 150%;
  }

  .partners__logo {
    width: calc(33% - 4px);
    margin: 24PX auto;
  }
}

.page-hero__title {
  margin-bottom: var(--space-24);
}

.page-hero__tags {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}

/* Inner page wrapper */
.page-wrap {
  padding: 0 var(--section-px);
  background: var(--color-white);
}

.page-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  /* padding: 0 0 var(--section-py); */
}

/* 全域 grain 顆粒紋理覆蓋層（透過 .bg-grain ::before 疊加 SVG noise） */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Two-column product layout */
.product-layout {
  display: block;
}

/* 頂部：輪播 + 側欄並排 */
.product-top {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-24);
}

.product-top__media {
  flex: 2;
  min-width: 0;
}

.product-main {
  min-width: 0;
}

.product-sidebar {
  flex: 1.05;
  min-width: 0;
}

/* 1440 以下放大側欄比例，避免方案/金額被擠壓 */
@media (max-width: 1439px) {
  .product-top {
    gap: var(--space-32);
  }

  .product-top__media {
    flex: 1.3;
    max-width: 100%;
  }

  .product-sidebar {
    flex: 1;
  }
}

/* Order summary card — 半透明玻璃效果 */
.order-card {
  background: transparent;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.order-card__title {
  font-family: var(--ff-body);
  font-size: var(--fs-h5);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  border-bottom: 1px solid var(--color-neutral-mist-silver-15);
  margin-top: 0;
}

@media (max-width: 991px) {
  .order-card__title {
    display: block;
  }
}

.order-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--color-gray-57);
}

.order-card__row--total {
  font-size: var(--fs-h5);
  font-weight: 700;
  color: var(--color-dark);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-neutral-mist-silver-15);
}

.order-card__price {
  font-weight: 700;
  color: var(--color-dark);
}

.price-suffix {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
}

.order-card__divider {
  border: none;
  border-top: 1px solid var(--color-neutral-mist-silver-50);
  margin: var(--space-8) 0;
}

/* Image carousel */
.carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 100%;
  z-index: 1;
}

.carousel .image-placeholder {
  aspect-ratio: 5 / 3;
  min-height: auto;
  height: auto;
}

.carousel__track {
  display: flex;
  transition: transform 0.4s var(--ease);
}

.carousel__slide {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 5 / 3.3;
}

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

/* 一次顯示兩張（桌面 / 平板）；手機單張 */
.carousel--two-up .carousel__track {
  gap: var(--space-16);
}

.carousel--two-up .carousel__slide {
  width: calc(50% - var(--space-8));
}

@media (max-width: 991px) {
  .carousel--two-up .carousel__track {
    gap: var(--space-12);
  }

  .carousel--two-up .carousel__slide {
    width: 100%;
  }
}

.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease);
  z-index: 2;
}

.carousel__btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

.carousel__btn img {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform 0.2s ease;
}

.carousel__btn--prev {
  left: 12px;
}

.carousel__btn--next {
  right: 12px;
}

.carousel__btn--prev:hover img {
  transform: translateX(-3px);
}

.carousel__btn--next:hover img {
  transform: translateX(3px);
}

.carousel__counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  font-size: var(--fs-small2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  z-index: 2;
}

/* 商品頁 carousel 縮圖指示器 — 固定大小、超出橫向裁切（JS 控制 scrollLeft 跟隨 active dot） */
[id$="carousel-dots"] {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[id$="carousel-dots"]::-webkit-scrollbar {
  display: none;
}

.dot-btn {
  flex: 0 0 72px !important;
  min-width: 0;
}

@media (max-width: 767px) {
  .dot-btn {
    flex: 0 0 48px !important;
  }
}

/* Product info section */
.product-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32) 0;
  padding-top: 0;

}


.product-info__summary {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-12);
  font-size: var(--fs-small);
  color: var(--color-base-grey-57);
  margin: var(--space-16) 0;
}

.product-info .product-info__summary {
  flex-direction: row;
}

.product-info__summary-item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Content sections */
.content-section {
  padding: var(--space-48) 0;
}

.tag+.content-section__title {
  margin-top: var(--space-12);
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  margin-top: var(--space-48);
}

.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.feature-card {
  border-radius: var(--radius-md);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

@media (max-width: 991px) {
  .feature-card {
    padding: var(--space-12);
  }
}

.feature-card__icon {
  display: block;
  width: var(--space-64);
  height: var(--space-64);
  font-size: 32px;

  background-color: #efefef;
  text-align: center;
  border-radius: 50%;
  padding: 8px;
}

.feature-card__title {
  font-weight: 700;
}

.feature-card__desc {
  font-size: var(--fs-p);
  color: var(--color-gray-57);
  line-height: 1.7;
}

/* Feature grid 輪流黑色 accent（滑動方塊） */
.feature-grid--rotate {
  position: relative;
}

.feature-grid__accent {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--accent-w, 0);
  height: var(--accent-h, 0);
  transform: translate(var(--accent-x, 0), var(--accent-y, 0));
  background: var(--color-neutral-obsidian-black);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  z-index: 0;
  pointer-events: none;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-grid--rotate .feature-card {
  position: relative;
  z-index: 1;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}

.feature-grid--rotate .feature-card.is-accent {
  background: transparent;
  color: var(--color-white);
  box-shadow: none;
}

.feature-grid--rotate .feature-card__title,
.feature-grid--rotate .feature-card__desc {
  color: inherit;
  transition: color 0.4s ease, opacity 0.4s ease;
}

.feature-grid--rotate .feature-card__desc {
  opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
  .feature-grid__accent {
    transition: none;
  }

  .feature-grid--rotate .feature-card {
    transition: none;
  }
}

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding: 0 var(--space-24);
}

.timeline::before {
  display: none;
}

.timeline__item {
  position: relative;
  padding: var(--space-12) 0;
  display: flex;
  gap: var(--space-16);
}

.timeline__item::before {
  display: none;
  border: 2px solid var(--color-white);
}

.timeline__time {
  font-weight: 700;
  white-space: nowrap;
  min-width: 50px;
}

.timeline__desc {
  color: var(--color-gray-57);
}

/* Timeline — 時間軸樣式（含左側時間 + 中間圓點連線） */
.timeline--axis {
  padding: var(--space-24) 0 0;
  position: relative;
}

.timeline--axis::before {
  display: block;
  content: '';
  position: absolute;
  left: 96px;
  top: 32px;
  bottom: 16px;
  width: 2px;
  background: var(--color-neutral-mist-silver-50);
}

.timeline--axis .timeline__item {
  position: relative;
  padding: 0 0 var(--space-24) 0;
  gap: var(--space-32);
  align-items: flex-start;
}

.timeline--axis .timeline__item:last-child {
  padding-bottom: 0;
}

.timeline--axis .timeline__item::before {
  display: block;
  content: '';
  position: absolute;
  left: 90px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-neutral-mist-silver-50);
  box-shadow: none;
  z-index: 1;
}

.timeline--axis .timeline__time {
  min-width: 70px;
  text-align: right;
  flex-shrink: 0;
  padding-top: 2px;
  color: var(--color-dark);
  font-family: 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.timeline--axis .timeline__desc {
  flex: 1;
  padding-left: var(--space-24);
  color: var(--color-dark);
}

.timeline--axis .timeline__desc .desc__text {
  color: var(--color-gray-57);
  display: inline-block;
  margin-top: var(--space-4);
}

/* Price table */
.price-table {
  width: 100%;
  max-width: 500px;
  border-collapse: collapse;
}

.price-table th,
.price-table td {
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 1px solid var(--color-neutral-obsidian-black-15);
}

.price-table th {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  font-weight: 700;
}

.price-table td {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
}

.price-table__highlight {
  background: var(--color-accent-steel-blue-8);
}

.price-table__badge {
  display: inline-block;
  background: var(--color-steel);
  color: var(--color-white);
  font-size: var(--fs-small2);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-left: var(--space-8);
}

/* Includes / Excludes list */
.includes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.includes-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-p);
}

.includes-list__item--yes::before {
  content: '✓';
  color: var(--color-steel);
  font-weight: 700;
}

.includes-list__item--no::before {
  content: '✗';
  color: var(--color-accent-orange-red);
  font-weight: 700;
}

/* Facility table */
.facility-table {
  display: flex;
  flex-direction: column;
}

.facility-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-16);
  padding: var(--space-16) 0;
  margin: 0 var(--space-24);
  border-bottom: 1px solid var(--color-neutral-mist-silver-50);
}

.facility-row:first-child {
  border-top: 1px solid var(--color-neutral-mist-silver-50);
}

.facility-row__name {
  font-size: var(--fs-p);
  font-weight: 700;
  line-height: var(--lh-relaxed);
}

.facility-row__desc {
  font-size: var(--fs-p);
  line-height: var(--lh-relaxed);
  color: var(--color-rock);
}

/* 方案選擇 Radio — 訂購側欄 */
.plan-choose {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

.plan-choose__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-mist-silver);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.plan-choose__item:hover {
  border-color: var(--color-dark);
}

.plan-choose__item input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-choose__radio {
  display: none;
}

.plan-choose__item:has(input[type="radio"]:checked) {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-white);
}

.plan-choose__item:has(input[type="radio"]:checked) .plan-choose__label,
.plan-choose__item:has(input[type="radio"]:checked) .plan-choose__price {
  color: var(--color-white);
}

.plan-choose__item:has(input[type="radio"]:checked) .plan-choose__label small,
.plan-choose__item:has(input[type="radio"]:checked) .plan-choose__price-suffix {
  color: var(--color-mist);
}

.plan-choose__label {
  font-size: var(--fs-p);
  font-weight: 600;
  color: var(--color-dark);
  line-height: 1.4;
}

.plan-choose__label small {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-gray-57);
  margin-top: 2px;
}

.plan-choose__price {
  font-family: var(--ff-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.plan-choose__price-suffix {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-57);
}

/* 適合對象列表 — 打勾 icon + 標題 + 分隔線 + 描述 */
.target-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  margin: var(--space-12);
}

.target-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.target-row__icon {
  flex-shrink: 0;
  color: var(--color-steel);
}

.target-row__title {
  font-weight: 700;
  margin: 0;
  padding-right: var(--space-12);
  border-right: 1px solid var(--color-neutral-mist-silver-50);
  flex-shrink: 0;
}

.target-row__desc {
  font-size: var(--fs-small);
  color: var(--color-rock);
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .target-row {
    flex-wrap: wrap;
  }

  .target-row__title {
    border-right: none;
    padding-right: 0;
  }

  .target-row__desc {
    flex-basis: 100%;
    padding-left: calc(20px + var(--space-12));
  }
}

/* Lesson steps — 教學內容圖文區塊 */
/* RWD: desktop 6 欄 / 平板 3 欄 / 手機 2 欄 */
.lesson-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-16);
}

@media (max-width: 1199px) {
  .lesson-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .lesson-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.lesson-step {
  text-align: center;
}

.lesson-step__media {
  aspect-ratio: 1;
  background: var(--color-base-grey-95);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.lesson-step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson-step__title {
  font-size: var(--fs-small);
  color: var(--color-rock);
  line-height: 1.4;
  margin: 0;
}

/* Plan compare table */
.plan-compare__wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--space-64);
}

.plan-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-neutral-mist-silver-50);
}

.plan-compare th,
.plan-compare td {
  padding: var(--space-16);
  text-align: center;
  border-bottom: 1px solid var(--color-neutral-mist-silver-50);
  width: 50%;
}

.plan-compare tr:last-child td {
  border-bottom: none;
}

.plan-compare th {
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--ff-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  padding: var(--space-12);
}

.plan-compare th small {
  display: block;
  font-size: var(--fs-small);
  font-weight: 400;
  margin-top: var(--space-4);
  opacity: 0.7;
}

.plan-compare th+th {
  border-left: 1px solid var(--color-neutral-obsidian-black-40);
}

.plan-compare td+td {
  border-left: 1px solid var(--color-neutral-mist-silver-50);
}

.plan-compare__price {
  background: var(--color-base-grey-95);
}

.plan-compare__price strong {
  font-size: var(--fs-h4);
  color: var(--color-dark);
  font-weight: 800;
}

.plan-compare__price small {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  margin-left: var(--space-4);
}

.plan-compare__feature {
  font-size: var(--fs-p);
  line-height: var(--lh-relaxed);
}

.plan-compare__feature--yes {
  color: var(--color-steel);
  font-weight: 600;
}

.plan-compare__feature--no {
  color: var(--color-gray-57);
}

.plan-compare__feature--addon {
  color: var(--color-rock);
}

.plan-compare__note {
  margin-top: var(--space-16);
  color: var(--color-gray-57);
  line-height: var(--lh-relaxed);
}

/* Review card for inner pages */
.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.review-item {
  background: var(--color-base-grey-95);
  border-radius: var(--radius-md);
  padding: var(--space-24);
}

.review-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.review-item__author {
  font-weight: 700;
}

.review-item__date {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
}

.review-item__text {
  color: var(--color-gray-57);
  line-height: 1.75;
}

/* Cancellation policy */
.cancel-policy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
}

.cancel-policy__item {
  text-align: center;
  padding: var(--space-16);
  background: var(--color-base-grey-95);
  border-radius: var(--radius-md);
}

.cancel-policy__time {
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.cancel-policy__rate {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
}

/* Product choice cards */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-24);
}

.choice-card {
  border: 1px solid var(--color-neutral-mist-silver-15);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.choice-card:hover {
  border-color: var(--color-steel);
  box-shadow: 0 4px 20px var(--color-accent-steel-blue-10);
}

.choice-card img {
  margin-bottom: var(--space-8);
}

.choice-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.choice-card__price {
  font-family: var(--ff-display);
  /* font-size: var(--fs-h6); */
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}

.choice-card__price span {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--color-gray-57);
}

/* ============================================
   DARK MODE — page-wrap.dark-mode 全域樣式覆寫
   ============================================ */
.page-wrap.dark-mode {
  background: #26282b;
  color: var(--color-white);
}

/* Headings */
.page-wrap.dark-mode .h1__title,
.page-wrap.dark-mode .h2__title,
.page-wrap.dark-mode .h3__title,
.page-wrap.dark-mode .h4__title,
.page-wrap.dark-mode .h6__title,
.page-wrap.dark-mode .content-section__title,
.page-wrap.dark-mode .product-card__name {
  color: var(--color-white);
}

/* Body / desc / small text */
.page-wrap.dark-mode .body__text,
.page-wrap.dark-mode .desc__text,
.page-wrap.dark-mode .small__text {
  color: var(--color-mist);
}

.page-wrap.dark-mode .body__text strong,
.page-wrap.dark-mode .desc__text strong {
  color: var(--color-white);
}


.page-wrap.dark-mode .plan-row__notes .small__text {
  color: var(--color-gray-57);
}


/* Section title 下方分隔線改為半透明白 */
.page-wrap.dark-mode .content-section__title {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Timeline */
.page-wrap.dark-mode .timeline__time {
  color: var(--color-white);
}

.page-wrap.dark-mode .timeline__desc {
  color: var(--color-mist);
}

.page-wrap.dark-mode .timeline__desc strong {
  color: var(--color-white);
}

.page-wrap.dark-mode .timeline__desc .desc__text {
  color: var(--color-mist);
}

/* Feature card */
.page-wrap.dark-mode .feature-card__icon {
  background-color: rgba(255, 255, 255, 0.08);
}

.page-wrap.dark-mode .feature-card__title {
  color: var(--color-white);
}

.page-wrap.dark-mode .feature-card__desc {
  color: var(--color-mist);
}

/* Product card → 半透明白底 */
.page-wrap.dark-mode .product-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.page-wrap.dark-mode .product-card:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.page-wrap.dark-mode .product-card__name {
  color: var(--color-white);
}

.page-wrap.dark-mode .product-card__summary {
  color: var(--color-mist);
}

.page-wrap.dark-mode .product-card__summary strong {
  color: var(--color-white);
}

.page-wrap.dark-mode .product-card__price {
  color: var(--color-white);
}

.page-wrap.dark-mode .product-card__price small {
  color: var(--color-mist);
}

.page-wrap.dark-mode .product-card__summary .summary-icon {
  color: var(--color-mist);
}

/* Plans nav 箭頭翻白 */
.page-wrap.dark-mode .plans-nav img {
  filter: brightness(0) invert(1);
}

/* Accordion */
.page-wrap.dark-mode .accordion {
  border-color: rgba(255, 255, 255, 0.1);
}

.page-wrap.dark-mode .accordion__header {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-white);
}

.page-wrap.dark-mode .accordion__body {
  background: rgba(255, 255, 255, 0.02);
}

.page-wrap.dark-mode .accordion__body,
.page-wrap.dark-mode .accordion__body p,
.page-wrap.dark-mode .accordion__body div {
  color: var(--color-mist);
}

.page-wrap.dark-mode .accordion__body strong {
  color: var(--color-white);
}

/* Price table */
.page-wrap.dark-mode .price-table {
  color: var(--color-mist);
}

.page-wrap.dark-mode .price-table th {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.page-wrap.dark-mode .price-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* page-hero__content 強制白文字（覆蓋既有 inline color:dark） */
.page-wrap.dark-mode .page-hero__content {
  color: var(--color-white);
}

/* ============================================
   ABOUT — 聯絡我們卡片
   ============================================ */
.about-contact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.about-contact__item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-24);
  border: 1px solid var(--color-neutral-mist-silver-15);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-decoration: none;
  color: var(--color-dark);
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.about-contact__item:hover {
  border-color: var(--color-steel);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.about-contact__item:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 3px;
}

.about-contact__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--duration) var(--ease);
}

.about-contact__item:hover .about-contact__icon {
  transform: scale(1.05);
}

.about-contact__icon img,
.about-contact__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.about-contact__icon--line {
  background: #06C755;
}

.about-contact__icon--mail {
  background: var(--color-dark);
}

.about-contact__icon--ig {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.about-contact__icon--fb {
  background: #1877F2;
}

.about-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.about-contact__label {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.about-contact__value {
  font-size: var(--fs-p);
  color: var(--color-dark);
  font-weight: 700;
  word-break: break-all;
}

@media (max-width: 767px) {
  .about-contact {
    grid-template-columns: 1fr;
  }

  .about-contact__item {
    padding: var(--space-12) var(--space-16);
  }

  .about-contact__icon {
    width: 40px;
    height: 40px;
  }

  .about-contact__icon img,
  .about-contact__icon svg {
    width: 22px;
    height: 22px;
  }
}

/* ============================================
   INNER PAGE — FORMS
   ============================================ */
.form-section {
  padding: var(--space-48) 0;
}

.form-group {
  margin-bottom: var(--space-24);
}

.form-group .metallic-btn {
  margin-top: 0;
}

.form-label {
  display: block;
  font-weight: 700;
  font-size: var(--fs-small);
  margin-bottom: var(--space-8);
  color: var(--color-dark);
}

.form-label--required::after {
  content: ' *';
  color: var(--color-accent-orange-red);
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-neutral-mist-silver);
  border-radius: var(--radius-sm);
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color var(--duration) var(--ease);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-steel);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-16);
}

.form-row--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Accordion */
.accordion {
  /* border: 1px solid var(--color-neutral-mist-silver-50);s */
  border-radius: var(--radius-md);
  overflow: hidden;
}

.accordion+.accordion {
  margin-top: var(--space-8);
}

.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) var(--space-24);
  /* background: var(--color-base-grey-95); */
  cursor: pointer;
  font-weight: 700;
  border: none;
  width: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-p);
  color: var(--color-dark);
}

.accordion__header:hover {
  color: var(--color-accent-steel-blue);
  transition: color var(--duration) var(--ease);
}

.accordion__arrow {
  transition: transform var(--duration) var(--ease);
}

.accordion.is-open .accordion__arrow {
  transform: rotate(180deg);
}

.accordion__body {
  display: none;
  padding: var(--space-24);
  padding-top: var(--space-8);
}

.accordion.is-open .accordion__body {
  display: block;
}

/* ============================================
   INNER PAGE — BOOKING
   ============================================ */
.booking-wrap {
  padding: 0 var(--section-px);
  background: var(--color-base-grey-95);
  min-height: 100vh;
}

.booking-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-48) 0 var(--section-py);
}

/* Step bar */
.step-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  padding: var(--space-32) 0;
}

.step-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-small);
  color: var(--color-gray-57);
}

.step-bar__item.is-active {
  color: var(--color-dark);
  font-weight: 700;
}

.step-bar__item.is-done {
  color: var(--color-steel);
}

.step-bar__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-neutral-mist-silver-15);
  font-size: var(--fs-small2);
  font-weight: 700;
}

.step-bar__item.is-active .step-bar__num {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.step-bar__item.is-done .step-bar__num {
  background: var(--color-steel);
  color: var(--color-white);
  border-color: var(--color-steel);
}

.step-bar__line {
  width: 40px;
  height: 2px;
  background: var(--color-neutral-mist-silver-15);
}

.step-bar__item.is-done+.step-bar__line {
  background: var(--color-steel);
}

/* Booking card sections */
.booking-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  margin-bottom: var(--space-24);
}

.booking-card__title {
  font-size: var(--fs-h5);
  font-weight: 700;
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-neutral-mist-silver-15);
}

.booking-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-16);
  margin-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-neutral-mist-silver);
}

/* 純文字超連結共通樣式 */
.text-link {
  color: var(--color-steel);
  text-decoration: underline;
  transition: opacity var(--duration) var(--ease);
}

.text-link:hover,
.text-link:focus-visible {
  opacity: 0.7;
}

.booking-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-32);
}

.booking-nav__back {
  color: var(--color-gray-57);
  text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--duration) var(--ease);
}

.booking-nav__back:hover {
  color: var(--color-dark);
}

/* Payment methods */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--color-neutral-mist-silver-15);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease);
}

.payment-method:hover,
.payment-method.is-active {
  border-color: var(--color-steel);
}

.payment-method__radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--color-neutral-mist-silver-50);
  flex-shrink: 0;
}

.payment-method.is-active .payment-method__radio {
  border-color: var(--color-steel);
  background: var(--color-steel);
  box-shadow: inset 0 0 0 3px var(--color-white);
}

/* Success page */
.success-wrap {
  text-align: center;
  padding: var(--space-64) 0;
}

.success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-accent-steel-blue-15);
  color: var(--color-steel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: var(--space-24);
}

.success-title {
  margin-bottom: var(--space-8);
}

.success-desc {
  color: var(--color-gray-57);
  margin-bottom: var(--space-32);
}

/* Next steps */
.next-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-16);
  text-align: center;
}

.next-step {
  padding: var(--space-24);
}

.next-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-steel);
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: var(--space-12);
}

.next-step__title {
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.next-step__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  line-height: 1.7;
}

/* Quantity selector */
.qty-selector {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-neutral-mist-silver);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.qty-selector input {
  flex: 1;
  min-width: 0;
}

.qty-selector button,
.qty-selector__btn {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--color-base-grey-95);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.qty-selector button:hover,
.qty-selector__btn:hover {
  background: var(--color-neutral-obsidian-black);
  color: var(--color-white);
}

.qty-selector button:active,
.qty-selector__btn:active {
  background: var(--color-dark);
  color: var(--color-white);
}

.qty-selector input,
.qty-selector__val {
  width: 48px;
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-p);
  border: none;
  border-left: none;
  border-right: none;
  padding: var(--space-6) 0;
  background: var(--color-white);
  -moz-appearance: textfield;
}

.qty-selector input::-webkit-outer-spin-button,
.qty-selector input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* About page gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Order status */
.order-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-small);
  font-weight: 700;
}

.order-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-orange-red);
}

.order-status__dot--paid {
  background: var(--color-steel);
}

/* Confirmation review row */
.confirm-row {
  display: flex;
  gap: var(--space-24);
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--color-neutral-mist-silver-6);
}

.confirm-row.confirm-row--full-line {
  flex-direction: column;
  gap: var(--space-8);
}

.confirm-row__edit {
  font-size: var(--fs-small);
  color: var(--color-steel);
  text-decoration: none;
}

/* ============================================
   FLOATING CTA
   ============================================ */
.floating-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
}

/* ============================================
   TABLET — max-width: 1199px
   ============================================ */
@media (max-width: 1199px) {
  .header__nav {
    gap: 0;
    padding: 0 20px;
  }
}

/* ============================================
   MOBILE — max-width: 991px
   ============================================ */
@media (max-width: 991px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 32px;
    --fs-h2: 27px;
    --fs-h3: 23px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-p: 15px;
    --fs-small2: 13px;
    --fs-small: 13px;
    --fs-small2: 13px;
    --section-py: 60px;
    --section-px: 24px;
  }

  /* Header */
  .header__inner {
    padding: 0 var(--space-12);
    height: 56px;
  }

  /* iOS 動態島／瀏海安全區處理：
     1. header 外層加上 padding-top = safe-area，讓 visible bar 落在動態島下方
     2. body::before 用 fixed 實心白條覆蓋 safe-area，z-index 高於 header，
        無論 header 背景透明、scroll 或 overscroll，都能擋住網頁內容透出動態島 */
  .header,
  .header--static {
    padding-top: env(safe-area-inset-top);
  }

  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--color-white);
    z-index: 500;
    pointer-events: none;
  }

  .header__logo img {
    height: 30px;
    width: auto;
  }

  .header__right {
    display: none;
  }

  /* 手機版選單開啟時 header 變白底 */
  .header.is-menu-open {
    background: var(--color-white);
    border-bottom: 1px solid rgba(206, 210, 215, 0.15);
  }

  .header__nav {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: var(--color-white);
    backdrop-filter: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 24px 48px;
    overflow-y: auto;
  }

  .header.is-scrolled .header__nav {
    top: 50px;
  }

  .header__nav.is-open {
    display: flex;
  }

  /* 一級項目：加大字、左對齊、加大點擊區 */
  .header__nav>a,
  .header__nav>.header__dropdown>.header__dropdown-toggle {
    font-size: 22px;
    font-weight: 500;
    color: var(--color-dark);
    padding: 20px 0;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border-radius: 0;
    border-bottom: 1px solid rgba(41, 47, 55, 0.08);
    min-height: 64px;
  }

  .header__nav>a:hover,
  .header__nav>.header__dropdown>.header__dropdown-toggle:hover,
  .header__nav>.header__dropdown.is-open>.header__dropdown-toggle,
  .header__nav>.header__dropdown:hover .header__dropdown-toggle {
    background: transparent;
    color: var(--color-dark);
  }

  /* Dropdown 容器在手機改為垂直佈局 */
  .header__dropdown {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
  }

  /* 第二層永遠展開，隱藏下拉箭頭 */
  .header__nav .header__dropdown-arrow {
    display: none;
  }

  .header__dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 4px 0 12px 0;
    min-width: 0;
    width: 100%;
    list-style: none;
    text-align: left;
  }

  .header__dropdown-menu li {
    text-align: left;
  }

  .header__dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    font-size: 16px;
    color: var(--color-steel);
    padding: 14px 0 14px 16px;
    min-height: 48px;
    white-space: normal;
    transition: none;
  }

  .header__dropdown-item:hover,
  .header__dropdown-item:focus,
  .header__dropdown-item:active {
    background: transparent;
    color: var(--color-steel);
  }

  .header__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    padding: 4px 0;
    margin-left: auto;
    z-index: 110;
  }

  .header__hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: all var(--duration) var(--ease);
  }

  .header__hamburger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .header__hamburger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Hero */
  .hero {
    height: 50vh;
    min-height: 400px;
  }

  .hero__overlay {
    padding: 32px var(--section-px);
  }

  .hero__logo-type {
    height: 28px;
  }

  /* Stats */
  .stats__header {
    padding: 48px 24px 0;
    gap: 16px;
  }

  .display__title {
    letter-spacing: var(--ls-normal);
  }

  .stats__desc {
    font-size: 14px;
  }

  .stats__inner {
    gap: 12px;
  }

  .stats__grid {
    padding: 40px 16px 24px;
  }

  .stats__divider-h {
    width: 280px;
  }

  .stats__items {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .stats__number {
    transform: translateX(12px);
  }

  .stats__divider-v {
    width: 100%;
    height: 1px;
    background: rgba(206, 210, 215, 0.12);
  }

  .stats__number .num {
    font-size: 40px;
    letter-spacing: 1.6px;
  }

  .stats__symbol {
    font-size: 24px;
  }

  .stats__symbol--lg {
    font-size: 32px;
  }

  .stats__label {
    font-size: 14px;
  }

  .content-section {
    padding: var(--space-24) 0;
  }

  .content-section__title {
    margin-top: var(--space-24);
  }

  /* Products */
  .products__grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 768px;
    margin: auto;
  }

  .products__grid .product-copy {
    text-align: left;
  }

  /* Plans Carousel — mobile: native swipe */
  .plans-carousel__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .plans-carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .plans-carousel__track {
    gap: 16px;
    padding: 0 20px;
  }

  /* 手機版 padding 會擠壓內部寬度，private-lesson 的 carousel 不需要 */
  #pl-plans-carousel .plans-carousel__track {
    padding: 0;
    gap: 24px;
  }

  .plans-carousel__slide {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  .plans-carousel__btn {
    display: none;
  }

  /* Split layout — 手機堆疊為單欄 */
  .plans-split {
    grid-template-columns: 1fr;
    gap: var(--space-16);
  }

  .plans-split__title {
    padding-right: 0;
    text-align: center;
  }

  /* Plans tabs — 手機版單欄卡片 + 卡片切換動畫 */
  /* minmax(0, 1fr)：避免 grid 欄位被內部 nowrap 按鈕的 min-content 撐寬而超出容器 */
  .plans-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .plans-grid {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }

  .plans-grid>.product-card {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    margin-left: 20px;
    margin-right: 20px;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* private-lesson 方案輪播：手機一頁 1 張 */
  #pl-plans-carousel .plans-carousel__track>.product-card {
    flex: 0 0 calc(100vw - var(--section-px) * 2);
  }

  .plans-grid>.product-card.is-hidden {
    opacity: 0;
    transform: scale(0.94) translateX(40px);
    pointer-events: none;
  }

  /* 設施介紹手機版單欄 */
  .facility-grid {
    grid-template-columns: 1fr !important;
    row-gap: var(--space-32) !important;
  }

  .plans-nav--prev {
    left: 4px;
  }

  .plans-nav--next {
    right: 4px;
  }

  .products__subtitle {
    font-size: calc(var(--fs-display) * 0.8);
  }

  /* Snow Land */
  .snowland__inner {
    grid-template-columns: 1fr;
  }

  .snowland__content {
    padding: 24px 12px 80px;
    position: relative;
  }

  /* Certifications */

  .certifications__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: var(--bp-medium-min);
    margin: auto;
  }

  .certifications__inner+.certifications__inner {
    margin-top: 64px;
  }

  .certifications__content {
    padding: var(--space-24);
  }

  .certifications__cta-row .metallic-btn {
    max-width: 100%;
  }

  /* KOL — 僅 Instagram Reel（直式）縮小尺寸，YouTube 影片維持 16:9 不受影響 */

  .kol-card__video--reel {
    max-width: 280px !important;
    height: 500px !important;
  }

  .kol-card__video--reel iframe {
    height: 760px !important;
  }

  /* Testimonials */
  .marquee-row__track img {
    width: 200px;
    height: 140px;
  }

  .review-card {
    padding: var(--space-32) var(--space-12);
  }

  .reviews-toggle-wrap {
    padding-top: 0;
  }

  /* Contact */
  .contact__inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* About */
  .about__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: var(--bp-medium-min);
    margin: auto;
  }

  /* 手機版：圖片移到文字上方 */
  .about__inner .about__image {
    order: -1;
  }

  .about__content {
    padding: var(--space-24);
  }

  /* Footer */
  .footer {
    padding: 32px 20px;
  }

  .footer__links {
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    text-align: center;
  }

  .footer__col {
    flex: calc(50% - 8px);
    min-width: 190px;
    display: flex;
    flex-direction: column;
    padding: 8px 24px;
    text-align: left;
    margin-bottom: 24px;
  }

  .footer__inner {
    padding: 0;
  }

  .footer__top {
    flex-direction: column;
    gap: var(--space-24);
    align-items: flex-start;
  }

  .footer__socials {
    justify-content: center;
  }

  .footer__brand {
    padding: 0 var(--space-24);
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid var(--color-neutral-mist-silver-50);
    padding-bottom: 24px;
  }

  .footer__logo-img {
    height: auto;
    width: 200px;
  }

  .footer__col--contact {
    width: auto;
  }

  .footer__mid {
    flex-direction: column;
    gap: 0px;
    align-items: baseline;
    padding: 24px;
  }

  .footer__mid .footer__socials {
    margin-left: unset;
    margin-top: var(--space-24);
  }

  .footer__info {
    width: auto;
  }

  .footer__bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  /* Inner pages mobile */
  .product-top {
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
  }

  .product-info {
    padding: var(--space-12) 0 var(--space-32) 0;
  }

  .feature-grid,
  .feature-grid--4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }

  /* 手機版關閉 feature-grid--rotate 的滑動動畫，cards 全部還原為靜態樣式 */
  .feature-grid--rotate .feature-grid__accent {
    display: none;
  }

  .feature-grid--rotate .feature-card,
  .feature-grid--rotate .feature-card.is-accent {
    transition: none;
    background: transparent;
    color: inherit;
    box-shadow: none;
  }

  .feature-grid--rotate .feature-card__title,
  .feature-grid--rotate .feature-card__desc {
    transition: none;
    color: inherit;
  }

  .feature-grid--rotate .feature-card__desc {
    opacity: 1;
  }

  /* 商品簡介 */
  .product-sidebar {
    width: 100%;
  }

  .order-card {
    padding: var(--space-12);
  }

  .order-card .btn--wide {
    margin: var(--space-48) auto 0 auto;
  }

  /* choice-grid 改為橫向捲動 carousel，讓下一張卡片露邊暗示可滑動 */
  .choice-grid {
    display: flex;
    gap: var(--space-16);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 用負 margin 打破 page-wrap 20px padding，貼齊 viewport 邊緣 */
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px var(--space-8);
    scroll-padding-left: 20px;
    scrollbar-width: none;
  }

  .choice-grid::-webkit-scrollbar {
    display: none;
  }

  .choice-card {
    flex: 0 0 295px;
    scroll-snap-align: start;
    border-radius: var(--radius-md);
    padding: var(--space-12);
  }

  .cancel-policy {
    grid-template-columns: repeat(2, 1fr);
  }

  .next-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .order-card .form-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero {
    height: 180px;
  }

  .page-inner {
    padding: var(--space-24);
  }

  .breadcrumb {
    padding: 0;
  }

  /* 商品簡介圖文列：手機改單欄、圖片優先 */
  .product-intro-row {
    grid-template-columns: 1fr !important;
    gap: var(--space-24) !important;
  }

  .product-intro-row>img,
  .product-intro-row>.image-placeholder {
    order: -1;
  }

  /* 方案比較表格：手機版縮小字級與間距 */
  .plan-compare td {
    padding: var(--space-12) var(--space-8);
  }

  .plan-compare__price strong {
    font-size: var(--fs-h5);
  }

  .plan-compare__feature {
    font-size: var(--fs-small);
  }

  .carousel {
    border-radius: var(--radius-md);
  }

  .facility-row {
    grid-template-columns: 1fr;
  }

  /* Floating CTA — full-width on mobile */
  .floating-cta {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: rgba(13, 15, 16, 0.9);
    backdrop-filter: blur(8px);
  }

  .floating-cta .btn--float {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   MOBILE BOOK BAR + BOTTOM SHEET
   ============================================ */
.mobile-book-bar {
  display: none;
}

.mobile-book-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

.mobile-book-overlay.is-open {
  display: block;
  opacity: 1;
}

.mobile-book-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  background: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  max-height: 85vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.35s var(--ease);
}

.mobile-book-sheet.is-open {
  transform: translateY(0);
}

.mobile-book-sheet__handle {
  display: flex;
  justify-content: center;
  padding: var(--space-12) 0 var(--space-8);
  cursor: pointer;
}

.mobile-book-sheet__handle::after {
  content: '';
  width: 40px;
  height: 4px;
  background: var(--color-neutral-mist-silver);
  border-radius: 2px;
}

.mobile-book-sheet__body {
  padding: 0 var(--space-24) var(--space-32);
}

.mobile-book-sheet__body .metallic-btn {
  max-width: unset;
}

/* Plan button — bottom sheet 方案選項 */
.plan-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-neutral-mist-silver-50);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-dark);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}

.plan-btn+.plan-btn {
  margin-top: var(--space-12);
}

.plan-btn:hover,
.plan-btn:focus-visible {
  border-color: var(--color-dark);
  background: var(--color-neutral-mist-silver-50);
}

.plan-btn:active {
  transform: scale(0.99);
}

.plan-btn__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
}

.plan-btn__price {
  font-family: var(--ff-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  color: var(--color-dark);
  white-space: nowrap;
}

.plan-btn__price-suffix {
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  color: var(--color-gray-57);
}

/* ============================================
   CONFIRM MODAL（前往 Rezio 預約系統）
   ============================================ */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.confirm-modal.is-open {
  display: flex;
}

.confirm-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.confirm-modal.is-open .confirm-modal__overlay {
  opacity: 1;
}

.confirm-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.confirm-modal.is-open .confirm-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.confirm-modal__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gray-57);
  cursor: pointer;
  border-radius: 50%;
}

.confirm-modal__close:hover {
  background: var(--color-neutral-mist-silver-50);
  color: var(--color-dark);
}

.confirm-modal__icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-16);
  color: var(--color-steel);
}

.confirm-modal__title {
  margin-bottom: var(--space-12);
  color: var(--color-dark);
}

.confirm-modal__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-24);
}

.confirm-modal__desc strong {
  color: var(--color-dark);
}

.confirm-modal__actions {
  display: flex;
  gap: var(--space-12);
}

.confirm-modal__actions .metallic-btn {
  flex: 1;
  max-width: unset;
}

@media (max-width: 480px) {
  .confirm-modal__dialog {
    padding: var(--space-24);
  }

  .confirm-modal__actions {
    flex-direction: column;
  }
}

/* ============================================
   COMING SOON MODAL（敬請期待）
   ============================================ */
.coming-soon-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
}

.coming-soon-modal.is-open {
  display: flex;
}

.coming-soon-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.coming-soon-modal.is-open .coming-soon-modal__overlay {
  opacity: 1;
}

.coming-soon-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 400px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}

.coming-soon-modal.is-open .coming-soon-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.coming-soon-modal__close {
  position: absolute;
  top: var(--space-12);
  right: var(--space-12);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--color-gray-57);
  cursor: pointer;
  border-radius: 50%;
}

.coming-soon-modal__close:hover {
  background: var(--color-neutral-mist-silver-50);
  color: var(--color-dark);
}

.coming-soon-modal__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-16);
  color: var(--color-steel);
}

.coming-soon-modal__title {
  margin-bottom: var(--space-12);
  color: var(--color-dark);
}

.coming-soon-modal__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-57);
  line-height: var(--lh-relaxed);
}

@media (max-width: 480px) {
  .coming-soon-modal__dialog {
    padding: var(--space-24);
  }
}

/* 暫時：頁面內（非上下選單）指向「玩雪一日遊」「私人教練」的連結按鈕，先做成 disable 樣式 */
.is-coming-soon {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.7;
}

/* 「敬請期待」disable 按鈕：不使用 metallic-btn 質感，改為扁平灰階樣式 */
.coming-soon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-p);
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: var(--space-16) var(--space-48);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  margin-top: 18px;
  background: var(--color-neutral-mist-silver);
  color: var(--color-dark-60);
  border: 1px solid var(--color-neutral-mist-silver);
  text-decoration: none;
}

@media (max-width: 991px) {
  .mobile-book-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 199;
    background: transparent;
    padding: var(--space-32) var(--space-24) var(--space-16);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }

  .mobile-book-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-book-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, var(--color-white) 0%, rgba(254, 254, 254, 0) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
  }

  .mobile-book-bar .metallic-btn {
    pointer-events: auto;
  }

  .mobile-book-bar .metallic-btn {
    width: 100%;
    max-width: none;
  }
}

/* ==========================================================================
   About — spotlight sections（團隊介紹 / 官方合作）
   ========================================================================== */
.about-spotlight {
  position: relative;
}

.about-spotlight__layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--space-24);
  align-items: center;
}

.about-spotlight--reverse .about-spotlight__layout {
  grid-template-columns: 1fr 1.25fr;
}

.about-spotlight--reverse .about-spotlight__visual {
  order: 2;
}

.about-spotlight__copy {
  padding: 0 var(--space-24);
  border-radius: var(--space-24);
  backdrop-filter: blur(3px);
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.15) 10%, rgba(255, 255, 255, 0.75) 80%);
}

.about-spotlight__copy .body__text,
.about-spotlight__copy .about-spotlight__title,
.about-spotlight__copy .about-spotlight__eyebrow {
  text-shadow: 0 0 4px white;
}

/* Visual block */
.about-spotlight__visual {
  position: relative;
  isolation: isolate;
  padding: 16px 28px 36px 16px;
}

.about-spotlight--reverse .about-spotlight__visual {
  padding: 16px 16px 36px 28px;
}

.about-spotlight__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -22px rgba(20, 35, 60, 0.28);
  display: block;
}

/* Top-left tilted sticker */
.about-spotlight__sticker {
  position: absolute;
  top: 0;
  left: -8px;
  z-index: 2;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-h6);
  letter-spacing: 0.22em;
  font-weight: 700;
  transform: rotate(-4deg);
  box-shadow: 0 10px 24px -10px rgba(20, 35, 60, 0.4);
}

/* Floating stats card */
.about-spotlight__stats {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-md);
  padding: var(--space-16) var(--space-24);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-24);
  box-shadow: 0 20px 40px -16px rgba(20, 35, 60, 0.22);
}

.about-spotlight__stat {
  text-align: center;
}

.about-spotlight__stat-num {
  display: block;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.05;
}

.about-spotlight__stat-num sup {
  font-size: 0.55em;
  color: var(--color-accent-steel-blue);
  margin-left: 1px;
  top: -0.55em;
}

.about-spotlight__stat-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-gray-57);
  margin-top: 4px;
}

/* Circular partner seal */
.about-spotlight__seal {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  z-index: 2;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 18px 40px -16px rgba(20, 35, 60, 0.45);
  border: 4px solid var(--color-white);
}

.about-spotlight__seal small {
  font-size: 9px;
  letter-spacing: 0.22em;
  opacity: 0.75;
}

.about-spotlight__seal strong {
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: 0.06em;
  margin: 4px 0;
}

/* Copy side */
.about-spotlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-accent-steel-blue);
  margin-bottom: var(--space-16);
  text-transform: uppercase;
}

.about-spotlight__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent-steel-blue);
}

.about-spotlight__title {
  margin: 0 0 var(--space-16);
}

.about-spotlight__title em {
  font-style: normal;
  color: var(--color-accent-steel-blue);
}

.about-spotlight__features {
  list-style: none;
  padding: 0;
  margin: var(--space-24) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
}

.about-spotlight__features li {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-neutral-mist-silver-50);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.about-spotlight__features strong {
  font-size: 14px;
  color: var(--color-dark);
}

.about-spotlight__features small {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-gray-57);
}

/* Pill badge */
.about-spotlight__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small2);
  letter-spacing: 0.2em;
  font-weight: 600;
  margin-bottom: var(--space-16);
}

.about-spotlight__pill svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent-steel-blue);
}

/* "Since" chip */
.about-spotlight__since {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-neutral-mist-silver-50);
}

.about-spotlight__since-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-accent-steel-blue);
  line-height: 1;
}

.about-spotlight__since-label {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--color-gray-57);
}

/* ==========================================================================
   Private Lesson — hero stacked layout + 3-up banner carousel
   ========================================================================== */
.pl-hero__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: stretch;
}

.pl-hero__copy,
.pl-route {
  padding-left: 20%;
}

.pl-hero__visual {
  position: relative;
}

.pl-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-accent-steel-blue);
  margin-bottom: var(--space-16);
  text-transform: uppercase;
}

.pl-hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent-steel-blue);
}

/* Banner carousel — 3-up with edge fade */
.pl-hero__layout .pl-banner {
  aspect-ratio: 16 / 6;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

.pl-banner__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 慢、軟落地（easeOutQuint）— 像被空氣緩衝接住 */
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* 無縫跳回瞬間，暫停 track 與 img 的所有 transition 避免重新淡入 */
.pl-banner.is-snapping .pl-banner__track,
.pl-banner.is-snapping .pl-banner__img {
  transition: none !important;
}

.pl-hero__layout .pl-banner__img {
  position: relative;
  inset: auto;
  flex: 0 0 65%;
  width: 65%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  /* 非 active：縮小 + 微微下沉、陰影較淺 */
  transform: scale(0.82) translateY(10px);
  filter: drop-shadow(0 6px 14px rgba(20, 35, 60, 0.15));
  /* 物理感：opacity / filter 軟落、transform 帶輕微 spring overshoot */
  transition:
    opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1200ms cubic-bezier(0.34, 1.32, 0.5, 1);
  border-radius: var(--radius-md);
}

.pl-hero__layout .pl-banner__img.is-active {
  opacity: 1;
  /* active：浮起到平面、陰影變濃，呈現懸浮卡片感 */
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 22px 36px rgba(20, 35, 60, 0.32));
}

@media (max-width: 991px) {
  .pl-hero__layout {
    gap: var(--space-32);
  }

  .pl-hero__copy,
  .pl-route {
    padding-left: var(--space-24);
  }

  .pl-hero__layout .pl-banner {
    aspect-ratio: 16 / 9;
  }

  .pl-hero__layout .pl-banner__img {
    flex: 0 0 82%;
    width: 82%;
    transform: scale(0.86) translateY(8px);
  }

  .pl-hero__layout .pl-banner__img.is-active {
    transform: scale(1) translateY(0);
  }

  .about-spotlight__layout,
  .about-spotlight--reverse .about-spotlight__layout {
    grid-template-columns: 1fr;
  }

  .about-spotlight .about-spotlight__layout,
  .about-spotlight .about-spotlight--reverse .about-spotlight__layout {
    max-width: var(--bp-medium-min);
    margin: 0 auto;
  }

  .about-spotlight--reverse .about-spotlight__visual {
    order: 0;
  }

  .about-spotlight__visual,
  .about-spotlight--reverse .about-spotlight__visual {
    padding: 16px 16px 32px 16px;
  }

  .about-spotlight__stats {
    right: 0;
    bottom: -8px;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
  }

  .about-spotlight__seal {
    left: auto;
    right: -4px;
    top: -8px;
    transform: rotate(-8deg);
    width: 96px;
    height: 96px;
  }

  .about-spotlight__seal strong {
    font-size: 14px;
  }

  .about-spotlight__sticker {
    font-size: var(--fs-small);
  }

  .products .product-card {
    flex-direction: row;
    justify-content: space-evenly;
  }
}

/* ==========================================================================
   Plan list — 一商品一行（縮圖｜內容｜按鈕）
   ========================================================================== */
/* 方案選擇區塊 — 弧形支援裝飾背景 */
#pl-plans>h2,
#pl-plans>div,
#pl-plans>p {
  position: relative;
  isolation: isolate;
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
}

#pl-plans {
  position: relative;
}

/* 父層保留 .reveal 觀察用，但不做預設淡入位移（讓 ::before 自己處理動畫） */
#pl-plans.reveal {
  opacity: 1;
  transform: none;
}

#pl-plans::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('assets/images/Supporting-elements-1.png');
  background-repeat: no-repeat;
  background-position: top right;
  /* background-size: min(752px, 60%) auto; */
  background-size: 100%;
  opacity: 0.18;
  pointer-events: none;
  /* 進場動畫：用 mask 漸層由左至右 fade-in（mask 為 3 倍寬，初始定位於右側 = 全部透明） */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 67%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 50%, transparent 67%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 1.6s ease-out, mask-position 1.6s ease-out;
}

#pl-plans.is-visible::before {
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}

@media (prefers-reduced-motion: reduce) {
  #pl-plans::before {
    transition: none;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

.plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  text-align: left;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}

/* plan-list 進場：每張卡片各自帶 .reveal 與 reveal-delay-N，依序由右滑入 */
.plan-row.reveal {
  opacity: 0;
  transform: translateX(60px);
}

.plan-row.reveal.is-visible {
  animation: slide-in-right 0.55s ease-out forwards;
}

.plan-row {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-template-areas:
    "tags tags"
    "name actions"
    "body body";
  column-gap: var(--space-32);
  row-gap: var(--space-12);
  align-items: start;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  transition: box-shadow 240ms ease, transform 240ms ease;
}

.plan-row>.plan-row__eyebrow {
  grid-area: tags;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--color-accent-steel-blue);
  text-transform: uppercase;
}

.plan-row__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent-steel-blue);
}

.plan-row>.plan-row__name {
  grid-area: name;
  align-self: center;
  margin-top: var(--space-4);
}

.plan-row>.plan-row__body {
  grid-area: body;
  border-top: 1px solid var(--color-neutral-mist-silver-50);
  padding-top: var(--space-24);
}

.plan-row>.plan-row__actions {
  grid-area: actions;
  align-self: center;
}

.plan-row:hover {
  box-shadow: 0 18px 36px -18px rgba(20, 35, 60, 0.18);
  transform: translateY(-2px);
}

.plan-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}

.plan-row__name {
  margin: 0;
}

.plan-row__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.plan-row__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-12) 0;
  border-radius: var(--radius-sm);
}

.plan-row__notes .small__text {
  margin: 0;
  color: var(--color-base-grey-35);
  line-height: 1.6;
}

/* plan-row 範圍內：summary item 用 mist silver，notes 用灰 */
.plan-row .product-info__summary {
  color: var(--color-mist);
}

.plan-row__price {
  margin: 0;
  font-size: var(--fs-small);
}

.plan-row__price .price-value {
  font-size: var(--fs-h5);
}

.plan-row__price .price-symbol,
.plan-row__price small {
  font-size: var(--fs-small);
}

.plan-row__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-12);
  align-items: stretch;
}

.plan-row__actions .metallic-btn {
  flex: 1;
  min-width: 0;
}


@media (max-width: 991px) {
  .plan-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "tags"
      "name"
      "body"
      "actions";
    column-gap: var(--space-24);
    row-gap: var(--space-16);
  }

  .plan-row>.plan-row__actions {
    align-self: stretch;
  }

  .plan-row__summary {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .plan-row__actions {
    flex-direction: column;
  }
}

/* ============================================
   FAQ BLOCK — accordion 問題 hover 顯示藍色 h5 icon
   ============================================ */
.faq-block .accordion__header {
  position: relative;
  /* 同時涵蓋 padding/background/color，避免被全域 .accordion__header:hover 的 transition 覆蓋 */
  transition: padding var(--duration) var(--ease), background var(--duration) var(--ease), color var(--duration) var(--ease);
}

.faq-block .accordion__header::before {
  content: '';
  position: absolute;
  left: var(--space-24);
  top: 50%;
  width: 1em;
  height: 1em;
  transform: translateY(-50%) translateX(-6px);
  background-color: var(--color-steel);
  -webkit-mask: url('assets/images/pointer.svg') center / contain no-repeat;
  mask: url('assets/images/pointer.svg') center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  pointer-events: none;
}

.faq-block .accordion__header:hover,
.faq-block .accordion__header:focus-visible,
.faq-block .accordion.is-open>.accordion__header {
  padding-left: calc(var(--space-24) + 1em + var(--space-12));
}

.faq-block .accordion__header:hover::before,
.faq-block .accordion__header:focus-visible::before,
.faq-block .accordion.is-open>.accordion__header::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.faq-block__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-32);
}

/* ============================================
   FACILITY MARQUEE — 限縮 page-inner 寬度的輪播（JS 控制，每 2 秒一張）
   ============================================ */
.facility-marquee {
  position: relative;
  --fm-item-w: clamp(280px, 28vw, 460px);
  /* gap 加大：active scale 1.2 後左右各擴張 ~10%，留足夠空間避免擠到鄰居 */
  --fm-gap: var(--space-80);
  --fm-step: calc(var(--fm-item-w) + var(--fm-gap));
  --fm-shift: 0;
  width: 100%;

}

.facility-marquee__viewport {
  overflow: hidden;
  /* 上下加 padding 預留 scale 1.2 後突出的空間，避免被 viewport 邊緣截掉圖與字 */
  padding: calc(var(--fm-item-w) * 0.1 + var(--space-24)) 0;
  /* 兩端漸層淡出：超出 page-inner 寬度的內容透明消失 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.facility-marquee__track {
  display: flex;
  gap: var(--fm-gap);
  width: max-content;
  /* 用左右 padding 把當前 item 推到 viewport 正中央（取代 JS 量測） */
  padding-inline-start: calc(50% - var(--fm-item-w) / 2);
  padding-inline-end: calc(50% - var(--fm-item-w) / 2);
  transform: translate3d(calc(var(--fm-shift) * -1 * var(--fm-step)), 0, 0);
  transition: transform 0.7s ease-in-out;
  will-change: transform;
}

.facility-marquee__track.is-snapping {
  transition: none;
}

.facility-marquee__item {
  flex: 0 0 var(--fm-item-w);
  width: var(--fm-item-w);
  transition: transform 0.7s ease-in-out;
}

/* 中間那一張：放大 1.2 倍，並覆蓋於兩側鄰居之上 */
.facility-marquee__item.is-active {
  transform: scale(1.2);
  z-index: 2;
}

.facility-marquee__item img {
  aspect-ratio: 5/3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  transition: box-shadow 0.7s ease-in-out;
}

.facility-marquee__item.is-active img {
  box-shadow: 0 16px 36px -10px rgba(20, 35, 60, 0.28);
}

.facility-marquee__caption {
  margin-top: var(--space-12);
  color: var(--color-gray-57);
}

.facility-marquee__nav {
  position: absolute;
  /* 對齊圖片垂直中心：viewport top padding (item-w*0.1 + 24px) + 圖片半高 (item-w*0.3) */
  top: calc(var(--space-24) + var(--fm-item-w) * 0.4);
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-neutral-mist-silver-15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.facility-marquee__nav:hover,
.facility-marquee__nav:focus-visible {
  background: var(--color-white);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

/* 按鈕緊貼 marquee 邊（即 page-inner 邊），略向內 16px 不蓋到漸層淡出區 */
.facility-marquee__nav--prev {
  left: var(--space-16);
}

.facility-marquee__nav--next {
  right: var(--space-16);
}

.facility-marquee__nav img {
  width: 16px;
  height: 16px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .facility-marquee__track {
    transition: none;
  }
}

@media (max-width: 768px) {

  .metallic-btn {
    padding: var(--space-12) var(--space-32);
  }

  .facility-marquee {
    /* 手機版圖片縮為 0.8x，置中由 track 的 padding-inline 自動處理 */
    --fm-item-w: 64vw;
    /* gap 拉到 80px：--fm-step 會自動更新成 item-w + 80px，置中數學不受影響 */
    --fm-gap: var(--space-80);
  }

  .facility-marquee__nav {
    width: 40px;
    height: 40px;
  }

  .facility-marquee__nav--prev {
    left: var(--space-12);
  }

  .facility-marquee__nav--next {
    right: var(--space-12);
  }

  /* 首頁 Product */
  .products .product-card {
    flex-wrap: wrap;
  }

  .products__grid .product-copy {
    text-align: center;
  }

  .product-card .metallic-btn {
    min-width: 190px;
  }

  /* 首頁 KOL */
  .kol__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact__text {
    padding: var(--space-24);
  }

  .contact__text .check-list--horizontal {
    flex-direction: column;
    align-content: center;
  }
}
/* ══════════════════════════════════════
   Google 網頁翻譯：隱藏原生 UI 與樣式重置
   ══════════════════════════════════════ */
#google_translate_element,
.goog-te-banner-frame,
.skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}

body {
  top: 0 !important;
}

font[style] {
  background: none !important;
  box-shadow: none !important;
}
/* ── Info tip（說明 icon + 提示框） ── */
.info-tip {
  position: static;
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--space-8);
}

/* 提示框以所在卡片為定位基準，置中且不超過卡片寬度 */
.feature-card:has(.info-tip) {
  position: relative;
}

.info-tip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-gray-57);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: normal;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}

.info-tip__panel {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 0;
  right: 0;
  width: auto;
  /* transform: translateY(-50%); */
  padding: var(--space-12);
  border-radius: var(--radius-sm);
  background-color: #efefef;
  color: var(--color-rock);
  font-size: var(--fs-small);
  font-weight: lighter;
  line-height: 1.7;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.info-tip:hover .info-tip__panel,
.info-tip.is-open .info-tip__panel {
  opacity: 1;
  visibility: visible;
}

/* .reveal 有 transform 會建立堆疊環境，開啟時整區提高層級避免被下方區塊蓋住 */
.reveal:has(.info-tip:hover),
.reveal:has(.info-tip.is-open) {
  position: relative;
  z-index: 30;
}

@media (max-width: 991px) {
  /* 手機版僅以點擊開啟，避免 hover 殘留 */
  .info-tip:hover .info-tip__panel {
    opacity: 0;
    visibility: hidden;
  }

  .info-tip.is-open .info-tip__panel {
    opacity: 1;
    visibility: visible;
  }

  /* 手機版卡片僅約半個螢幕寬，提示框改以整列（feature-grid）為基準置中 */
  .feature-card:has(.info-tip) {
    position: static;
  }

  .feature-grid:has(.info-tip) {
    position: relative;
  }
}

.page-wrap.dark-mode .info-tip__btn {
  background-color: #6b6b6b;
  color: #fff;
}