/* ══════════════════════════════════════════════════════════════════
   FC 報名頁 v4 —— 照 refs/adiai-wp/DESIGN.md（adiai.com 真設計系統）
   色／字／圓角全部係站上量返嚟嘅，唔係估。Nam 2026-09-03：「follow our previous website」
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* Salient theme options（inline style 數返嚟） */
  --accent:#4405A6;          /* 主紫 ×68 */
  --g1a:#653BDB; --g1b:#4720BC;   /* Gradient-1：所有大標題 */
  --g2a:#B78C00; --g2b:#9E6900;   /* Gradient-2：導師名／二級／金掣 */
  --x1:#B586EF; --x3:#692ADD; --deep:#241738; --teacher:#2D0D89;
  --band1:#F7F6FE; --band2:#DDD0FF; --band3:#ECEAFD; --band4:#FDF2AB; --band5:#E5E3F7;
  --marker:#F7EA00;
  --ink:#1a1030; --body:#3b3352; --muted:#6a6280; --hair:#E8E2F5;
  --red:#DA0600; --green:#10AE25;     /* 紅區／綠區（tokens.json） */
  --gold-text:#F5D75A;                /* 深底上嘅金字（KV 同款） */
  --maxw:1216px;
}
*{box-sizing:border-box;margin:0}
html,body{background:#fff}
body{font-family:"Noto Sans HK",-apple-system,"PingFang HK",sans-serif;color:var(--body);
     font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:64px 0}
@media(min-width:768px){section{padding:88px 0}}

/* 字：Noto Sans HK 900、字距 0（站上真值）；標題用 Gradient-1 文字 */
h1,h2,h3{color:var(--ink);letter-spacing:0;line-height:1.2;text-wrap:balance}
h1{font-size:34px;font-weight:900;line-height:1.15}
/* h1 兩截各自做 block 並平衡行長，唔好剩一兩隻字喺尾行（實測「轉綠?!」孤行·360→1280 全部闊度）。
   兩截已經係 block，所以原本嗰個 <br> 收起。 */
h1 br{display:none}
h1 span{display:block;text-wrap:balance}
/* 手機：h1 用 clamp 跟闊度縮，避免長標題斷喺詞中間（實測 390px 斷咗「交易紅綠區買／賣訊號教學！」）。
   text-wrap:balance 令兩行長度平均，唔會第二行剩一兩隻字。 */
@media(max-width:767px){h1{font-size:clamp(22px,6.4vw,32px)}}
h2{font-size:30px;font-weight:900}
h3{font-size:22px;font-weight:700}
@media(min-width:768px){h1{font-size:48px}h2{font-size:42px}h3{font-size:24px}}
.grad{background:linear-gradient(125deg,var(--g1a),var(--g1b));-webkit-background-clip:text;background-clip:text;color:transparent}
.gold{background:linear-gradient(125deg,var(--g2a),var(--g2b));-webkit-background-clip:text;background-clip:text;color:transparent}
.mark{background:var(--marker);padding:.05em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone;color:var(--ink)}
.eyebrow{display:inline-block;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--x3);margin-bottom:14px}
.lead{font-size:20px;line-height:1.6;color:var(--body)}
.small{font-size:15px;color:var(--muted);line-height:1.65}
.tiny{font-size:13px;color:var(--muted);line-height:1.6}

/* 掣：站上一律 pill；主動作實色紫、次動作金漸變 */
.btn{display:inline-block;font-weight:700;font-size:18px;border-radius:9999px;padding:16px 40px;text-decoration:none;
     background:var(--accent);color:#fff;border:0;cursor:pointer;transition:transform .15s ease-out,opacity .15s ease-out}
.btn:hover{opacity:.92}.btn:active{transform:scale(.985)}
.btn.gold-solid{background:linear-gradient(125deg,var(--g2a),var(--g2b));color:#fff}
.btn.block{display:block;width:100%;text-align:center}

/* ── 1 · KV（每屆一張圖，同 Kartra 頁做法一樣） ─────────────────── */
.kvwrap{background:var(--deep);padding:20px 0 0}
.kvwrap img{border-radius:14px}

/* ── 2 · Hero 文案 ＋ 表（深紫→teacher 紫漸變底） ────────────────── */
.hero{background:linear-gradient(180deg,var(--deep) 0%,var(--teacher) 100%);color:#fff;padding:36px 0 56px}
.hero .grid{display:grid;gap:32px}
@media(min-width:1080px){.hero .grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}}
.hero h1{color:#fff}
/* 金＝站上真 CSS 嗰隻（salient-inline.css 量返：linear-gradient(125deg,#b78c00,#9e6900)）
   深底上要睇得清，所以加一個較淺嘅起點，但收喺同一個暖金系，唔用亮黃 */
.hero h1 .goldline{background:linear-gradient(125deg,#E0A93A,#B78C00 55%,#9E6900);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.hero .sub{font-size:20px;color:#E4DCF0;margin:14px 0 20px;line-height:1.55}
/* 禮物徽章：由亮黃 #F7EA00 改用站上金漸變（DESIGN.md：唔用亮黃做網頁金） */
.gift{display:inline-block;background:linear-gradient(125deg,#B78C00,#9E6900);color:#fff;font-weight:900;font-size:17px;padding:9px 18px;border-radius:9999px;margin:22px 0 18px;box-shadow:0 2px 10px rgba(0,0,0,.25)}
/* 層級：第一句賣點式緊迫（亮）、第二句名額註腳（暗細） */
.scarcity{font-size:17px;color:#F0E7FF;margin-bottom:10px;font-weight:700;line-height:1.5}
.scarcity#scarcity2{font-size:14px;color:var(--x1);font-weight:500;margin-bottom:22px;letter-spacing:.02em}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:17px;color:#fff;margin-bottom:6px}
.meta b{font-weight:900}
ul.learn{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:13px;font-size:17px;color:#fff;line-height:1.5}
ul.learn li::before{content:"✅ "}

/* 表：白卡、圓角 16、實心 pill；欄位／action 逐字照 live 頁 */
.form{background:#fff;border-radius:16px;padding:26px;color:var(--ink)}
.form h3{font-size:22px;font-weight:900;margin-bottom:4px}
.form p{font-size:14px;color:var(--muted);margin-bottom:16px}
.form input[type=text],.form select{width:100%;font:inherit;font-size:17px;padding:14px 18px;border:1.5px solid #D9D2EA;border-radius:12px;margin-bottom:12px;background:#FBFAFF;color:var(--ink)}
.form input:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .pair{display:grid;grid-template-columns:104px 1fr;gap:10px}
.form label.chk{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:14px;color:var(--muted);margin:2px 0 10px;align-items:start;text-align:left}
.form label.chk input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.form .btn{margin-top:6px}
.hp{position:absolute;left:-9999px}

/* ── 3 · 紅區綠區 ＝ 一個產品（8P） ──────────────────────────────── */
.zones .two{display:grid;gap:28px;margin-top:36px}
@media(min-width:900px){.zones .two{grid-template-columns:1.1fr .9fr;align-items:center;gap:48px}}
.legend{display:grid;gap:14px;margin-top:24px}
.legend div{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:17px}
.legend i{display:block;width:18px;height:18px;border-radius:4px;margin-top:6px}
.legend .r i{background:var(--red)}.legend .g i{background:var(--green)}
.legend b{color:var(--ink)}
.chartimg{border-radius:12px;border:1px solid var(--hair)}

/* ── 4 · 同一套方法三個用法（淺紫帶 · 三張圖卡） ───────────────── */
.uses{background:var(--band1)}
.uses .cards{display:grid;gap:20px;margin-top:36px}
@media(min-width:900px){.uses .cards{grid-template-columns:repeat(3,1fr)}}
.ucard{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--hair);display:flex;flex-direction:column}
.ucard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ucard .b{padding:20px 22px 24px;flex:1}
.ucard .n{font-size:13px;letter-spacing:.12em;color:var(--x3);font-weight:700;margin-bottom:6px}
.ucard h3{margin-bottom:8px}
.ucard p{font-size:15px;color:var(--muted);line-height:1.6}

/* ── 5 · 數據唔係感覺（真肌肉：Excel ＋ 交易紀錄） ────────────────── */
.muscle .two{display:grid;gap:24px;margin-top:36px}
@media(min-width:900px){.muscle .two{grid-template-columns:1fr 1fr}}
.mcard{background:var(--band3);border-radius:16px;padding:18px}
.mcard img{border-radius:10px}
.mcard .cap{font-size:14px;color:var(--muted);margin-top:12px;line-height:1.6}
.mcard .cap b{color:var(--ink)}

/* ── 6 · 三小時，兩樣任揀一樣（Nam 手稿：walk away with either） ──── */
.either{background:linear-gradient(180deg,var(--band2),#fff)}
.either .two{display:grid;gap:20px;margin-top:32px}
@media(min-width:768px){.either .two{grid-template-columns:1fr 1fr}}
.ecard{background:#fff;border-radius:16px;padding:28px;border:1px solid var(--hair)}
.ecard .k{font-size:13px;letter-spacing:.12em;font-weight:700;color:var(--x3);margin-bottom:8px}
.ecard h3{margin-bottom:10px}
.ecard ul{padding-left:20px;font-size:16px;color:var(--body);line-height:1.7}

/* ── 7 · Reality：三個 persona ＋ 數 → solution ─────────────────── */
.reality .three{display:grid;gap:18px;margin-top:32px}
@media(min-width:900px){.reality .three{grid-template-columns:repeat(3,1fr)}}
.pcard{border-radius:16px;padding:24px;background:var(--band3);border:1px solid var(--hair)}
.pcard .who{font-size:13px;letter-spacing:.1em;color:var(--x3);font-weight:700;margin-bottom:6px}
.pcard .big{font-size:40px;font-weight:900;line-height:1;margin:6px 0 10px}
.pcard p{font-size:15px;color:var(--muted);line-height:1.6}
.pcard blockquote{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--x1);font-size:15px;color:var(--ink);background:#fff;border-radius:0 8px 8px 0}
.solution{margin-top:32px;background:var(--teacher);color:#fff;border-radius:16px;padding:32px 28px}
.solution h3{color:#fff;font-size:26px;margin-bottom:8px}
.solution p{color:#E4DCF0;font-size:17px}

/* ── 8 · 最後一推 ＋ 本月限定：期權（深底、金字） ─────────────────── */
.push{background:var(--deep);color:#fff}
.push .two{display:grid;gap:28px;margin-top:28px}
@media(min-width:900px){.push .two{grid-template-columns:1fr 1fr;align-items:center;gap:48px}}
.push h2{color:#fff}
.push .why{font-size:20px;color:var(--gold-text);font-weight:700;margin:8px 0 14px}
.push p{color:#E4DCF0;font-size:17px}
.push img{border-radius:12px}
.push .tag{display:inline-block;background:linear-gradient(125deg,var(--g2a),var(--g2b));color:#fff;font-weight:900;font-size:22px;padding:10px 20px;border-radius:8px;margin-bottom:18px}
@media(min-width:900px){.push .tag{font-size:28px;padding:12px 26px}}

/* ── 9 · 傳媒 ＋ 好評 ───────────────────────────────────────────── */
.press{background:var(--band1);padding:40px 0}
.press .lbl{text-align:center;font-size:14px;color:var(--muted);margin-bottom:18px}
.press .row{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:center;align-items:center}
.press img{height:36px;width:auto}
.proof .cards{display:grid;gap:18px;margin-top:28px}
@media(min-width:768px){.proof .cards{grid-template-columns:repeat(3,1fr)}}
.proof img{border-radius:12px;border:1px solid var(--hair)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;padding-top:32px;border-top:1px solid var(--hair)}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat .n{font-size:40px;font-weight:900;line-height:1}
.stat .l{font-size:14px;color:var(--muted);margin-top:8px}

/* ── 10 · 尾 CTA ＋ 表 ───────────────────────────────────────────── */
.final{background:var(--band2)}
.final .wrap{max-width:760px;text-align:center}
.final .form{text-align:left;margin-top:28px;border:1px solid var(--hair)}
footer{background:var(--deep);color:#B9AED6;padding:36px 0;font-size:13px;line-height:1.8}
footer a{color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;border-radius:9999px;z-index:99}
.skip:focus{left:16px;top:12px}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}

/* 主講：相 ＋ 文 兩欄 */
.teacher{padding:72px 0 40px}
.teacher .two{display:grid;gap:24px;align-items:center}
.teacher img{width:100%;max-width:360px;border-radius:12px;justify-self:center}
@media(min-width:900px){.teacher .two{grid-template-columns:340px 1fr;gap:48px}}
/* 手機底部釘住 CTA：報名表唔喺畫面先出現 */
.stickycta{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(36,23,56,.96);z-index:50}
.stickycta .btn{font-size:16px;padding:14px 18px}
@media(min-width:900px){.stickycta{display:none}}
/* ── v6 ───────────────────────────────────── */
.rec{padding:72px 0;background:#fff}
.rec .two{display:grid;gap:24px;margin-top:24px;align-items:center}
@media(min-width:900px){.rec .two{grid-template-columns:1.4fr 1fr;gap:48px}}
.rec video,.vids video{width:100%;height:auto;border-radius:12px;background:#000;display:block}
.push .gz{width:100%;border-collapse:collapse;font-size:15px;color:#fff;font-variant-numeric:tabular-nums}
.push .gz th{font-weight:700;color:#F5D75A;text-align:left;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.25)}
.push .gz td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.12)}
.push .gz td:nth-child(n+2),.push .gz th:nth-child(n+2){text-align:right}
.push .gz td:last-child{color:#7EE39A;font-weight:700}
.vids{padding:72px 0;background:var(--band1)}
.vids .three{display:grid;gap:18px;margin-top:24px}
@media(min-width:900px){.vids .three{grid-template-columns:repeat(3,1fr)}}
.vids figure{margin:0}
.vids figcaption{font-size:15px;line-height:1.6;margin-top:10px;color:var(--body)}
.vids figcaption b{color:var(--ink)}
.muscle .cap{font-size:14px;line-height:1.6;margin-top:10px}
.push .gz td:first-child{white-space:nowrap}
@media(max-width:599px){.push .gz{font-size:13px}.push .gz th,.push .gz td{padding:7px 6px}}

/* ── v7 ───────────────────────────────────── */
.trust{background:var(--band1);border-bottom:1px solid var(--hair)}
.trust .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px;padding-top:28px;padding-bottom:28px}
@media(min-width:768px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust .n{font-size:34px;font-weight:900;line-height:1;color:var(--accent)}
.trust .n.gold{background:linear-gradient(125deg,var(--g2a),var(--g2b));-webkit-background-clip:text;background-clip:text;color:transparent}
.trust .l{font-size:14px;color:var(--muted);margin-top:6px}
.legend.big{font-size:20px;line-height:1.5}
.legend.big b{font-size:22px}
.legend.big i{width:18px;height:18px;margin-top:8px}
.ucard img,.mcard img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}
.rec .grid6{display:grid;gap:18px;margin-top:24px}
@media(min-width:700px){.rec .grid6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rec .grid6{grid-template-columns:repeat(3,1fr)}}
.rec figure{margin:0}.rec figcaption{font-size:14px;line-height:1.6;margin-top:8px;color:var(--body)}.rec figcaption b{color:var(--ink)}
.ecard.giftcard{background:linear-gradient(160deg,#FFF7D6,#FDF2AB);border-color:#E9D67A}
.ecard ul li{margin:6px 0}
.ba{display:grid;gap:18px;margin-top:28px}
@media(min-width:900px){.ba{grid-template-columns:1fr 1fr}}
.bacol{border-radius:16px;padding:26px 24px;background:var(--band3);border:1px solid var(--hair)}
.bacol.after{background:#F0FBF3;border-color:#BFE9CA}
.bacol .k{font-size:13px;letter-spacing:.14em;font-weight:900;color:var(--x3);margin-bottom:12px}
.bacol.after .k{color:#1D8A3A}
.bacol .row{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bacol .row b{font-size:30px;font-weight:900;color:var(--accent);line-height:1}
.bacol.after .row b{color:#1D8A3A}
.bacol .row span{font-size:15px;color:var(--body)}
.bacol p{font-size:15px;color:var(--body);margin-top:14px;line-height:1.7}
.push{border-top:4px solid #B78C00}
.push h2{font-size:34px;line-height:1.25}
@media(min-width:900px){.push h2{font-size:40px}}
.push .hl{color:#7EE39A}
.push .urg{margin-top:14px;font-weight:900;color:var(--marker);font-size:18px}
.gzwrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:20px}
.bignum{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.bignum b{font-size:56px;font-weight:900;line-height:1;color:#7EE39A}
.bignum b small{font-size:26px;color:#C9BEE6;font-weight:700}
.bignum span{font-size:15px;color:#E4DCF0}
.gzwrap .more{font-size:14px;color:#C9BEE6;margin-top:12px}
.press{padding:48px 0}
.press img{height:54px;width:auto}
.press .row{gap:22px 44px;max-width:900px;margin:0 auto}
.press .photos{display:grid;gap:14px;margin-top:32px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.press .photos{grid-template-columns:repeat(4,1fr)}}
.press .photos figure{margin:0}.press .photos img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
.press .photos figcaption{font-size:13px;color:var(--muted);margin-top:6px;text-align:center}
.vids .grid7{display:grid;gap:16px;margin-top:24px;grid-template-columns:1fr}
@media(min-width:600px){.vids .grid7{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.vids .grid7{grid-template-columns:repeat(4,1fr)}}
.vids .shots{display:grid;gap:14px;margin-top:28px}
@media(min-width:768px){.vids .shots{grid-template-columns:repeat(3,1fr)}}
.vids .shots img{border-radius:12px;border:1px solid var(--hair);width:100%;display:block}
.faq{background:#fff}
.faq .qs{max-width:820px;margin-top:20px}
.faq details{border-bottom:1px solid var(--hair);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:18px;color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"＋";color:var(--accent);font-weight:900;margin-left:16px}
.faq details[open] summary::after{content:"－"}
.faq details p{margin-top:10px;font-size:16px;color:var(--body);line-height:1.7;max-width:64ch}
.legend.big div{font-size:20px}
.press .row{max-width:1100px}

/* ── v7.1 三行結構：紫 → 黑 → 短段 ── */
h2 .l1,h2 .l2{display:block}
h2 .l2{color:var(--ink);margin-top:4px}
.zred{color:#DA0600}.zgreen{color:#10AE25}
section .lead,.press .lead{margin-top:14px;max-width:64ch}
.push h2 .l1{background:linear-gradient(125deg,#F5D75A,#D9A82E);-webkit-background-clip:text;background-clip:text;color:transparent}
.push h2 .l1 .hl{color:#7EE39A}
.push h2 .l2{color:#fff}
.push .lead{color:#E4DCF0}
.push .two{margin-top:24px}
.press h2{text-align:center}.press .lead{text-align:center;margin:12px auto 26px}
.trust .n{font-size:44px}
.trust .wrap{padding-top:34px;padding-bottom:34px}
.final h2 .l2{font-size:22px;font-weight:700}
@media(max-width:599px){.trust .wrap{grid-template-columns:1fr;gap:12px}.trust .stat{display:flex;align-items:baseline;gap:14px}.trust .n{font-size:32px;white-space:nowrap}.trust .l{margin-top:0}}
.trust .stat{text-align:center}
@media(max-width:599px){.trust .stat{justify-content:center}}

/* 信任條：兩行（A Sir 4 格 · 學員 3 格） */
.trust .wrap{display:block;padding-top:28px;padding-bottom:28px}
.trust .trow{display:grid;gap:18px 24px;align-items:start;padding:14px 0}
.trust .trow+.trow{border-top:1px solid var(--hair)}
.trust .rl{grid-column:1/-1;text-align:center;font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--x3)}
@media(min-width:768px){.trust .r4{grid-template-columns:repeat(4,1fr)}.trust .r3{grid-template-columns:repeat(3,1fr);max-width:900px;margin:0 auto}}
@media(max-width:767px){.trust .trow{grid-template-columns:1fr;gap:12px}.trust .stat{display:flex;align-items:baseline;justify-content:center;gap:14px}.trust .n{font-size:32px;white-space:nowrap}.trust .l{margin-top:0}}
.trust .n{font-size:42px}
@media(max-width:767px){.trust .trow{grid-template-columns:1fr 1fr;gap:16px 10px}.trust .stat{display:block;text-align:center}.trust .n{font-size:26px;white-space:nowrap}.trust .l{margin-top:4px;font-size:13px}.trust .r3 .stat:last-child{grid-column:1/-1}}

.lead b{color:var(--ink);font-weight:700}
.push .lead b{color:#fff}
.ret{display:flex;align-items:baseline;gap:14px;margin-top:26px;flex-wrap:wrap}
.ret b{font-size:64px;line-height:1;font-weight:900;background:linear-gradient(125deg,var(--g2a),var(--g2b));-webkit-background-clip:text;background-clip:text;color:transparent}
.ret span{font-size:16px;color:var(--body)}
.zones .lead{max-width:78ch}

/* 段落重點：用原站 marker 黃做螢光筆（唔用粗體） */
.lead b{font-weight:700;color:var(--ink);background:linear-gradient(transparent 58%,var(--marker) 58%);padding:0 2px}
.push .lead b{color:#fff;background:linear-gradient(transparent 58%,rgba(245,215,90,.45) 58%)}

/* 螢光筆退回：淨粗體 */
.lead b,.push .lead b{background:none;padding:0}
.ret b{font-size:96px}
.zones .ex2{margin-top:36px}
.zones .ex2>div{display:flex;align-items:center}
.zones .ex2 .ret{margin-top:0}
@media(max-width:599px){.ret b{font-size:72px}}

/* 紅綠區：圖例兩格 ＋ 紀錄兩卡 */
.zonebox{display:grid;gap:18px;margin-top:28px}
.records{display:grid;gap:18px;margin-top:22px}
@media(min-width:768px){.zonebox,.records{grid-template-columns:1fr 1fr}}
.zb{border-radius:16px;padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
.zb.r{background:#FDECEC;border:1px solid #F3B4B4}.zb.g{background:#EAF8EE;border:1px solid #B4E3C2}
.zb i{display:block;width:18px;height:18px;border-radius:4px;margin-top:8px;flex:none}.zb.r i{background:#DA0600}.zb.g i{background:#10AE25}
.zb b{display:block;font-size:24px;font-weight:900;color:var(--ink);line-height:1.3}.zb span{font-size:17px;color:var(--body)}
.reccard{margin:0;background:var(--band3);border-radius:16px;padding:16px}
.reccard img{width:100%;height:auto;border-radius:10px;display:block}
.reccard .ret{margin-top:14px}.reccard .ret b{font-size:72px}
.reccard figcaption{font-size:15px;color:var(--body);margin-top:2px}
.zb{align-items:center;justify-content:center;padding:20px 24px}.zb i{margin-top:0}
.ucard p{line-height:1.7}
.uses .lead{max-width:78ch}
.ucard img.fit{object-fit:contain;background:#0E0A1C}
.ucard img.fit.light{background:#fff}
.rec figcaption{font-size:16px}.rec figcaption b{font-size:17px}
.rec figcaption .win{font-weight:900;background:linear-gradient(125deg,var(--g2a),var(--g2b));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:18px}

.either .three3{display:grid;gap:20px;margin-top:32px}
@media(min-width:900px){.either .three3{grid-template-columns:repeat(3,1fr)}}
.either .ecard{padding:30px 26px}
.either .eicon{width:48px;height:48px;margin-bottom:16px}
.either .eicon svg{width:100%;height:100%}
.either .ecard h3{margin-bottom:10px}
.either .ecard ul{padding-left:20px;font-size:16px;color:var(--body);line-height:1.7}
.giftbar{margin-top:26px;background:linear-gradient(160deg,#FBF3DE,#F3E4BC);border:1px solid #C9A227;border-radius:14px;padding:18px 22px;text-align:center;font-size:19px;font-weight:900;color:var(--ink)}
.push .kvrow{margin-top:28px;align-items:stretch}
.push .kvrow .pushkv{margin:0;border-radius:14px;width:100%;height:100%;object-fit:contain;background:#000}
.tiny.halfsize{font-size:6.5px}
.push .actionbox{margin-top:20px}
.push .actionbox .why{margin:0 0 6px}
.ctarow{text-align:center;margin-top:32px}
.push .ctarow .btn,.push .ctarow{display:block}

/* Hero 呼吸位（Nam 2026-09-04：spacing too tight） */
.hero h1{margin-bottom:4px;line-height:1.22}
.hero .meta{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14)}

/* ══ Hero 層級重整 ＋ 手機數據一行一個（Nam 2026-09-04）══════════════════
   問題：禮物徽章做咗實金大藥丸，比大標仲搶眼 → 層級反轉；兩句緊迫語加大標
   加日期加清單全部平鋪，冇分主次。做法：大標放大做唯一主角，徽章同日期改
   outline 盒（有框冇實色）退做支援資訊。 */

/* 1 · 大標放大、收緊行距，做唯一主角 */
/* 手機：大標第一行「交易紅綠區買賣訊號教學！」12 字要一行入曬，唔好拆開「買賣」 */
@media(max-width:767px){.hero h1{font-size:clamp(23px,6.7vw,34px);line-height:1.2}}
.hero h1{word-break:keep-all}
@media(min-width:768px){.hero h1{font-size:52px}}
.hero h1{margin-bottom:18px;letter-spacing:-.01em}

/* 2 · 禮物徽章：實金藥丸 → outline 盒，唔再同大標爭 */
.gift{background:none;box-shadow:none;color:var(--gold-text);border:1.5px solid #B78C00;
      border-radius:10px;font-size:15px;font-weight:700;padding:10px 16px;margin:0 0 16px;letter-spacing:.01em}

/* 3 · 兩句緊迫語收細、拉埋一齊，唔再各佔一大行 */
.hero .scarcity{font-size:15px;color:#E8DCFF;font-weight:600;margin-bottom:4px;line-height:1.5}
.hero .scarcity#scarcity2{font-size:13px;color:var(--x1);font-weight:500;margin-bottom:0}

/* 4 · 日期／形式收埋做一個 outline 盒 —— 把散開嘅資訊圍返一齊 */
.hero .meta{margin-top:20px;padding:14px 16px;border:1px solid rgba(255,255,255,.22);
            border-radius:12px;background:rgba(255,255,255,.04);gap:6px 18px;font-size:15px}
.hero .meta b{font-size:17px}

/* 5 · 清單同上面分開 */
.hero ul.learn{margin-top:20px;gap:11px}

/* 6 · 手機：數據一行一個（唔好 2×2）*/
@media(max-width:767px){
  .trust .trow{grid-template-columns:1fr !important;gap:0}
  .trust .stat{display:flex;align-items:baseline;justify-content:flex-start;gap:12px;
               text-align:left;padding:11px 0;border-bottom:1px solid rgba(0,0,0,.07)}
  .trust .trow .stat:last-child{border-bottom:none}
  .trust .n{font-size:26px;white-space:nowrap;flex:none;min-width:6.2em}
  .trust .l{margin-top:0;font-size:14px}
}