/* BeBetter 漏斗 — 共用設計系統（對齊 TDEE 頁設計語言）
 * tokens 與元件複用 build_tdee.py 的 CSS 慣例：暖米紙底＋磚橘×金漸層、
 * 膠囊 CTA、mono kicker、深色報告卡、band 章節骨架。
 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

:root{
  /* ── 設計語言 v2 的字階與圓角（2026-08-07 遷移）──
     來源：../設計語言/bebetter.css。改任何一個值 → 兩邊一起改。 */
  --t-3xs:11px; --t-2xs:13px; --t-sm:16px; --t-md:20px;
  --t-lg:25px; --t-xl:31px; --t-2xl:39px; --t-glyph:56px;
  --r-hair:2px; --r-sm:8px; --r-badge:9px; --r-chip:10px; --r-input:12px;
  --r-btn:14px; --r-card:16px; --r-block:18px; --r-panel:24px; --r-pill:999px;
  --dark-hi:#2A201A; --dark-lo:#1B1410; --on-dark:#E8D9CC;
  --on-dark-muted:#A39D96; --amber-ink:#96620B;
  --edge-warm:#F0DFBB; --edge-accent:#F1C9B6; --edge-green:#CDE6D9;
  --glow:rgba(239,169,59,.16);        /* 背景暖光暈 */
  --scrim:rgba(33,20,10,.5);          /* 彈窗陰影用的深色 */

  --paper:#FBFAF8; --ink:#211C17; --ink2:#5C544B; --muted:#6F6659;
  --line:#EBE4DA; --surface:#FFFFFF; --surface2:#F6F2EC;
  --accent:#D0502A; --accent-soft:#FBEEE7;
  --gold:#E8A23C; --warm:#FFF6E5;
  /* 文字專用的深階。--accent/--gold 是填色與漸層用的品牌色，拿來當內文字色
     過不了 WCAG AA（accent on white 只有 4.32:1、gold 只有 2.17:1）。
     小字一律用下面兩個；大字（≥24px 或 ≥18.66px 粗體）用哪個都可以。 */
  --accent-ink:#BC4623; --gold-ink:#8F6423;
  --green:#2F7D5B; --amber:#B5760E; --amber-soft:#FBF0DA;
  --dark:#231A14;
  --sans:'PingFang TC','Noto Sans TC','Hiragino Sans GB','Microsoft JhengHei',sans-serif;
  --mono:'SF Mono',ui-monospace,monospace;
  --shadow:0 1px 2px rgba(33,28,23,.04),0 10px 30px rgba(33,28,23,.06);
  --shadow-lg:0 20px 50px rgba(33,28,23,.1);
  --grad:linear-gradient(135deg,var(--accent),var(--gold));
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}  /* 原本有 overflow-x:hidden，它會建立裁切容器、裁掉 position:fixed 的 .glow；body 的 overflow-x:clip 已經夠 */
body{
  font-family:var(--sans);color:var(--ink);font-size:var(--t-sm);line-height:1.9;
  background:
    radial-gradient(50% 24% at 12% 1%,var(--glow),transparent 60%),
    radial-gradient(44% 22% at 90% 10%,rgba(208,80,42,.07),transparent 58%),
    linear-gradient(180deg,#FFFDF8,#FDF5E9 40%,#FBF1E2);
  min-height:100vh;padding-bottom:64px;
}
img{max-width:100%;}
h1,h2,h3{letter-spacing:-.01em;text-wrap:balance;}

/* ---- 走廊骨架：無導覽、無外連 ---- */
.wrap{max-width:920px;margin:0 auto;padding:0 24px;}
.narrow{max-width:760px;margin:0 auto;padding:0 24px;}

.brand-mark{
  text-align:center;font-family:var(--mono);font-weight:700;font-size:var(--t-2xs);
  letter-spacing:.36em;color:var(--accent-ink);padding:34px 0 0;user-select:none;
}
.brand-mark::after{content:'';display:block;width:30px;height:3px;background:var(--grad);margin:10px auto 0;border-radius:var(--r-hair);}

/* ---- 步驟進度（承諾階梯）---- */
.steps{display:flex;justify-content:center;gap:8px;align-items:center;margin:22px 0 0;font-size:var(--t-2xs);color:var(--ink2);letter-spacing:.06em;flex-wrap:wrap;}
.steps span{display:inline-flex;align-items:center;gap:6px;}
.steps b{display:inline-flex;width:25px;height:25px;border-radius:var(--r-sm);border:1.5px solid var(--line);align-items:center;justify-content:center;font-weight:900;font-family:var(--mono);background:var(--surface);font-size:var(--t-2xs);}
.steps .on b{border-color:transparent;background:var(--accent-ink);color:#fff;
  box-shadow:inset 0 1px 0 rgba(232,162,60,.4);}
.steps .done b{border-color:var(--green);color:var(--green);}
.steps i{width:20px;height:1.5px;background:var(--line);border-radius:var(--r-hair);font-style:normal;}

/* ---- Hero ---- */
.hero{text-align:center;padding:34px 24px 10px;}
.hero .k{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.36em;color:var(--accent-ink);font-weight:700;}
.hero h1{font-size:clamp(31px,5.2vw,56px);font-weight:900;line-height:1.35;margin:16px auto 12px;max-width:24ch;}
.hero h1 em{font-style:normal;color:var(--accent-ink);}
.hero h1 .hl{background:linear-gradient(transparent 72%,rgba(232,162,60,.45) 72%);}  /* 62%→72%：中文全形字填滿 em 框，62% 會從字中間切過去 */
.hero .sub{font-size:clamp(16px,2.1vw,20px);color:var(--ink2);max-width:56ch;margin:0 auto 8px;}

/* ---- 章節 band ---- */
.band{padding:44px 0 10px;}
.band.alt{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(246,242,236,.6));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0 34px;margin-top:34px;}
.sec-k{font-family:var(--mono);font-size:var(--t-2xs);font-weight:800;color:var(--gold-ink);letter-spacing:.1em;}
.band h2{font-size:clamp(25px,3.4vw,31px);font-weight:900;margin:6px 0 20px;padding-bottom:14px;border-bottom:2px solid var(--line);position:relative;}
.band h2::after{content:"";position:absolute;left:0;bottom:-2px;width:56px;height:2px;background:linear-gradient(90deg,var(--accent),var(--gold));}

/* ---- 編號卡 ---- */
.mkgrid{display:grid;gap:12px;margin:18px 0;}
.mk{display:flex;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;box-shadow:var(--shadow);text-align:left;}
.mk .mkn{flex:none;width:34px;height:34px;border-radius:var(--r-chip);background:var(--accent-ink);color:#fff;font-weight:900;font-family:var(--mono);display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);
  box-shadow:inset 0 1px 0 rgba(232,162,60,.4);}
.mk b{display:block;font-size:var(--t-md);margin-bottom:4px;}  /* 16→20：卡片內要有一個大小錨點，否則整張卡沒有層級 */
.mk p{font-size:var(--t-sm);color:var(--ink2);line-height:1.75;}

/* ---- 痛點 checklist ---- */
.pain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px 26px;text-align:left;margin:18px 0;}
.pain li{list-style:none;padding:9px 0 9px 34px;position:relative;font-size:var(--t-sm);color:var(--ink);border-bottom:1px dashed var(--line);}
.pain li:last-child{border-bottom:none;}
.pain li::before{content:"✓";position:absolute;left:4px;color:var(--accent-ink);font-weight:900;font-family:var(--mono);}

/* ---- 主 CTA ---- */
/* 主按鈕：實心橘＋金色頂緣高光（設計語言 v2，2026-08-07）
   原本是 var(--grad)（橘→金），白字在金端只有 2.17:1 讀不到。
   金沒有離開品牌，改在頂緣高光與 hover 光環出現。 */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:900;font-size:clamp(16px,2.4vw,20px);
  letter-spacing:.05em;color:#fff;background:var(--accent-ink);border:none;
  /* 圓角用 14px 不用膠囊：母版的 .calcBtn 就是 14px，而且旁邊的輸入框是 12px——
     膠囊配圓角矩形並排會很怪（Ricky 2026-08-07 指出）。膠囊留給深色卡的 CTA。 */
  border-radius:var(--r-btn);
  padding:17px 42px;cursor:pointer;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(232,162,60,.45),0 12px 28px rgba(188,70,35,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(232,162,60,.55),0 0 0 3px rgba(232,162,60,.30),
             0 16px 34px rgba(188,70,35,.32);}
.btn:active{transform:translateY(0);}
.btn.xl{font-size:clamp(16px,2.8vw,20px);padding:19px 52px;}
.btn-note{font-size:var(--t-2xs);color:var(--muted);margin-top:12px;}

/* CTA 延遲出現 */
.locked{display:none;}
.reveal{animation:rise .7s cubic-bezier(.2,.9,.3,1) both;}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ---- 表單 ---- */
.field-row{display:flex;gap:10px;width:100%;max-width:540px;margin:0 auto;}
.field-row input{
  flex:1;font-family:var(--sans);font-size:var(--t-sm);padding:15px 18px;
  border:1.5px solid var(--line);border-radius:var(--r-input);background:var(--surface);color:var(--ink);outline:none;min-width:0;
}
.field-row input:focus{border-color:var(--accent-ink);}
@media(max-width:560px){.field-row{flex-direction:column;}.field-row .btn{width:100%;}}

/* ---- 深色卡（報告卡/上鎖卡/CTA 卡 同語言）---- */
.darkcard{
  /* ⚠️ 一定要設預設文字色：沒被個別指定顏色的元素會繼承 body 的 --ink（#211C17），
     在 #2A201A 的深底上只有 1.1:1，字等於看不見。實測 apply／vsl 兩頁就中這個。 */
  color:var(--on-dark);
  /* 漸層底刻意用字面值不用 var()：靜態掃描解不出 var() 的漸層，會把卡片裡的字
     誤判成疊在頁面白底上，一次多報 30 幾條假警報。實測過。 */
  margin:26px auto;background:linear-gradient(160deg,#2A201A,#1B1410);
  border-radius:var(--r-panel);padding:30px 30px;box-shadow:0 24px 60px rgba(33,20,10,.4);
  position:relative;overflow:hidden;text-align:left;
}
.darkcard::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:120%;background:radial-gradient(circle,rgba(208,80,42,.35),transparent 62%);pointer-events:none;}
.darkcard>*{position:relative;}
.darkcard .rk{font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.24em;color:var(--gold);font-weight:800;}
.darkcard h3{color:#fff;font-size:clamp(20px,3vw,25px);font-weight:900;margin:10px 0 8px;}
.darkcard p{color:#E8D9CC;font-size:var(--t-sm);line-height:1.8;max-width:56ch;}
.darkcard b{color:var(--gold);}
.darkcard .rcta{display:inline-flex;align-items:center;gap:8px;background:var(--accent-ink);color:#fff;font-weight:900;font-size:var(--t-sm);padding:15px 34px;border-radius:var(--r-pill);text-decoration:none;box-shadow:0 14px 34px rgba(208,80,42,.4);transition:transform .2s;margin-top:16px;}
.darkcard .rcta:hover{transform:translateY(-2px);}
.darkcard .rproof{margin-top:14px;color:#9C8B7B;font-size:var(--t-2xs);}
.darkcard .rdisc{margin-top:8px;color:#A39D96;font-size:var(--t-3xs);font-family:var(--mono);}
.darkcard .lockrow{display:flex;align-items:center;gap:10px;color:#9C8B7B;font-size:var(--t-2xs);margin-top:14px;font-family:var(--mono);}

/* ---- 播放器 ---- */
.vp{position:relative;width:100%;max-width:860px;margin:24px auto;border-radius:var(--r-block);overflow:hidden;background:#14100C;box-shadow:0 24px 60px rgba(33,20,10,.4);}
.vp video{display:block;width:100%;height:auto;}
.vp-overlay{position:absolute;inset:0;cursor:pointer;}
.vp-overlay.paused::after{content:'▶';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--t-glyph);color:#fff;background:rgba(20,16,12,.45);}
.vp-sound{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(20,16,12,.55);color:#fff;cursor:pointer;text-align:center;padding:20px;}
.vp-sound strong{font-size:clamp(20px,3.6vw,25px);font-weight:900;}
.vp-sound span{font-size:var(--t-sm);opacity:.85;}
.vp-sound .ring{width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-ink);font-size:var(--t-xl);animation:pulse 1.6s ease-out infinite;
  box-shadow:inset 0 1px 0 rgba(232,162,60,.4);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(208,80,42,.55);}100%{box-shadow:0 0 0 26px rgba(208,80,42,0);}}
.vp-sound.hide{display:none;}
.vp-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.14);pointer-events:none;}
/* 進度條用 transform:scaleX 不用 width——動 width 每一幀都會重算版面。
   外層 .vp-progress 已經有 overflow，子元素不需要自己的圓角。 */
.vp-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;
  background:var(--grad);transition:transform .4s linear;will-change:transform;}

/* ---- 嵌入容器 ---- */
/* ⚠️ Typeform／Calendly 塞進來的 iframe 預設是 300×150，不會自己撐滿容器。
   只給 min-height 沒有用（實測 iframe 只有 296×148，畫面只渲染左上角一小塊）。
   要給容器實際高度，再強制 iframe 填滿。 */
.embed-shell{width:100%;max-width:860px;margin:22px auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-block);box-shadow:var(--shadow-lg);
  overflow:hidden;height:min(78vh,720px);min-height:540px;}
/* Typeform 會在容器裡再包一層 div.tf-v1-widget（自帶 160px 高），
   所以連那一層也要撐滿，不然 iframe 的 height:100% 是對著 0 高的父層算。 */
.embed-shell > *{width:100%!important;height:100%!important;}
.embed-shell iframe{width:100%!important;height:100%!important;display:block;border:0;}

/* ---- 註記/警示框 ---- */
.note{background:var(--warm);border:1px solid #F0DFBB;border-radius:var(--r-input);padding:14px 18px;font-size:var(--t-sm);color:#6B5A45;text-align:left;margin:16px auto;max-width:640px;}

/* ---- 權威列（真實數字）---- */
.cred{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:22px auto 0;padding:16px 20px;max-width:720px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.cred div{text-align:center;}
.cred b{display:block;font-family:var(--mono);font-size:var(--t-md);font-weight:700;color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.3;}
.cred span{font-size:var(--t-2xs);color:var(--muted);letter-spacing:.05em;}

/* ---- 見證帶 ---- */
.testi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:20px 24px;text-align:left;margin:12px 0;}
.testi p{font-size:var(--t-sm);color:var(--ink);line-height:1.8;}
.testi .who{margin-top:8px;font-family:var(--mono);font-size:var(--t-2xs);color:var(--muted);}

/* ---- FAQ ---- */
.faq{border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden;text-align:left;}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:800;font-size:var(--t-sm);color:var(--ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:900;color:var(--accent-ink);font-size:var(--t-md);flex:none;transition:transform .2s;}
.faq[open] summary::after{transform:rotate(45deg);}
.faq .fa{padding:0 20px 16px;font-size:var(--t-sm);color:var(--ink2);line-height:1.8;}

/* ---- 彈窗 ---- */
.popup-mask{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(35,26,20,.55);backdrop-filter:blur(3px);padding:20px;}
.popup-mask.show{display:flex;}
.popup{background:var(--paper);border-radius:var(--r-panel);padding:clamp(28px,5vw,44px);max-width:500px;width:100%;text-align:center;position:relative;animation:rise .45s cubic-bezier(.2,.9,.3,1) both;box-shadow:0 30px 80px -20px var(--scrim);}
.popup .x{position:absolute;top:12px;right:16px;border:none;background:none;font-size:var(--t-md);color:var(--muted);cursor:pointer;}
.popup h2{font-size:clamp(20px,4vw,25px);font-weight:900;line-height:1.45;margin-bottom:8px;}
.popup p{font-size:var(--t-sm);color:var(--ink2);margin-bottom:18px;}

/* ---- 雜項 ---- */
.center{text-align:center;}
.dev-tools{margin:40px auto 0;font-size:var(--t-2xs);color:var(--muted);text-align:center;max-width:720px;}  /* 原本疊 opacity:.75 → 實際對比 1.8:1 */
.dev-tools button{font-size:var(--t-2xs);padding:6px 12px;border-radius:var(--r-sm);border:1px dashed var(--muted);background:none;color:var(--muted);cursor:pointer;}
.foot-quiet{margin-top:48px;text-align:center;font-size:var(--t-2xs);color:var(--muted);}  /* 原本疊 opacity:.7 → 實際對比 1.8:1 */

/* 進場動畫（漸進增強） */
@supports (animation-timeline:view()){
  .band h2,.mk,.pain,.darkcard,.testi,.faq{animation:rise both;animation-timeline:view();animation-range:entry 0% entry 38%;}
}

/* ---- 迷思見證牆（Nüli 式：錯誤信念當標題＋真實案例反駁）---- */
.myth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:20px 0;}
.myth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-block);box-shadow:var(--shadow);overflow:hidden;text-align:left;display:flex;flex-direction:column;}
.myth .q{padding:16px 20px 12px;font-weight:900;font-size:var(--t-sm);}
.myth .q i{font-style:normal;color:var(--accent-ink);font-family:var(--mono);margin-right:6px;}
.myth .ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);}
.myth .ba figure{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--surface2);}
.myth .ba img{width:100%;height:100%;object-fit:cover;display:block;}
.myth .ba figcaption{position:absolute;left:0;bottom:0;right:0;font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.18em;color:#fff;background:linear-gradient(transparent,rgba(33,20,10,.72));padding:16px 10px 6px;}
.myth .say{padding:14px 20px 6px;font-size:var(--t-sm);color:var(--ink2);line-height:1.8;}
.myth .say b{color:var(--ink);}
.myth .stats{display:flex;flex-wrap:wrap;gap:6px;padding:8px 20px 18px;margin-top:auto;}
.myth .stats span{font-family:var(--mono);font-size:var(--t-2xs);font-weight:700;color:var(--green);background:rgba(47,125,91,.09);border:1px solid rgba(47,125,91,.22);border-radius:var(--r-pill);padding:3px 12px;}

/* ---- 大數據帶（3,000 位女性）---- */
.bigstat{text-align:center;margin:28px auto 0;max-width:720px;}
.bigstat .n{font-family:var(--mono);font-weight:700;font-size:clamp(39px,6vw,56px);color:var(--accent-ink);line-height:1.2;font-variant-numeric:tabular-nums;}
.bigstat p{font-size:clamp(13px,2.2vw,16px);color:var(--ink);font-weight:700;}
.bigstat .disc{margin-top:8px;font-size:var(--t-3xs);font-family:var(--mono);color:var(--muted);font-weight:400;}

/* ---- 每人專屬期限倒數 ---- */
.deadline{display:inline-flex;align-items:center;gap:10px;background:var(--amber-soft);border:1px solid #F0DFBB;border-radius:var(--r-pill);padding:8px 20px;font-size:var(--t-2xs);color:#6B5A45;margin-top:14px;}
.deadline b{font-family:var(--mono);font-size:var(--t-sm);color:var(--accent-ink);font-variant-numeric:tabular-nums;letter-spacing:.06em;}
.deadline.over{background:var(--surface2);border-color:var(--line);}

/* ---- 產品 mockup 圖 ---- */
.mockrow{display:flex;gap:22px;align-items:center;text-align:left;}
.mockrow img{width:clamp(120px,22vw,190px);border-radius:var(--r-card);box-shadow:var(--shadow-lg);flex:none;}
@media(max-width:560px){.mockrow{flex-direction:column;text-align:center;}}
.pricechip{display:inline-block;font-family:var(--mono);font-size:var(--t-2xs);font-weight:700;color:var(--accent-ink);background:var(--accent-soft);border:1px solid rgba(208,80,42,.25);border-radius:var(--r-pill);padding:3px 14px;margin-bottom:8px;}
.pricechip s{color:var(--muted);margin-right:6px;}

/* ---- Ricky 圖+文 見證 ---- */
.founder{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-block);box-shadow:var(--shadow);padding:24px 26px;text-align:left;margin:18px 0;}
.founder .ph{aspect-ratio:3/4;border-radius:var(--r-btn);background:linear-gradient(160deg,var(--surface2),var(--line));display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--t-2xs);text-align:center;padding:12px;overflow:hidden;}
.founder .ph img{width:100%;height:100%;object-fit:cover;}
@media(max-width:600px){.founder{grid-template-columns:1fr;}.founder .ph{max-width:220px;margin:0 auto;}}

/* ---- 見證輪播牆（女力式 marquee：連續滑動、hover 暫停）---- */
.wallwrap{overflow:hidden;position:relative;margin:18px 0;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);}
.walltrack{display:flex;gap:14px;width:max-content;animation:wallL 55s linear infinite;}
.walltrack.rev{animation-name:wallR;animation-duration:70s;}
.wallwrap:hover .walltrack{animation-play-state:paused;}
@keyframes wallL{to{transform:translateX(-50%);}}
@keyframes wallR{from{transform:translateX(-50%);}to{transform:none;}}
.wallcard{width:clamp(230px,28vw,310px);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--surface);flex:none;}
.wallcard img{display:block;width:100%;height:auto;}
.wall-note{text-align:center;font-size:var(--t-2xs);color:var(--muted);margin-top:6px;}

/* ---- 權威數據重設計：留白大卡＋數字跑動 ---- */
.statgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:22px 0;}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-block);padding:24px 24px 20px;box-shadow:var(--shadow);text-align:left;}
.stat b{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(31px,4.4vw,39px);color:var(--accent-ink);font-variant-numeric:tabular-nums;line-height:1.25;}
.stat b i{font-style:normal;font-size:max(var(--t-3xs),.55em);color:var(--gold-ink);margin-left:2px;}  /* .55em 在小一點的父層會掉到 8.8px */
.stat .lb{font-size:var(--t-sm);font-weight:700;color:var(--ink);margin-top:2px;}
.stat .ds{font-size:var(--t-2xs);color:var(--muted);line-height:1.7;margin-top:2px;}
.stat.wide{grid-column:span 2;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;}
@media(max-width:560px){.statgrid{grid-template-columns:1fr;}.stat.wide{grid-column:span 1;}}

/* ---- 進場：IntersectionObserver 版（一邊滑一邊跑出來）---- */
.io{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.9,.3,1),transform .7s cubic-bezier(.2,.9,.3,1);}
.io.in{opacity:1;transform:none;}

/* ============================================================
   動態系統 v5：進場 / 捲動揭露 / 報名進度 / 離站挽留
   規則：載入＝一次編排好的開場；捲動＝元素滑到視窗才浮現；
   全部尊重 prefers-reduced-motion。
   ============================================================ */

/* ---- 開場編排（首屏，載入即跑，含 stagger）---- */
@keyframes heroRise{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}
@keyframes heroBlur{from{opacity:0;filter:blur(10px);transform:scale(.97);}to{opacity:1;filter:none;transform:none;}}
@keyframes glowIn{from{opacity:0;transform:scale(.6);}to{opacity:.55;transform:scale(1);}}
@keyframes lineGrow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes markPaint{from{background-size:0 100%;}to{background-size:100% 100%;}}

.stage>*{opacity:0;animation:heroRise .85s cubic-bezier(.16,1,.3,1) forwards;}
.stage>*:nth-child(1){animation-delay:.05s;}
.stage>*:nth-child(2){animation-delay:.15s;}
.stage>*:nth-child(3){animation-delay:.26s;}
.stage>*:nth-child(4){animation-delay:.38s;}
.stage>*:nth-child(5){animation-delay:.50s;}
.stage>*:nth-child(6){animation-delay:.60s;}
.hero h1{animation:heroBlur 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:.18s;}
/* 標題重點：載入後由左往右「刷」出螢光筆效果 */
.hero h1 em{background-image:linear-gradient(transparent 72%,rgba(232,162,60,.5) 72%);background-repeat:no-repeat;background-size:0 100%;animation:markPaint .9s cubic-bezier(.4,0,.2,1) forwards;animation-delay:1s;}
/* 首屏背景光暈 */
.glow{position:fixed;top:-22vh;left:0;right:0;margin:0 auto;width:min(880px,100vw);height:60vh;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(232,162,60,.30),rgba(208,80,42,.10) 55%,transparent 78%);
  opacity:0;animation:glowIn 1.6s ease-out forwards;animation-delay:.1s;filter:blur(6px);}

/* ---- 捲動揭露：四種方向，統一由 JS 加 .in ---- */
[data-reveal]{opacity:0;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);will-change:opacity,transform;}
[data-reveal="up"]{transform:translateY(34px);}
[data-reveal="left"]{transform:translateX(-32px);}
[data-reveal="right"]{transform:translateX(32px);}
[data-reveal="zoom"]{transform:scale(.94);}
[data-reveal].in{opacity:1;transform:none;}
/* 章節標題底線：進場時長出來 */
.band h2::after{transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.16,1,.3,1) .18s;}
.band h2.in::after{transform:scaleX(1);}
/* 卡片群：子元素依序浮現 */
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(1){transition-delay:.05s;}
.stagger.in>*:nth-child(2){transition-delay:.16s;}
.stagger.in>*:nth-child(3){transition-delay:.27s;}
.stagger.in>*:nth-child(4){transition-delay:.38s;}
.stagger.in>*:nth-child(5){transition-delay:.49s;}

/* ---- 報名進度條（只差最後一步）---- */
.enroll{max-width:540px;margin:20px auto 0;}
.pbar{height:7px;border-radius:var(--r-pill);background:var(--surface2);border:1px solid var(--line);overflow:hidden;}
/* 同上。.pbar 本身有 overflow:hidden ＋ 膠囊圓角，所以子元素拿掉自己的圓角，
   scaleX 才不會把兩端的圓頭壓扁。 */
.pbar i{display:block;height:100%;width:100%;transform:scaleX(.34);transform-origin:left center;
  background:var(--grad);transition:transform .55s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 14px rgba(208,80,42,.45);will-change:transform;}
.pmeta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:var(--t-2xs);color:var(--muted);}
.pmeta b{font-family:var(--mono);color:var(--accent-ink);font-weight:700;font-variant-numeric:tabular-nums;}
.pmeta .msg{font-weight:700;color:var(--ink2);}
.pmeta .msg.hot{color:var(--accent-ink);}
@keyframes nudge{0%,100%{transform:none;}30%{transform:translateY(-3px);}}
.nudge{animation:nudge .5s ease;}

/* ---- 離站挽留彈窗（延用 .popup 語言，加圖與雙選項）---- */
.popup .pimg{width:104px;border-radius:var(--r-input);box-shadow:var(--shadow);margin:0 auto 14px;display:block;}
.popup .later{display:block;margin-top:14px;font-size:var(--t-2xs);color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;width:100%;}
.popup .bullets{list-style:none;text-align:left;margin:0 auto 16px;max-width:22em;}
.popup .bullets li{position:relative;padding:5px 0 5px 26px;font-size:var(--t-sm);color:var(--ink2);}
.popup .bullets li::before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:900;font-family:var(--mono);}

/* ---- RWD 全站規則 ---- */
@media(max-width:900px){
  .wallcard{width:clamp(200px,42vw,250px);}
  .founder{grid-template-columns:170px 1fr;gap:18px;}
}
@media(max-width:640px){
  body{font-size:var(--t-sm);}
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(28px);}
  .wrap,.narrow{padding:0 18px;}
  .hero{padding:26px 18px 6px;}
  .steps{font-size:var(--t-3xs);gap:5px;}
  .steps i{width:12px;}
  .steps b{width:22px;height:22px;font-size:var(--t-3xs);}
  .darkcard{padding:24px 20px;border-radius:var(--r-block);}
  .band.alt{margin-top:26px;}
  .wallcard{width:min(74vw,270px);}
  .walltrack{animation-duration:42s;}
  .walltrack.rev{animation-duration:52s;}
  .stat{padding:20px 20px 18px;}
  .mockrow img{width:min(46vw,150px);}
}
@media(max-width:420px){
  .steps span:not(.on){display:none;}   /* 手機只留當前步驟，不擠 */
  .steps i{display:none;}
}

/* ---- 無障礙：使用者要求減少動態就全部關掉 ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  [data-reveal],.stagger>*{opacity:1!important;transform:none!important;}
  .stage>*{opacity:1!important;}
  .walltrack{animation:none!important;}
  .wallwrap{overflow-x:auto;}
}

/* ============================================================
   v6：雙欄 hero / 影片預覽 / 人像重設計 / 社群證明 / 柔化捲動
   ============================================================ */

/* ---- 捲動揭露柔化：位移更小、時間更長、緩動更軟（漸層浮出感）---- */
[data-reveal]{transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s ease;filter:blur(2px);}
[data-reveal="up"]{transform:translateY(20px);}
[data-reveal="left"]{transform:translateX(-18px);}
[data-reveal="right"]{transform:translateX(18px);}
[data-reveal="zoom"]{transform:scale(.985);}
[data-reveal].in{filter:none;}
.stagger>*{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),filter .55s ease;transform:translateY(16px);filter:blur(2px);}
.stagger.in>*{filter:none;}
.stagger.in>*:nth-child(1){transition-delay:.04s;}
.stagger.in>*:nth-child(2){transition-delay:.12s;}
.stagger.in>*:nth-child(3){transition-delay:.2s;}
.stagger.in>*:nth-child(4){transition-delay:.28s;}
.stagger.in>*:nth-child(5){transition-delay:.36s;}

/* ---- 雙欄 Hero ---- */
.herowrap{max-width:1180px;margin:0 auto;padding:26px 32px 8px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,56px);align-items:center;}
.hcol-l{text-align:left;}
.hcol-l .k{font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.32em;color:var(--accent-ink);font-weight:700;}
.hcol-l h1{font-size:clamp(31px,3.5vw,56px);font-weight:900;line-height:1.3;margin:14px 0 14px;letter-spacing:-.01em;}
.hcol-l h1 em{font-style:normal;color:var(--accent-ink);}
.hcol-l .sub{font-size:clamp(16px,1.25vw,20px);color:var(--ink2);max-width:34em;margin-bottom:20px;}
.hcol-l .enroll{margin:0;max-width:none;}
.hcol-l .field-row{max-width:none;margin:0;}
.hcol-l .btn-note{text-align:left;}
.hbullets{list-style:none;margin:16px 0 4px;}
.hbullets li{position:relative;padding:5px 0 5px 27px;font-size:var(--t-sm);color:var(--ink2);}
.hbullets li::before{content:"✓";position:absolute;left:2px;top:5px;color:var(--green);font-weight:900;font-family:var(--mono);}
@media(max-width:940px){
  .herowrap{grid-template-columns:1fr;padding:22px 20px 4px;gap:26px;}
  .hcol-l{text-align:center;}
  .hcol-l .sub{margin-left:auto;margin-right:auto;}
  .hcol-l .btn-note{text-align:center;}
  .hbullets{display:inline-block;text-align:left;}
  .hcol-r{order:-1;}                 /* 手機：影片預覽先出現 */
}

/* ---- 影片預覽卡（假播放器，點擊＝開報名彈窗）---- */
.vprev{position:relative;border-radius:var(--r-block);overflow:hidden;cursor:pointer;background:#14100C;
  box-shadow:0 26px 60px rgba(33,20,10,.32);border:1px solid rgba(255,255,255,.5);
  transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease;}
.vprev:hover{transform:translateY(-4px);box-shadow:0 34px 70px rgba(33,20,10,.4);}
.vprev>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.82;transition:transform .6s ease,opacity .35s;}
.vprev:hover>img{transform:scale(1.04);opacity:.92;}
.vprev::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.15),rgba(20,16,12,.72));pointer-events:none;}
.vprev .play{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  background:var(--grad);display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 12px 34px rgba(208,80,42,.5);}
.vprev .play::before{content:"";border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px;}
.vprev .ring2{position:absolute;left:50%;top:46%;width:78px;height:78px;border-radius:50%;transform:translate(-50%,-50%);
  z-index:1;animation:ripple 2.2s ease-out infinite;}
@keyframes ripple{0%{box-shadow:0 0 0 0 rgba(232,162,60,.5);}100%{box-shadow:0 0 0 34px rgba(232,162,60,0);}}
.vprev .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 20px;color:#fff;text-align:left;}
.vprev .cap b{display:block;font-size:clamp(13px,1.2vw,16px);font-weight:900;line-height:1.5;}
.vprev .cap span{font-size:var(--t-2xs);color:#D8C8B8;}
.vprev .badge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:var(--t-3xs);font-weight:700;
  letter-spacing:.12em;color:#fff;background:rgba(20,16,12,.6);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);border-radius:var(--r-pill);padding:5px 13px;}
.vprev .dur{position:absolute;bottom:14px;right:14px;z-index:3;font-family:var(--mono);font-size:var(--t-2xs);color:#fff;
  background:rgba(20,16,12,.72);border-radius:var(--r-sm);padding:3px 9px;}
.vprev-note{margin-top:10px;font-size:var(--t-2xs);color:var(--muted);text-align:center;}

/* ---- 人像區重新設計（編輯感：大圖＋疊卡＋憑證清單）---- */
.bio{display:grid;grid-template-columns:minmax(230px,.85fr) 1.15fr;gap:clamp(24px,3.5vw,48px);align-items:center;margin:26px 0 10px;}
.bio-photo{position:relative;}
.bio-photo::before{content:"";position:absolute;inset:14px -14px -14px 14px;border-radius:var(--r-panel);
  background:linear-gradient(150deg,rgba(232,162,60,.35),rgba(208,80,42,.22));z-index:0;}
.bio-photo figure{position:relative;z-index:1;margin:0;border-radius:var(--r-block);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface2);}
.bio-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;}
.bio-photo .tag{position:absolute;z-index:2;left:-10px;bottom:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-input);padding:9px 14px;box-shadow:var(--shadow);font-size:var(--t-2xs);line-height:1.45;}
.bio-photo .tag b{display:block;font-size:var(--t-sm);font-weight:900;}
.bio-photo .tag span{color:var(--muted);font-family:var(--mono);font-size:var(--t-3xs);letter-spacing:.08em;}
.bio-txt h3{font-size:clamp(20px,2.4vw,25px);font-weight:900;line-height:1.45;margin-bottom:12px;}
.bio-txt h3 em{font-style:normal;color:var(--accent-ink);}
.bio-txt p{font-size:var(--t-sm);color:var(--ink2);line-height:1.95;}
.bio-cred{list-style:none;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;}
.bio-cred li{position:relative;padding-left:24px;font-size:var(--t-sm);color:var(--ink);}
.bio-cred li::before{content:"◆";position:absolute;left:2px;color:var(--gold-ink);font-size:var(--t-3xs);top:3px;}
@media(max-width:720px){
  .bio{grid-template-columns:1fr;gap:22px;}
  .bio-photo{max-width:290px;margin:0 auto;}
  .bio-photo::before{inset:12px -10px -12px 12px;}
  .bio-cred{grid-template-columns:1fr;}
}

/* ---- 社群證明浮動通知 ---- */
#bbproof{position:fixed;left:18px;bottom:18px;z-index:60;max-width:320px;
  display:flex;gap:11px;align-items:flex-start;padding:13px 34px 13px 15px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-btn);
  box-shadow:0 14px 38px rgba(33,28,23,.2);opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);pointer-events:none;}
#bbproof.show{opacity:1;transform:none;pointer-events:auto;}
#bbproof .bpi{font-size:var(--t-md);flex:none;line-height:1.2;}
#bbproof .bpt{font-size:var(--t-2xs);color:var(--ink2);line-height:1.5;}
#bbproof .bpt b{color:var(--ink);font-weight:900;}
#bbproof .bpt .num{font-family:var(--mono);color:var(--accent-ink);font-variant-numeric:tabular-nums;}
#bbproof .bpt small{display:block;color:var(--muted);font-size:var(--t-3xs);margin-top:2px;font-family:var(--mono);}
#bbproof .bpx{position:absolute;top:7px;right:8px;background:none;border:none;color:#B3A899;font-size:var(--t-sm);cursor:pointer;line-height:1;padding:2px 5px;}
@media(max-width:560px){#bbproof{left:10px;right:10px;bottom:10px;max-width:none;}}

/* 社群證明：整塊可點（連到對應主題的頁面） */
#bbproof .bpl{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:inherit;flex:1;}
#bbproof .bpl:hover .bpt b{text-decoration:underline;}

/* 只給螢幕閱讀器的標題：補 h1→h3 的階層斷層，視覺上不顯示 */
.sr-h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}