/* ============================================================
   IP 變現引擎 — Landing Page
   Design system：Luxury Editorial（深海軍藍 × 香檳金 × 奶油白）
   ============================================================ */

/* ---------- 0. 字體（自己 host，已 subset）---------- */
@font-face {
  font-family: "Noto Serif TC";
  src: url("../fonts/noto-serif-tc.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("../fonts/noto-sans-tc.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* ---------- 1. Design tokens ---------- */
:root {
  /* 品牌色 */
  --navy: #071F3D;
  --navy-soft: #0D2E56;
  /* ⚠️ 香檳金 #C99A4E 落喺奶油白上，對比只有 2.44 —— 做裝飾冇問題，做文字就睇唔清。
     所以文字用深啲嘅金（睇落一樣係香檳金系，但讀得到）：
       --gold       裝飾用：圖示、邊框、線條          （唔涉及閱讀）
       --gold-text  大標題重點字（對比 3.4，達標）
       --gold-ink   細字（對比 4.7，達標）
     深藍底上面嘅金字用 --gold-light，本身對比已經好高，唔受影響。 */
  --gold: #C99A4E;
  --gold-text: #B8842F;
  --gold-ink: #94651D;
  --gold-light: #E3C17A;
  --gold-pale: #F1E2C4;
  --cream: #FFF9F0;
  --beige: #F3E9DC;
  --ink: #102744;
  --muted: #7D6A50;         /* 由 #9A8465 加深，原本對比得 3.4 */

  /* CTA 漸層 */
  --cta-grad: linear-gradient(135deg, #EBCB83 0%, #C58C38 52%, #F1D493 100%);
  --gold-line: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-light) 50%, var(--gold) 78%, transparent);

  /* 陰影 */
  --sh-card: 0 18px 44px -22px rgba(7, 31, 61, .28), 0 2px 8px -4px rgba(7, 31, 61, .10);
  --sh-float: 0 26px 60px -26px rgba(7, 31, 61, .36), 0 3px 10px -5px rgba(7, 31, 61, .12);
  --sh-cta: 0 14px 34px -12px rgba(197, 140, 56, .62), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(139, 94, 22, .22);

  /* 排版 */
  --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
  --sans: "Noto Sans TC", -apple-system, "PingFang HK", sans-serif;
  --script: "Cormorant Garamond", "Noto Serif TC", serif;

  /* 節奏 */
  --pad-x: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 10vw, 132px);
  --radius: 22px;
  --maxw: 1160px;
}

/* ---------- 2. Reset / base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* height:auto 一定要 global —— <img> 上面嘅 width/height 屬性係 presentational hint，
   唔覆寫嘅話啲相會被硬拉成屬性入面嗰個高度（人物 / 截圖會變形）。
   要固定高度嘅（見證片、導師相）自己喺下面 override。 */
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

/* 紙張質感 + 金光暈：全頁底層 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58% 42% at 82% 6%, rgba(227, 193, 122, .30), transparent 62%),
    radial-gradient(48% 38% at 6% 32%, rgba(201, 154, 78, .16), transparent 60%),
    radial-gradient(60% 40% at 92% 72%, rgba(227, 193, 122, .18), transparent 64%),
    var(--cream);
}
/* 紙張質感 + 香檳金絲帶流線（柔和、唔搶眼，唔可以影響閱讀） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='900' viewBox='0 0 1440 900' fill='none'%3E%3Cpath d='M-80 210 C 240 90, 520 330, 860 190 S 1380 130, 1540 250' stroke='%23C99A4E' stroke-opacity='.20' stroke-width='1.2'/%3E%3Cpath d='M-80 245 C 250 130, 540 360, 880 225 S 1390 170, 1540 285' stroke='%23E3C17A' stroke-opacity='.14' stroke-width='.9'/%3E%3Cpath d='M-60 690 C 300 810, 600 560, 940 700 S 1400 780, 1520 640' stroke='%23C99A4E' stroke-opacity='.16' stroke-width='1.1'/%3E%3Cpath d='M-60 726 C 310 845, 620 595, 960 733 S 1405 812, 1520 675' stroke='%23E3C17A' stroke-opacity='.11' stroke-width='.8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  background-size: cover, 180px 180px;
  background-repeat: no-repeat, repeat;
}

/* ---------- 3. Layout ---------- */
.section {
  position: relative;
  padding: var(--sec-y) var(--pad-x);
}
.wrap { max-width: var(--maxw); margin-inline: auto; position: relative; z-index: 2; }
.wrap--narrow { max-width: 900px; }

.sec--beige { background: linear-gradient(180deg, rgba(243, 233, 220, 0) 0%, rgba(243, 233, 220, .72) 12%, rgba(243, 233, 220, .72) 88%, rgba(243, 233, 220, 0) 100%); }
.sec--navy { background: var(--navy); color: var(--cream); }

/* 深藍區塊嘅星光 */
.sec--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255, 249, 240, .55), transparent),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(227, 193, 122, .6), transparent),
    radial-gradient(1.5px 1.5px at 34% 76%, rgba(255, 249, 240, .4), transparent),
    radial-gradient(2px 2px at 88% 64%, rgba(227, 193, 122, .45), transparent),
    radial-gradient(1.5px 1.5px at 58% 42%, rgba(255, 249, 240, .35), transparent),
    radial-gradient(70% 60% at 50% 0%, rgba(201, 154, 78, .18), transparent 70%);
  pointer-events: none;
}

/* 曲線分隔 */
.curve { position: absolute; left: 0; right: 0; width: 100%; height: clamp(40px, 6vw, 88px); z-index: 1; }
.curve--top { top: -1px; }
.curve--bottom { bottom: -1px; }

/* ---------- 4. 排版元件 ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--script);
  font-size: clamp(12px, 1.4vw, 14px);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-ink);
  margin-bottom: 18px;
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 26px; height: 1px;
  background: var(--gold);
  opacity: .55;
}
.sec--navy .eyebrow { color: var(--gold-light); }

/* 深藍徽章（章節標籤） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  box-shadow: 0 8px 22px -12px rgba(7, 31, 61, .6), inset 0 1px 0 rgba(227, 193, 122, .22);
  border: 1px solid rgba(227, 193, 122, .3);
}
.chip--gold {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid rgba(201, 154, 78, .5);
  box-shadow: 0 6px 18px -10px rgba(201, 154, 78, .5);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 900; color: var(--navy); line-height: 1.28; letter-spacing: .01em; }
.sec--navy h2, .sec--navy h3 { color: var(--cream); }

h1 { font-size: clamp(34px, 7.4vw, 68px); letter-spacing: -.01em; }
h2 { font-size: clamp(27px, 4.6vw, 48px); }
h3 { font-size: clamp(19px, 2.2vw, 25px); font-weight: 700; }

/* 預設用讀得到嘅深金；只有大標題（字夠大）先用亮啲嗰隻 */
.gold { color: var(--gold-ink); }
h1 .gold, h2 .gold, h3 .gold { color: var(--gold-text); }
/* 深藍底上面嘅金字要用淺金，唔係會暗到睇唔到 */
.sec--navy .gold,
.belief .gold,
.arc .gold,
.board .gold,
.vs__col--ours .gold { color: var(--gold-light); }

.lead { font-size: clamp(16px, 1.9vw, 19px); color: #3A4C63; max-width: 62ch; }
.sec--navy .lead { color: rgba(255, 249, 240, .82); }
.muted { color: var(--muted); font-size: 15px; }

.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .eyebrow { justify-content: center; }

/* 金色幼線 */
.rule { height: 1px; background: var(--gold-line); border: 0; margin: 26px auto; max-width: 320px; opacity: .8; }
.rule--dot { position: relative; }
.rule--dot::after {
  content: "✦";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  color: var(--gold);
  font-size: 11px;
  padding: 0 10px;
}

/* ---------- 5. CTA ---------- */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 clamp(28px, 4vw, 46px);
  border-radius: 30px;
  background: var(--cta-grad);
  color: var(--navy);
  font-family: var(--serif);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: var(--sh-cta);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s;
  overflow: hidden;
  isolation: isolate;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), transparent 46%);
  z-index: -1;
}
.cta::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  transition: left .7s ease;
  z-index: -1;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgba(197, 140, 56, .78), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -2px 6px rgba(139, 94, 22, .22); }
.cta:hover::after { left: 120%; }
.cta:active { transform: translateY(-1px); }
.cta__arrow { font-size: 1.1em; line-height: 1; transition: transform .3s; }
.cta:hover .cta__arrow { transform: translateX(4px); }
.cta--lg { min-height: 68px; font-size: clamp(18px, 2.4vw, 23px); border-radius: 34px; padding: 0 clamp(32px, 5vw, 60px); }

.cta-block { margin-top: clamp(34px, 5vw, 52px); }
.cta-note { margin-top: 14px; font-size: 14px; color: var(--muted); letter-spacing: .04em; }
.sec--navy .cta-note { color: rgba(255, 249, 240, .6); }

/* ---------- 6. 卡片 ---------- */
.card {
  position: relative;
  background: linear-gradient(160deg, #FFFDFA, var(--cream) 60%, #FDF6EA);
  border: 1px solid rgba(201, 154, 78, .28);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--sh-card);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-float); border-color: rgba(201, 154, 78, .5); }
.card--white { background: #fff; }

/* 圖示：深藍圓底 + 金線 */
.ic {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--navy-soft), var(--navy) 74%);
  box-shadow: 0 10px 22px -10px rgba(7, 31, 61, .58), inset 0 1px 0 rgba(227, 193, 122, .35), inset 0 -3px 8px rgba(0, 0, 0, .28);
  border: 1px solid rgba(227, 193, 122, .38);
}
.ic svg { width: 26px; height: 26px; stroke: var(--gold-light); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic--gold { background: radial-gradient(circle at 32% 26%, #F0D9A4, var(--gold) 72%); border-color: rgba(255, 255, 255, .5); box-shadow: 0 10px 22px -10px rgba(201, 154, 78, .6), inset 0 1px 0 rgba(255, 255, 255, .65); }
.ic--gold svg { stroke: var(--navy); stroke-width: 1.7; }
.ic--sm { width: 44px; height: 44px; }
.ic--sm svg { width: 21px; height: 21px; }
.ic--lg { width: 78px; height: 78px; }
.ic--lg svg { width: 38px; height: 38px; }

.num {
  font-family: var(--script);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--gold-ink);
}

/* ---------- 7. 進場動畫 ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.rv.in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .09s; }
.rv[data-d="2"] { transition-delay: .18s; }
.rv[data-d="3"] { transition-delay: .27s; }
.rv[data-d="4"] { transition-delay: .36s; }
.rv[data-d="5"] { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   S1 — HERO
   ============================================================ */
.hero { padding-top: clamp(30px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.hero__brand {
  display: inline-block;
  margin: 16px 0 20px;
  padding: 7px 22px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(15px, 1.9vw, 19px);
  color: var(--navy);
  letter-spacing: .06em;
  border: 1px solid rgba(201, 154, 78, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
}
.hero h1 { margin-bottom: 22px; }
.hero__pain { font-size: clamp(15px, 1.85vw, 18px); color: #3A4C63; max-width: 46ch; }
.hero__pain strong { color: var(--navy); font-weight: 700; }

/* 人物合成 */
.hero__cast {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .9), transparent 70%),
    linear-gradient(165deg, var(--beige), #FBF3E6);
  border: 1px solid rgba(201, 154, 78, .45);
  box-shadow: var(--sh-float), inset 0 1px 0 rgba(255, 255, 255, .8);
  overflow: hidden;
}
.hero__cast::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 154, 78, .35);
  border-radius: 18px;
  pointer-events: none;
  z-index: 4;
}
/* height:auto 一定要 —— <img> 上面嘅 width/height 屬性係 presentational hint，
   唔覆寫嘅話人物會被硬拉成 1000px 高。
   mask：摳圖底邊係硬切嘅，要淡出先唔會見到一條直線。 */
.cast__p {
  position: absolute;
  bottom: 0;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(7, 31, 61, .22));
  
  
}
/* 三角形排位：水哥左上、詹 Sir 右上、Gingko 中下（前排）。
   一定要留意人物之間唔可以擋住對方塊面。 */
.cast__p--shuige { left: 0; bottom: 27%; height: 57%; width: auto; z-index: 1; }
.cast__p--jim { right: 0; bottom: 23%; height: 61%; width: auto; z-index: 2; }
.cast__p--gingko { left: 50%; transform: translateX(-50%); bottom: 0; height: 55%; width: auto; z-index: 3; }
.cast__tag {
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(7, 31, 61, .93);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid rgba(227, 193, 122, .35);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6);
}
.cast__tag svg { width: 13px; height: 13px; stroke: var(--gold-light); fill: none; stroke-width: 1.7; }
.cast__tag--shuige { top: 6%; left: 4%; }
.cast__tag--jim { top: 6%; right: 4%; }
.cast__tag--gingko { bottom: 6%; left: 4%; }

/* 痛點卡（浮起式） */
.pains {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 18px);
  margin-top: clamp(38px, 5vw, 58px);
}
.pain {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  background: rgba(255, 253, 250, .9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(201, 154, 78, .3);
  border-radius: 20px;
  box-shadow: var(--sh-card);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.pain:hover { transform: translateY(-6px); box-shadow: var(--sh-float); }
.pain__top { display: flex; align-items: center; justify-content: space-between; }
.pain h3 { font-size: clamp(17px, 2vw, 20px); margin: 0; }
.pain p { font-size: 14px; color: #55677E; line-height: 1.6; }

.hero__cta { margin-top: clamp(34px, 4.5vw, 50px); text-align: center; }
.hero__cta .cta-note { font-family: var(--serif); color: var(--navy); font-size: clamp(15px, 1.8vw, 18px); margin-bottom: 16px; margin-top: 0; }

/* ============================================================
   S2 — 問題與痛點（氣泡）
   ============================================================ */
.bubbles { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: clamp(30px, 4vw, 46px); }
.bubble {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(201, 154, 78, .26);
  border-radius: 20px 20px 20px 4px;
  box-shadow: var(--sh-card);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.bubble:nth-child(even) { border-radius: 20px 20px 4px 20px; }
.bubble:hover { transform: translateY(-5px); box-shadow: var(--sh-float); }
.bubble p { font-size: clamp(15px, 1.7vw, 16.5px); color: var(--ink); font-weight: 500; line-height: 1.65; }

.s2__scene { position: relative; }
.s2__scene img { width: 100%; border-radius: 22px; box-shadow: var(--sh-float); border: 1px solid rgba(201, 154, 78, .3); }
.s2__grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(24px, 4vw, 48px); align-items: center; }

/* 金線框總結句 */
.verdict {
  position: relative;
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 48px);
  text-align: center;
  background: linear-gradient(150deg, #FFFDF9, var(--cream));
  border: 1px solid rgba(201, 154, 78, .45);
  border-radius: 24px;
  box-shadow: var(--sh-card);
}
.verdict::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 154, 78, .3);
  border-radius: 18px;
  pointer-events: none;
}
.verdict p { font-family: var(--serif); font-size: clamp(19px, 3vw, 30px); font-weight: 700; color: var(--navy); line-height: 1.5; }
.verdict .ic { margin: 0 auto 18px; }

/* ============================================================
   S3 — 錯誤方法
   ============================================================ */
.s3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

/* 社交內容卡拼貼 */
.feed { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 0; }
.post {
  background: #fff;
  border: 1px solid rgba(201, 154, 78, .22);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--sh-card);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.post:nth-child(1) { transform: rotate(-4deg); }
.post:nth-child(2) { transform: rotate(1.5deg) translateY(-10px); }
.post:nth-child(3) { transform: rotate(4deg); }
.feed:hover .post { transform: rotate(0) translateY(-4px); }
.post__bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.post__ava { width: 18px; height: 18px; border-radius: 50%; background: var(--beige); }
.post__ln { height: 4px; border-radius: 3px; background: var(--beige); }
.post__ln--w { width: 60%; }
.post__img { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(150deg, #EFE4D3, #E3D5C0); overflow: hidden; }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__acts { display: flex; gap: 6px; margin-top: 8px; }
.post__acts span { width: 12px; height: 12px; border: 1.4px solid rgba(154, 132, 101, .5); border-radius: 3px; }
.post__tag {
  position: absolute;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold-pale);
  border: 1px solid rgba(201, 154, 78, .5);
  color: var(--navy);
  font-size: 12px;
  font-weight: 500;
  box-shadow: var(--sh-card);
}
.post__tag--1 { top: -6px; left: -8px; }
.post__tag--2 { top: -14px; left: 44%; }
.post__tag--3 { bottom: 4px; right: -10px; }

.q-list { list-style: none; margin-top: clamp(22px, 3vw, 30px); display: grid; gap: 12px; }
.q-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(201, 154, 78, .25);
  border-left: 3px solid var(--gold);
  border-radius: 4px 16px 16px 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--navy);
}
.q-list li::before { content: "？"; color: var(--gold); font-size: 20px; font-weight: 900; }

/* 深藍核心觀點 */
.belief {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 56px);
  border-radius: 30px;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(201, 154, 78, .22), transparent 70%),
    linear-gradient(155deg, var(--navy-soft), var(--navy) 60%);
  border: 1px solid rgba(227, 193, 122, .3);
  box-shadow: 0 30px 70px -30px rgba(7, 31, 61, .6), inset 0 1px 0 rgba(227, 193, 122, .25);
  text-align: center;
  color: var(--cream);
}
.belief p { font-family: var(--serif); font-size: clamp(20px, 3.2vw, 34px); font-weight: 700; line-height: 1.55; }
.belief .gold { color: var(--gold-light); }
.belief .cta { margin-top: 30px; }

/* ============================================================
   S4 — 解決方案（三大核心）
   ============================================================ */
.pillars { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(40px, 5vw, 60px); }
/* 金色流線連接 */
.pillars::before {
  content: "";
  position: absolute;
  top: 62px; left: 12%; right: 12%;
  height: 2px;
  background: var(--gold-line);
  opacity: .6;
  z-index: 0;
}
.pillar { position: relative; z-index: 1; text-align: center; padding-top: clamp(26px, 3vw, 34px); }
.pillar .ic--lg { margin: 0 auto 18px; }
.pillar__n {
  display: block;
  font-family: var(--script);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 600;
  line-height: 1;
  color: transparent;
  background: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 6px;
}
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 15px; color: #55677E; line-height: 1.7; }
.pillar__line { width: 40px; height: 1px; background: var(--gold); opacity: .55; margin: 12px auto; }

.s4__sum {
  margin-top: clamp(34px, 4vw, 48px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(18px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--navy);
}

/* ============================================================
   S5 — 會學到咩（3 張大白卡）
   ============================================================ */
.learn { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 26px); margin-top: clamp(36px, 4.5vw, 54px); }
.learn .card { display: flex; flex-direction: column; gap: 14px; }
.learn__hd { display: flex; align-items: center; gap: 14px; }
.learn h3 { line-height: 1.4; }
.learn p { font-size: 15px; color: #55677E; line-height: 1.75; }

/* 流程圖：名單 → 信任 → 查詢 → 成交 */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(201, 154, 78, .25); }
.flow__step {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid rgba(227, 193, 122, .3);
}
.flow__step:last-of-type { background: var(--cta-grad); color: var(--navy); font-weight: 700; border-color: rgba(255, 255, 255, .5); }
.flow__ar { color: var(--gold); font-size: 14px; }

/* ============================================================
   S6 — 對比
   ============================================================ */
.vs { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 30px); margin-top: clamp(38px, 5vw, 56px); align-items: stretch; }
.vs__badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cta-grad);
  color: var(--navy);
  font-family: var(--script);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  box-shadow: 0 16px 36px -14px rgba(197, 140, 56, .8), inset 0 1px 0 rgba(255, 255, 255, .75);
  border: 3px solid var(--cream);
}
.vs__col { padding: clamp(26px, 3.4vw, 38px) clamp(20px, 3vw, 32px); border-radius: 24px; }
.vs__col--plain {
  background: linear-gradient(160deg, #F4F2EF, #E9E6E1);
  border: 1px solid rgba(120, 120, 120, .18);
  color: #6E6E6E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}
.vs__col--ours {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(201, 154, 78, .22), transparent 70%),
    linear-gradient(155deg, var(--navy-soft), var(--navy) 62%);
  border: 1px solid rgba(227, 193, 122, .35);
  color: var(--cream);
  box-shadow: 0 26px 60px -28px rgba(7, 31, 61, .6);
}
.vs__hd { font-family: var(--serif); font-weight: 700; font-size: clamp(17px, 2.2vw, 22px); margin-bottom: 6px; }
.vs__col--plain .vs__hd { color: #5A5A5A; }
.vs__col--ours .vs__hd { color: var(--gold-light); }
.vs__sub { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--script); font-weight: 600; margin-bottom: 20px; opacity: .7; }
.vs__list { list-style: none; display: grid; gap: 13px; }
.vs__list li { display: flex; align-items: flex-start; gap: 11px; font-size: clamp(14.5px, 1.7vw, 16px); line-height: 1.6; }
.vs__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(140, 140, 140, .16);
  border: 1px solid rgba(120, 120, 120, .3);
}
.vs__col--ours .vs__list li::before {
  background: var(--cta-grad);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 4px 10px -4px rgba(201, 154, 78, .7);
}
.vs__foot {
  margin-top: clamp(34px, 4vw, 48px);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(19px, 2.9vw, 30px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.55;
}

/* ============================================================
   S7 — 導師
   ============================================================ */
.coach { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.coach + .coach { margin-top: clamp(56px, 7vw, 96px); }
.coach__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 54px); align-items: center; }
.coach:nth-child(even) .coach__photo { order: 2; }

.coach__photo {
  position: relative;
  aspect-ratio: 4 / 4.4;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 26%, rgba(255, 255, 255, .95), transparent 72%),
    linear-gradient(165deg, var(--beige), #FBF3E6);
  border: 1px solid rgba(201, 154, 78, .42);
  box-shadow: var(--sh-float);
}
.coach__photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 154, 78, .32);
  border-radius: 18px;
  pointer-events: none;
}
.coach__photo img {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 94%;
  filter: drop-shadow(0 20px 34px rgba(7, 31, 61, .2));
  
  
}
.coach__name { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; color: var(--navy); line-height: 1.15; }
.coach__en { font-family: var(--script); font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; color: var(--gold-ink); letter-spacing: .04em; margin-top: 2px; }
.coach__role { margin-top: 16px; display: grid; gap: 7px; }
.coach__role span { display: flex; align-items: center; gap: 9px; font-size: clamp(15px, 1.8vw, 17px); font-weight: 500; color: var(--ink); }
.coach__role span::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--cta-grad); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: clamp(22px, 3vw, 30px); }
.stat {
  text-align: center;
  padding: 16px 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, #FFFDFA, var(--cream));
  border: 1px solid rgba(201, 154, 78, .3);
  box-shadow: var(--sh-card);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.stat:hover { transform: translateY(-4px); }
.stat .ic--sm { margin: 0 auto 10px; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 900;
  line-height: 1.1;
  color: transparent;
  background: linear-gradient(135deg, #C58C38, #E9CB8C 55%, #B87F2C);
  -webkit-background-clip: text;
  background-clip: text;
}
.stat small { display: block; margin-top: 5px; font-size: 12px; color: #5D6E85; line-height: 1.35; }

.coach__skills {
  margin-top: 18px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--gold-light);
  font-size: clamp(13px, 1.6vw, 15px);
  text-align: center;
  letter-spacing: .05em;
  border: 1px solid rgba(227, 193, 122, .3);
  box-shadow: 0 14px 30px -16px rgba(7, 31, 61, .6), inset 0 1px 0 rgba(227, 193, 122, .2);
}

/* ============================================================
   S8 — 真實案例 + 見證片
   ============================================================ */
.case { margin-top: clamp(34px, 4.5vw, 52px); padding: clamp(24px, 3.4vw, 38px); background: #fff; border: 1px solid rgba(201, 154, 78, .25); border-radius: 26px; box-shadow: var(--sh-card); }
.case__hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.case__hd h3 { font-size: clamp(21px, 2.6vw, 27px); }
.case__type { padding: 5px 14px; border-radius: 999px; background: var(--beige); border: 1px solid rgba(201, 154, 78, .38); color: var(--muted); font-size: 12.5px; font-weight: 500; }
.case__body { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: 18px; }
.case__desc { font-size: 15.5px; color: #55677E; line-height: 1.8; }
.case__shot { border-radius: 16px; overflow: hidden; border: 1px solid rgba(201, 154, 78, .25); box-shadow: var(--sh-card); background: var(--beige); }
.case__nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.case__num { text-align: center; padding: 14px 8px; border-radius: 14px; background: linear-gradient(160deg, var(--cream), #FBF2E3); border: 1px solid rgba(201, 154, 78, .28); }
.case__num b { display: block; font-family: var(--serif); font-size: clamp(17px, 2.1vw, 22px); font-weight: 900; color: var(--navy); }
.case__num small { font-size: 12px; color: var(--muted); }

/* 見證影片 */
.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 20px); margin-top: clamp(34px, 4vw, 48px); }
.review {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(201, 154, 78, .35);
  box-shadow: var(--sh-card);
  background: var(--navy);
  cursor: pointer;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.review:hover { transform: translateY(-5px); box-shadow: var(--sh-float); }
.review video, .review img { width: 100%; height: 100%; object-fit: cover; }
/* 見證片係學員手機直出，畫風本身比較「生」——用金框 + 米白襯底包住，
   拉返入品牌嘅視覺系統，但唔美化片本身（真實感就係信任感）。 */
.reviews { padding: clamp(14px, 2vw, 20px); background: linear-gradient(160deg, #FFFDFA, var(--cream)); border: 1px solid rgba(201, 154, 78, .3); border-radius: 26px; box-shadow: var(--sh-card); }
.review { border-width: 2px; border-color: rgba(201, 154, 78, .55); }
.review__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(7, 31, 61, .1), rgba(7, 31, 61, .45));
  transition: opacity .3s;
}
.review.playing .review__play { opacity: 0; pointer-events: none; }
.review__play i {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--cta-grad);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.review__play i svg { width: 20px; height: 20px; fill: var(--navy); stroke: none; margin-left: 3px; }

/* ============================================================
   S9 — 適合對象
   ============================================================ */
.s9__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(26px, 4vw, 52px); align-items: center; }
.s9__scene { position: relative; display: flex; justify-content: center; }
/* 限高，唔係右欄會高過左欄一大截，左邊睇落好空。
   aspect-ratio 一定要有 —— width:auto 會蓋走 HTML 屬性嘅尺寸，lazy load 時會跳版。 */
.s9__scene > img:first-child {
  aspect-ratio: 2 / 3;
  max-height: 420px;
  width: auto;
  border-radius: 22px;
  box-shadow: var(--sh-float);
  border: 1px solid rgba(201, 154, 78, .3);
}
.s9__scene .s9__collage {
  position: absolute;
  bottom: -28px; left: 0;
  width: 52%;
  height: auto;
  border-radius: 16px;
  border: 3px solid var(--cream);
  box-shadow: var(--sh-float);
}
.fits { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 14px); margin-top: clamp(34px, 4vw, 48px); }
.fit {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: rgba(255, 253, 250, .92);
  border: 1px solid rgba(201, 154, 78, .3);
  border-radius: 16px;
  box-shadow: var(--sh-card);
  font-size: clamp(14px, 1.6vw, 15.5px);
  font-weight: 500;
  color: var(--navy);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s;
}
.fit:hover { transform: translateY(-4px); box-shadow: var(--sh-float); }

/* ============================================================
   S10 — 未必適合（記事板）
   ============================================================ */
.board {
  position: relative;
  margin-top: clamp(34px, 4.5vw, 52px);
  padding: clamp(28px, 4vw, 54px) clamp(20px, 3vw, 44px);
  border-radius: 28px;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201, 154, 78, .16), transparent 70%),
    linear-gradient(155deg, var(--navy-soft), var(--navy) 62%);
  border: 1px solid rgba(227, 193, 122, .28);
  box-shadow: 0 30px 70px -30px rgba(7, 31, 61, .6);
}
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.note {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 18px;
  border-radius: 6px;
  background: linear-gradient(160deg, #FFFDF7, #F6EEE0);
  color: var(--navy);
  font-weight: 500;
  font-size: clamp(14.5px, 1.7vw, 16px);
  line-height: 1.5;
  box-shadow: 0 16px 30px -16px rgba(0, 0, 0, .5);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.note:nth-child(1) { transform: rotate(-1.4deg); }
.note:nth-child(2) { transform: rotate(.9deg); }
.note:nth-child(3) { transform: rotate(-.6deg); }
.note:nth-child(4) { transform: rotate(1.3deg); }
.note:nth-child(5) { transform: rotate(-1deg); }
.note:hover { transform: rotate(0) translateY(-5px); }
.note::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 54px; height: 16px;
  background: rgba(227, 193, 122, .55);
  border: 1px solid rgba(201, 154, 78, .35);
}
.note { position: relative; }
.board__foot {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(227, 193, 122, .28);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(17px, 2.4vw, 25px);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.6;
}
.board__foot .gold { color: var(--gold-light); }

/* ============================================================
   S11 — 選擇與行動
   ============================================================ */
.choice-a { display: grid; gap: 12px; max-width: 760px; margin: clamp(28px, 3.5vw, 40px) auto 0; }
.choice-a li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 20px;
  list-style: none;
  background: rgba(244, 242, 239, .8);
  border: 1px solid rgba(120, 120, 120, .16);
  border-radius: 14px;
  color: #6E6E6E;
  font-size: clamp(14.5px, 1.7vw, 16.5px);
}
.choice-a li .ic--sm { background: #E4E1DC; border-color: rgba(120, 120, 120, .2); box-shadow: none; }
.choice-a li .ic--sm svg { stroke: #9E9E9E; }

.or {
  display: grid;
  place-items: center;
  width: 82px; height: 82px;
  margin: clamp(26px, 3.5vw, 38px) auto;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  border: 2px solid var(--gold);
  box-shadow: 0 18px 40px -18px rgba(7, 31, 61, .7), inset 0 1px 0 rgba(227, 193, 122, .3);
}

.arc {
  position: relative;
  padding: clamp(36px, 5vw, 64px) clamp(22px, 4vw, 56px);
  border-radius: clamp(40px, 6vw, 80px);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(201, 154, 78, .22), transparent 70%),
    linear-gradient(155deg, var(--navy-soft), var(--navy) 62%);
  border: 1px solid rgba(227, 193, 122, .3);
  box-shadow: 0 34px 80px -34px rgba(7, 31, 61, .65);
  text-align: center;
  color: var(--cream);
}
.gains { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); margin: clamp(28px, 3.5vw, 40px) 0; text-align: center; }
.gain .ic { margin: 0 auto 12px; background: radial-gradient(circle at 32% 26%, #F0D9A4, var(--gold) 72%); border-color: rgba(255, 255, 255, .45); }
.gain .ic svg { stroke: var(--navy); }
.gain h3 { font-size: clamp(16px, 1.9vw, 19px); color: var(--gold-light); margin-bottom: 6px; }
.gain p { font-size: 13.5px; color: rgba(255, 249, 240, .75); line-height: 1.6; }

/* ============================================================
   S12 — 最後 CTA
   ============================================================ */
.final { text-align: center; }
.final h2 { font-size: clamp(28px, 5.4vw, 56px); line-height: 1.35; }
.final__event {
  display: inline-block;
  margin: clamp(26px, 3.4vw, 38px) 0;
  padding: clamp(16px, 2.2vw, 22px) clamp(28px, 4vw, 48px);
  border-radius: 20px;
  background: linear-gradient(150deg, #FFFDF9, var(--cream));
  border: 1px solid rgba(201, 154, 78, .5);
  box-shadow: var(--sh-card);
}
.final__event span { display: block; font-family: var(--script); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
.final__event b { display: block; margin-top: 6px; font-family: var(--serif); font-size: clamp(22px, 3.4vw, 34px); font-weight: 900; color: var(--navy); }
.benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(30px, 4vw, 40px); }
.benefits li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(201, 154, 78, .35);
  font-size: clamp(13.5px, 1.6vw, 15px);
  font-weight: 500;
  color: var(--navy);
}
.benefits li svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 2; }

/* Footer */
.foot { background: var(--navy); color: rgba(255, 249, 240, .62); padding: clamp(40px, 5vw, 60px) var(--pad-x) clamp(90px, 10vw, 60px); text-align: center; font-size: 13.5px; line-height: 1.9; }
.foot__brand { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--gold-light); margin-bottom: 12px; }
.foot p { max-width: 640px; margin-inline: auto; }
.foot a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.foot__legal { margin-top: 18px; font-size: 12px; color: rgba(255, 249, 240, .42); }

/* ---------- Sticky mobile CTA ---------- */
.sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 249, 240, .93);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201, 154, 78, .35);
  box-shadow: 0 -8px 30px -12px rgba(7, 31, 61, .25);
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.sticky.show { transform: none; }
.sticky .cta { width: 100%; min-height: 54px; }

/* ---------- 報名 Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;              /* 表單自己捲，唔好成個 modal 捲 */
  background: rgba(7, 31, 61, .62);
  backdrop-filter: blur(5px);
}
.modal.open { display: flex; }
.modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - 28px);   /* 個殼固定，唔會郁 */
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(165deg, #FFFDF9, var(--cream) 55%, #FBF2E3);
  border: 1px solid rgba(201, 154, 78, .45);
  box-shadow: 0 40px 90px -30px rgba(7, 31, 61, .6);
  animation: pop .45s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pop { from { opacity: 0; transform: translateY(22px) scale(.97); } }

/* 只有表單內容捲 → 個「✕」永遠留喺右上角，唔會跟住碌走 */
.modal__form, .done {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(26px, 4vw, 40px);
  padding-bottom: calc(clamp(26px, 4vw, 40px) + env(safe-area-inset-bottom));
}

.modal__x {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 10;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--navy);
  background: rgba(255, 253, 249, .92);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(201, 154, 78, .38);
  box-shadow: 0 4px 14px -4px rgba(7, 31, 61, .25);
  font-size: 18px;
  transition: background .25s, transform .25s;
}
.modal__x:hover { background: var(--beige); transform: rotate(90deg); }
.modal h2 { font-size: clamp(22px, 3.4vw, 28px); margin-bottom: 8px; }
.modal__sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }

.field { margin-bottom: 17px; }
.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.field .req { color: var(--gold-ink); }
.input, .select {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(201, 154, 78, .35);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  transition: border-color .25s, box-shadow .25s;
  appearance: none;
}
.input::placeholder { color: #B9AC99; }
.input:focus, .select:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 154, 78, .16);
}
.select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%23C99A4E' stroke-width='1.8'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.phone-row { display: grid; grid-template-columns: 122px 1fr; gap: 10px; }
/* 區號格窄，要收返內邊距，先容得落「🇭🇰 +852」 */
.phone-row .select {
  padding-left: 11px;
  padding-right: 26px;
  background-position: right 9px center;
  font-size: 15px;
  letter-spacing: -.01em;
}

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.opts--1 { grid-template-columns: 1fr; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(201, 154, 78, .32);
  font-size: 14.5px;
  color: var(--ink);
  transition: all .22s;
  cursor: pointer;
  line-height: 1.4;
}
.opt input:checked + span {
  background: var(--navy);
  color: var(--gold-light);
  border-color: var(--navy);
  box-shadow: 0 10px 24px -12px rgba(7, 31, 61, .6);
  font-weight: 500;
}
.opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(201, 154, 78, .3); }

.modal .cta { width: 100%; margin-top: 8px; }
.modal__legal { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.err { display: none; margin-top: 6px; font-size: 13px; color: #C0392B; }
.field.bad .input, .field.bad .select { border-color: #C0392B; }
.field.bad .err { display: block; }

/* 報名成功 */
.done { display: none; text-align: center; padding: 10px 0; }
.done.show { display: block; }
.done .ic--lg { margin: 0 auto 20px; background: radial-gradient(circle at 32% 26%, #F0D9A4, var(--gold) 72%); border-color: rgba(255, 255, 255, .5); }
.done .ic--lg svg { stroke: var(--navy); stroke-width: 2.4; }
.done h2 { margin-bottom: 10px; }
.done p { color: #55677E; font-size: 15px; margin-bottom: 22px; }
.modal__box.done-mode .modal__form { display: none; }

/* ============================================================
   RESPONSIVE — Mobile first fallbacks
   ============================================================ */
@media (max-width: 1024px) {
  .pains { grid-template-columns: repeat(2, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .fits { grid-template-columns: repeat(2, 1fr); }
  .notes { grid-template-columns: repeat(2, 1fr); }
  .gains { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero__grid, .s2__grid, .s3__grid, .s9__grid, .coach__grid, .case__body { grid-template-columns: 1fr; }
  .coach:nth-child(even) .coach__photo { order: 0; }
  /* 注意：grid item 唔可以用 margin-inline:auto 置中 —— auto margin 會蓋過 stretch，
     令入面全部 absolute 嘅人物圖撐唔起個框（塌成 2px）。要用 justify-self。 */
  .hero__cast { width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 1 / 1.06; }
  .hero__head { text-align: center; }
  .hero__head .eyebrow, .hero__head .chip { justify-content: center; }
  .hero__pain { margin-inline: auto; text-align: center; }
  .bubbles { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 34px; }
  .pillars::before { display: none; }
  .learn { grid-template-columns: 1fr; }
  .vs { grid-template-columns: 1fr; gap: 44px; }
  .vs__badge { top: 50%; }
  .coach__photo { width: 100%; max-width: 400px; justify-self: center; aspect-ratio: 1 / 1.08; }
  .s9__scene { width: 100%; max-width: 440px; justify-self: center; }
  .s9__scene > img:first-child { max-height: none; width: 100%; }
  .s9__scene .s9__collage { left: -10px; bottom: -18px; width: 52%; }
  .sticky { display: block; }
  .foot { padding-bottom: 110px; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .pains { grid-template-columns: 1fr; }
  .pain { position: relative; flex-direction: row; align-items: center; gap: 15px; padding: 18px 46px 18px 18px; }
  .pain__top { align-items: center; }
  .pain .num { position: absolute; top: 14px; right: 18px; }
  .pain__body { flex: 1; }
  .pain h3 { margin-bottom: 2px; }
  .fits, .notes, .gains, .stats { grid-template-columns: 1fr 1fr; }
  .case__nums { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr 1fr; gap: 10px; }
  .feed { gap: 8px; }
  .post { padding: 7px; }
  .post__tag { font-size: 11px; padding: 4px 9px; }
  .opts { grid-template-columns: 1fr; }
  /* 122px 唔可以再細 —— 再窄「🇭🇰 +852」會被切走個「2」 */
  .phone-row { grid-template-columns: 122px 1fr; gap: 8px; }
  .modal { padding: 10px; }
  .modal__form, .done { padding: 24px 18px; }
  .modal__box { border-radius: 20px; }
  .or { width: 68px; height: 68px; font-size: 18px; }
}