/* ============================================================
   無界 X AI · 新手教學
   Design System  |  Brand Purple #5F1985 (H279)  +  Gold
   ============================================================ */
:root{
  /* ---- Brand purple scale（以 #5F1985 為核心，色相 279°，不偏藍） ---- */
  --p-950:#1E0730;
  --p-900:#2A0A42;
  --p-850:#330E4E;
  --p-800:#4A1369;
  --p-700:#5F1985;   /* Brand core */
  --p-600:#7524A3;
  --p-500:#8B34BE;
  --p-400:#A857D8;
  --p-300:#C489E9;
  --p-200:#DFB9F4;
  --p-100:#EFDDF9;
  --p-70 :#F5EAFB;
  --p-50 :#FAF4FD;
  --p-25 :#FCFAFE;

  /* ---- Gold accent ---- */
  --g-700:#8A5A00;
  --g-600:#C98A08;
  --g-500:#F2A81E;
  --g-400:#FFC24B;
  --g-300:#FFD97A;
  --g-200:#FFE9B4;
  --g-50 :#FFF8EA;

  /* ---- Ink（帶紫調中性色） ---- */
  --ink:#1E1030;
  --ink-2:#4A3B5E;
  --ink-3:#736586;
  --white:#FFFFFF;

  /* ---- Lines ---- */
  --line:rgba(95,25,133,.10);
  --line-2:rgba(95,25,133,.16);
  --line-dark:rgba(255,255,255,.14);

  /* ---- Gradients ---- */
  --grad-purple:linear-gradient(135deg,#7524A3 0%,#5F1985 62%,#4A1369 100%);
  --grad-purple-soft:linear-gradient(150deg,#8B34BE 0%,#5F1985 100%);
  --grad-gold:linear-gradient(135deg,#FFD97A 0%,#F2A81E 100%);
  --grad-brand-text:linear-gradient(96deg,#7524A3 0%,#5F1985 34%,#A857D8 62%,#F2A81E 100%);

  /* ---- Elevation（紫調陰影） ---- */
  --sh-1:0 1px 2px rgba(30,16,48,.04), 0 3px 10px rgba(95,25,133,.05);
  --sh-2:0 2px 4px rgba(30,16,48,.04), 0 12px 28px rgba(95,25,133,.09);
  --sh-3:0 4px 10px rgba(30,16,48,.05), 0 26px 56px rgba(95,25,133,.14);
  --sh-brand:0 10px 24px rgba(95,25,133,.28);
  --sh-dark:0 20px 46px rgba(30,7,48,.34);

  /* ---- Radius ---- */
  --r-xs:12px;
  --r-sm:16px;
  --r-md:20px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* ---- Layout ---- */
  --wrap:1120px;
  --pad:20px;
  --header-h:58px;
  --sec-y:64px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.75,.28,1);
  --t-fast:.18s var(--ease);
  --t-mid:.28s var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
/* 錨點落點＝固定 Header 的實際底緣。
   --header-real-h 由 script.js 用 getBoundingClientRect().height 實測後寫入，
   已包含 border-bottom 與 env(safe-area-inset-top)，斷點與旋轉都會重新量。
   後備值（JS 未執行時）同樣把 1px 邊框與 safe-area 算進去，不使用固定 magic number。
   註：--header-h 只是 .header-inner 的高度，不等於 Header 的實際高度。 */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-real-h,calc(var(--header-h) + 1px + env(safe-area-inset-top)));
}
body{
  margin:0;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15.5px;
  line-height:1.8;
  color:var(--ink);
  background:#FDFBFE;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{display:block}
b,strong{font-weight:700}
i{font-style:normal}

:focus-visible{outline:2px solid var(--p-500);outline-offset:3px;border-radius:6px}

/* 泰文使用 Noto Sans Thai，避免落到系統預設字型 */
html[lang="th"] body{
  font-family:"Noto Sans Thai","Leelawadee UI","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.grad-text{
  background:var(--grad-brand-text);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}

/* ---- 背景氛圍光暈 ---- */
.bg-deco{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-blob{position:absolute;display:block;border-radius:50%;filter:blur(60px)}
.bg-blob-1{
  width:min(620px,120vw);height:min(620px,120vw);
  top:-22%;right:-24%;
  background:radial-gradient(circle at 40% 40%,rgba(168,87,216,.20),rgba(168,87,216,0) 68%);
}
.bg-blob-2{
  width:min(520px,110vw);height:min(520px,110vw);
  top:26%;left:-30%;
  background:radial-gradient(circle at 55% 45%,rgba(242,168,30,.11),rgba(242,168,30,0) 68%);
}
main,.site-header,.site-footer{position:relative;z-index:1}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:80;
  /* 固定不透明白色：完全不讓背後區塊參與 Header 的顏色計算。
     不使用 rgba 半透明、opacity、backdrop-filter 或 blend mode，
     因此捲到白色區、淡紫區、深紫區時 Header 本體都不會產生色偏。 */
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top);
  transition:background var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 6px 22px rgba(95,25,133,.07);
}
/* 內距用 --pad，與 .wrap 相同：Logo 左緣、語言鍵右緣都會落在
   與下方內文同一條垂直基準線上，各斷點自動跟著 --pad 變化。
   （返回鍵已移除，Header 只有 Logo 與語言切換兩個元素。） */
.header-inner{
  height:var(--header-h);
  max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--pad);
  display:flex;align-items:center;gap:6px;
}

/* 手機／平板：品牌群組（Logo + 新手教學）靠左收，縮短與返回鍵之間的空白；
   桌機在 960px 斷點內另有 justify-content:flex-start 覆寫，不受影響 */
.header-brand{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:9px;padding-left:0}
/* Logo 連結：回首頁，保持圖片原本排版 */
.header-home{display:flex;align-items:center;flex:none;border-radius:6px}
.header-home:focus-visible{outline:2px solid var(--p-600);outline-offset:3px}
/* 正式品牌 Logo：透明背景、等比縮放不變形 */
.header-logo{
  height:30px;width:auto;flex:none;
  display:block;
  object-fit:contain;
}
/* 頁面 chip（新手教學／Getting Started）已移除：
   頁面內文上方本來就有標題，Header 再放一次是重複資訊，手機版也過擠。
   Header 只保留 返回鍵 / Logo / 語言切換 三個元素。 */

/* ---- 語言切換 ---- */
.lang-wrap{position:relative;flex:none}
.lang-btn{
  height:38px;display:flex;align-items:center;gap:5px;
  padding:0 9px 0 10px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line-2);
  color:var(--p-700);box-shadow:var(--sh-1);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.lang-btn svg{width:17px;height:17px}
.lang-caret{width:14px;height:14px;opacity:.6;transition:transform var(--t-fast)}
.lang-label{font-size:13px;font-weight:700;letter-spacing:.01em}
.lang-btn:hover{border-color:var(--p-300);background:var(--p-50)}
.lang-btn[aria-expanded="true"]{border-color:var(--p-400);background:var(--p-50)}
.lang-btn[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}

/* z-index 90：.lang-wrap 與 .nav-wrap 都是 position:relative + z-index:auto，
   兩者都「不」建立 stacking context，所以語言選單與漢堡全頁選單其實是在
   .site-header（position:sticky + z-index:80）這同一個 stacking context 裡直接比大小。
   原本 .lang-menu 沒寫 z-index（auto ≈ 0）而 .nav-menu 是 70，才會被蓋住。
   這裡給 90 讓語言選單永遠疊在漢堡選單之上。 */
.lang-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:90;
  min-width:206px;padding:8px;
  /* 同樣改為不透明白色，與 Header 一致 */
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  animation:menuIn .18s var(--ease);
}
.lang-menu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}

.lang-item{
  display:block;width:100%;text-align:left;
  padding:9px 12px;border-radius:var(--r-xs);
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast);
}
.lang-item:hover{background:var(--p-50);color:var(--p-700)}
.lang-item.is-active{background:var(--p-70);color:var(--p-700);font-weight:700}

/* ---- 手機版導覽（漢堡） ----
   刻意沿用語言選單的同一套視覺語言（白底、同圓角、同陰影、同進場動畫），
   只放三個站內錨點，維持輕量導覽的分量，不做全螢幕覆蓋。 */
.nav-wrap{position:relative;flex:none}
.nav-btn{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line-2);
  color:var(--p-700);box-shadow:var(--sh-1);
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
/* 邊框固定 var(--line-2)，與語言切換鍵的靜止狀態完全一致（同色、同透明度、同 1px）。
   不設 :hover / [aria-expanded] 的邊框變化 —— 這顆鍵只出現在手機，
   而行動瀏覽器點擊後 :hover 會殘留，會讓 X 看起來比語言鍵紫一截。
   按壓回饋只改背景，不動邊框。 */
.nav-btn:active{background:var(--p-50)}
/* 三條線；展開時上下兩條交叉成 ×，中間淡出 */
.nav-ico{position:relative;display:block;width:18px;height:12px}
.nav-ico i{
  position:absolute;left:0;width:100%;height:2px;
  border-radius:2px;background:currentColor;
  transition:transform var(--t-fast),opacity var(--t-fast);
}
.nav-ico i:nth-child(1){top:0}
.nav-ico i:nth-child(2){top:5px}
.nav-ico i:nth-child(3){top:10px}
.nav-btn[aria-expanded="true"] .nav-ico i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-btn[aria-expanded="true"] .nav-ico i:nth-child(2){opacity:0}
.nav-btn[aria-expanded="true"] .nav-ico i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* 展開後由 Header 下方鋪滿整個 viewport（結構參照官網手機選單），
   但配色改為白底 / 深色文字，與本站白色 Header 一致，不使用深紫整頁背景。
   position:fixed 從 header 底緣起算，因此 Header 本身完全不動，不會跳動。 */
.nav-menu{
  position:fixed;
  left:0;right:0;
  top:calc(var(--header-h) + env(safe-area-inset-top));
  bottom:0;
  z-index:70;                       /* 低於 .site-header 的 80，Header 仍在最上層 */
  display:flex;flex-direction:column;
  /* 底部留白比照官網手機選單的膠囊位置：
     參考圖中「LINE 群組 × AI 即時互翻」的下緣距可視區底部約 11.8% 的視窗高度，
     因此用 vh 相對值而非固定 px；上下用 clamp 夾住，橫向與極高螢幕都不失控。 */
  padding:0 var(--pad) calc(clamp(56px,11.5vh,130px) + env(safe-area-inset-bottom));
  background:#FFFFFF;
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:navIn .2s var(--ease);
}
.nav-menu[hidden]{display:none}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 三個項目置於畫面中段；底部標籤靠下（兩個 auto 邊距平分剩餘空間） */
.nav-list{margin-top:auto;width:100%}
/* 字體規格對齊官網 .mobile-menu .mm-links a：
     font-family: var(--ub-font-display) = "Noto Serif TC","Songti TC",serif
     font-size: 24px / font-weight: 700
     官網未指定 line-height 與 letter-spacing → 皆為 normal，這裡明確寫出以覆蓋
     本站 body 的 line-height:1.8，讓 computed style 與官網等效。
   泰文字元不在 Noto Serif TC 內，補一層已載入的 Noto Sans Thai，
   避免落到不可預期的系統襯線字（中文／拉丁字仍由 Noto Serif TC 先解析，與官網相同）。 */
.nav-item{
  display:flex;align-items:center;gap:16px;
  padding:22px 2px;
  font-family:"Noto Serif TC","Songti TC","Noto Sans Thai",serif;
  font-size:24px;font-weight:700;
  line-height:normal;letter-spacing:normal;
  color:var(--ink);
  transition:color var(--t-fast);
}
/* 分隔線只出現在項目之間，最後一項下方不畫線 */
.nav-item + .nav-item{border-top:1px solid var(--line)}
.nav-item span{flex:1;min-width:0}     /* 文字換行，不把箭頭擠出去 */
.nav-item svg{
  width:20px;height:20px;flex:none;
  color:var(--p-400);
  transition:transform var(--t-fast),color var(--t-fast);
}
.nav-item:hover{color:var(--p-700)}
.nav-item:hover svg{transform:translateX(3px);color:var(--p-600)}

/* 底部品牌膠囊：品牌名稱 × 頁面用途 */
.nav-tag{
  align-self:flex-start;
  margin-top:auto;
  max-width:100%;
  padding:11px 20px;
  border-radius:var(--r-pill);
  border:1px solid var(--line-2);
  background:var(--p-50);
  color:var(--p-700);
  font-size:14px;font-weight:700;letter-spacing:.01em;
  line-height:1.5;
}

/* 選單展開時鎖住背景捲動；只在手機生效，行動裝置的捲軸不佔版面寬度，
   因此不會造成水平位移 */
body.nav-open{overflow:hidden}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 26px;
  border-radius:var(--r-pill);
  font-size:15.5px;font-weight:700;letter-spacing:.01em;
  transition:transform var(--t-fast),box-shadow var(--t-mid),background var(--t-mid),border-color var(--t-mid);
  will-change:transform;
}
.btn svg{width:18px;height:18px}
.btn-primary{
  position:relative;overflow:hidden;
  color:var(--white);
  background:var(--grad-purple);
  box-shadow:var(--sh-brand),inset 0 1px 0 rgba(255,255,255,.20);
}
.btn-primary::after{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,217,122,.85),transparent);
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:var(--grad-purple-soft);
  box-shadow:0 16px 32px rgba(95,25,133,.36),inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 6px 14px rgba(95,25,133,.30)}
.btn-ghost{
  color:var(--p-700);
  background:rgba(255,255,255,.86);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-1);
}
.btn-ghost:hover{border-color:var(--p-300);background:var(--white);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn-ghost:active{transform:translateY(0)}

/* ============================================================
   SECTION HEAD（全站共用）
   ============================================================ */
.section{padding:var(--sec-y) 0}
.sec-head{text-align:center;max-width:600px;margin:0 auto 36px}
.sec-no{
  display:inline-flex;align-items:center;
  height:26px;padding:0 14px;
  font-size:12px;font-weight:900;letter-spacing:.18em;
  color:var(--g-700);
  background:linear-gradient(180deg,var(--g-50),#FFEFCE);
  border:1px solid rgba(242,168,30,.30);
  border-radius:var(--r-pill);
  margin-bottom:14px;
}
.sec-title{
  font-size:25px;font-weight:900;line-height:1.4;
  letter-spacing:.005em;color:var(--ink);
}
.sec-desc{margin-top:10px;font-size:14.5px;font-weight:400;color:var(--ink-3)}

.sec-head-dark .sec-title{color:var(--white)}
.sec-head-dark .sec-desc{color:rgba(255,255,255,.66)}
.sec-head-dark .sec-no{
  color:var(--g-300);
  background:rgba(255,217,122,.10);
  border-color:rgba(255,217,122,.28);
}

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{padding:26px 0 52px;position:relative}
.hero-inner{display:flex;flex-direction:column;gap:36px}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  height:30px;padding:0 15px;
  font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--p-700);
  background:rgba(255,255,255,.9);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-1);
}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--grad-gold);
  box-shadow:0 0 0 3px rgba(242,168,30,.18);
}

.hero-title{
  margin-top:22px;
  font-size:clamp(37px,9.6vw,46px);
  font-weight:900;line-height:1.24;letter-spacing:-.01em;
  color:var(--ink);
}
.hero-brand{position:relative;display:inline-block;white-space:nowrap}
.hero-brand .grad-text{position:relative;z-index:1}
.hero-underline{
  position:absolute;left:2%;right:2%;bottom:.14em;height:.28em;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(255,217,122,0),rgba(255,201,75,.60),rgba(255,217,122,0));
  z-index:0;
}

.hero-sub{
  margin-top:40px;
  font-size:15.5px;font-weight:400;line-height:1.9;color:var(--ink-2);
}
.hero-sub b{color:var(--p-700);font-weight:700}


/* 兩顆 CTA：寬度足夠時並排，過窄才改為上下堆疊（見 max-width:439px） */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---- Hero 視覺：LINE 群組示意 ---- */
.hero-visual{
  /* --vis-pad-b 同時是下內距，也是 float-tag-b 推算「手機下緣」的依據：
     手機是這一區唯一的在流內元素，所以 手機下緣 = 區塊下緣 - --vis-pad-b。
     兩個斷點的下內距不同，用變數綁在一起就不會各改各的而失準。 */
  --vis-pad-b:30px;
  --tag-h:38px;      /* 與 .float-tag 的 height 一致 */
  --tag-clear:6px;   /* 標籤上緣要低於手機下緣的安全距離 */
  /* 標籤 B 的上提量。手機保持 0；桌機上提後仍只會壓到手機下緣的機身留白
     （.phone 有 8px padding），不會碰到輸入列與傳送鍵。 */
  --tag-b-lift:0px;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:26px 6px var(--vis-pad-b);
}
.visual-glow{
  position:absolute;width:min(440px,110%);height:min(440px,110%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(139,52,190,.22),rgba(139,52,190,0) 64%);
  filter:blur(14px);
}
.visual-ring{
  position:absolute;width:min(360px,92%);aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(95,25,133,.10);
  box-shadow:inset 0 0 60px rgba(168,87,216,.08);
}

.phone{
  position:relative;z-index:2;
  width:min(300px,80vw);
  padding:8px;
  border-radius:34px;
  background:linear-gradient(160deg,#FFFFFF 0%,#F7EFFC 100%);
  border:1px solid rgba(95,25,133,.12);
  box-shadow:
    0 30px 60px rgba(74,19,105,.22),
    0 6px 16px rgba(74,19,105,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.phone-screen{
  border-radius:27px;overflow:hidden;
  background:#F7F2FC;
  border:1px solid rgba(95,25,133,.07);
}

.chat-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 12px;
  background:linear-gradient(120deg,#5F1985,#7524A3);
  color:var(--white);
}
.chat-back{display:inline-flex;align-items:center;justify-content:center;flex:none;width:14px;height:18px;opacity:.75}
.chat-back svg{width:14px;height:14px}
/* 群組頭像：吉祥物大頭照，圓形裁切、以臉部為中心（等比不變形） */
.chat-avatar{
  width:26px;height:26px;flex:none;border-radius:50%;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 2px 6px rgba(30,7,48,.20);
}
.chat-avatar img{
  width:100%;height:100%;
  object-fit:cover;   /* 正方形圖 + 正方形容器 = 正中內切圓裁切，不額外縮放 */
}
.chat-meta{flex:1;min-width:0;display:flex;align-items:center;gap:6px}
.chat-meta b{font-size:12.5px;font-weight:700;letter-spacing:.01em}
.chat-meta i{font-size:11px;opacity:.7}
.chat-menu{display:inline-flex;align-items:center;flex:none;opacity:.75}
.chat-menu svg{width:17px;height:17px}

.chat-body{
  padding:14px 12px 16px;
  background:linear-gradient(180deg,#F8F3FD 0%,#FFFFFF 100%);
  display:flex;flex-direction:column;gap:12px;
}
.chat-day{
  align-self:center;
  font-size:10px;font-weight:500;color:var(--ink-3);
  background:rgba(95,25,133,.06);
  border-radius:var(--r-pill);padding:2px 12px;
}
.msg{display:flex;gap:7px}
.msg-out{justify-content:flex-end;align-items:flex-end}
.msg-read{
  font-size:9.5px;line-height:1.4;text-align:right;
  color:var(--ink-3);padding-bottom:2px;
}
.bubble-out{
  font-size:16px;font-weight:900;letter-spacing:.06em;color:#22421A;
  background:linear-gradient(135deg,#D3F6AE,#AEE884);
  border-radius:15px 15px 4px 15px;
  padding:7px 20px;
  box-shadow:0 3px 10px rgba(80,140,40,.18);
}
.msg-in{align-items:flex-start}
/* 聊天發送者頭像：與群組頭像使用同一組吉祥物圓形裁切 */
.msg-ava{
  width:26px;height:26px;flex:none;border-radius:50%;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 3px 8px rgba(95,25,133,.16);
}
.msg-ava img{
  width:100%;height:100%;
  object-fit:cover;   /* 正方形圖 + 正方形容器 = 正中內切圓裁切，不額外縮放 */
}
/* 讓卡片撐滿頭像右側的剩餘寬度，與真實 LINE Flex Message 的版面一致 */
.msg-col{flex:1;min-width:0}
.msg-name{display:block;font-size:10px;color:var(--ink-3);margin-bottom:4px;padding-left:2px}

/* ---- 無界 X AI 回覆的卡片（真實 LINE Flex Message 樣式） ----
   資訊層級：上＝品牌標題（次要）、下＝單一主要按鈕（主要焦點）。
   卡片本體為白底，只有按鈕使用品牌漸層，避免與上方紫色聊天列爭焦點。 */
.flex-card{
  width:100%;
  overflow:hidden;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--sh-1);
}
.fc-head{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 12px 10px;
  background:linear-gradient(180deg,#FBF6FE 0%,#F5EAFB 100%);
  border-bottom:1px solid var(--line);
}
.fc-brand{
  font-size:12.5px;font-weight:900;letter-spacing:.02em;line-height:1.4;
  color:var(--p-700);
}
.fc-bar{width:1px;height:11px;flex:none;background:rgba(95,25,133,.22)}
.fc-en{
  font-size:9px;font-weight:500;letter-spacing:.22em;line-height:1.4;
  color:var(--ink-3);
}
.fc-body{padding:12px}
.fc-btn{
  display:flex;align-items:center;justify-content:center;
  height:34px;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  color:var(--white);
  background:var(--grad-purple);
  border-radius:10px;
  box-shadow:0 5px 12px rgba(95,25,133,.24),inset 0 1px 0 rgba(255,255,255,.18);
}

.chat-input{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;
  background:var(--white);
  border-top:1px solid var(--line);
}
.chat-field{
  flex:1;font-size:11px;color:var(--ink-3);
  background:var(--p-70);border-radius:var(--r-pill);
  padding:7px 13px;
}
.chat-send{
  width:26px;height:26px;flex:none;border-radius:50%;
  display:grid;place-items:center;color:var(--white);
  background:var(--grad-purple);
  box-shadow:0 4px 10px rgba(95,25,133,.28);
}
/* 紙飛機的光學置中（桌機／手機共用同一顆 26px 圓鈕、13px icon）。
   實測三組指標（viewBox 24，中心 12,12）：
     path bbox 中心   12.000 / 13.000  → 左右對稱，但整體低 1.00
     墨跡 alpha 重心  13.088 / 11.888  → 視覺重量偏右 1.09，垂直幾乎正中
     三端點形心       12.333 / 12.667  → (4,12)(20,5)(13,21)
     四邊留白 L/R/T/B 4.00 / 4.02 / 5.00 / 3.02
   右偏來自「重量」、下偏來自「外框」，兩者各自只影響一個軸。
   取三者平均 (12.474, 12.518) 當光學中心，位移 -0.474 / -0.518 單位，
   換算 13px/24 = 0.5417 px/unit → -0.26px / -0.28px。
   同時移除原本的 left:.5px（那是把 icon 再往右推，正是右偏感的主因）。 */
.chat-send svg{width:13px;height:13px;transform:translate(-0.26px,-0.28px)}

.float-tag{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 15px;
  font-size:12px;font-weight:700;color:var(--p-700);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-2);
  white-space:nowrap;
}
/* 浮動標籤的落點原則：只能壓在「空的」區域上。
   手機示意圖由上到下的內容帶為
     聊天列（頭像＋群組名）→ 日期 → 「AI」訊息（靠右）→ 卡片 → 輸入列（含傳送鍵）
   因此：
   A 放在「AI」訊息左側 —— 該訊息靠右對齊，左半邊是空的，
     且已離開最上方的聊天列頭像。
   B 放在手機下緣「外側」—— 完全避開輸入框與傳送鍵，
     也不會壓到卡片上的「無界｜X AI」與「任務 Task」。
   兩者形成左上 ↔ 右下的對角配置，視覺較平衡；
   標籤文字長度各語言差異很大，放在空白帶／裝置外側才不會因語言而破版。 */
.float-tag-a{left:0;top:30%}
/* 標籤上緣 = 手機下緣 + --tag-clear，因此永遠落在手機外側下方，
   不會壓到輸入框與傳送鍵；換斷點時跟著 --vis-pad-b 自動校正。 */
.float-tag-b{right:0;bottom:calc(var(--vis-pad-b) - var(--tag-h) - var(--tag-clear) + var(--tag-b-lift))}
.ft-ico{width:15px;height:15px;background-repeat:no-repeat;background-size:contain;background-position:center}
.ft-lang{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237524A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M3.6 12h16.8M12 3.6c2.5 3 2.5 13.8 0 16.8M12 3.6c-2.5 3-2.5 13.8 0 16.8'/%3E%3C/svg%3E")}
/* 群組數量不限：與 02 區塊共用同一組雙對話框路徑（主框左前完整、後框右下大部分被遮住） */
.ft-bubbles{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%237524A3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(1.5 1.3)'%3E%3Cpath d='M6.4 4h11.2a3.4 3.4 0 013.4 3.4v6.2a3.4 3.4 0 01-3.4 3.4h-5.4L7.6 21v-4H6.4A3.4 3.4 0 013 13.6V7.4A3.4 3.4 0 016.4 4z'/%3E%3Cpath d='M21 12h1.6a3.4 3.4 0 013.4 3.4v3.2a3.4 3.4 0 01-3.4 3.4h-1v3.4L18.4 22h-1a3.4 3.4 0 01-3.4-3.4V17'/%3E%3C/g%3E%3C/svg%3E")}

/* ============================================================
   02 · 費用與使用方式
   ============================================================ */
.section-plan{
  background:linear-gradient(180deg,
    rgba(250,244,253,0) 0%,
    #FAF4FD 10%,
    #F7EFFC 60%,
    rgba(250,244,253,0) 100%);
}

/* ---- 兩個月費方案 ---- */
.plan-duo{display:grid;grid-template-columns:1fr;gap:16px}

.plan-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:26px 24px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFAFE 100%);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
}
.plan-card:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-2)}

/* 進階方案：以深紫卡做出層級差，但不過度張揚 */
/* 進階方案卡：原本上緣有一圈金色光暈（at 88% -10%）壓在邊界上，
   加上 border-color:transparent 讓深色底透出邊框位置，
   造成「黑外框 + 上緣偏黃髒色」。改為乾淨的淺紫高光與明確的淺色描邊。 */
.plan-card-pro{
  color:var(--white);
  background:linear-gradient(158deg,#7A2AA8 0%,#5F1985 52%,#43136E 100%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 40px rgba(30,7,48,.30);
}
.plan-card-pro::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(460px 260px at 82% 10%,rgba(199,140,240,.20),transparent 74%),
    radial-gradient(380px 230px at 4% 104%,rgba(122,42,168,.30),transparent 76%);
}
.plan-card-pro:hover{box-shadow:0 26px 56px rgba(30,7,48,.40)}
/* 上緣高光：改為中性白光，避免在卡片頂端留下一道黃色髒邊 */
.plan-shine{
  position:absolute;left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
}

.plan-card-head{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.plan-name{
  display:inline-flex;align-items:center;height:30px;padding:0 16px;
  font-size:13.5px;font-weight:900;letter-spacing:.03em;
  color:var(--p-700);
  background:var(--p-70);
  border:1px solid rgba(95,25,133,.12);
  border-radius:var(--r-pill);
}
/* 每月點數：併入價格列右側，避免與價格的「/ 月」重複 */
.plan-points{
  margin-left:auto;
  display:flex;flex-direction:column;align-items:flex-end;
  text-align:right;line-height:1.35;
}
.plan-points b{font-size:19px;font-weight:900;letter-spacing:.01em;color:var(--p-600)}
.plan-points i{font-size:11.5px;font-weight:500;color:var(--ink-3);letter-spacing:.04em}
.plan-card-pro .plan-points b{color:var(--g-300)}
.plan-card-pro .plan-points i{color:rgba(255,255,255,.55)}
.plan-scope{
  position:relative;
  margin-top:12px;
  font-size:13px;line-height:1.7;color:var(--ink-3);
}
.plan-card-pro .plan-name{
  color:#4A1369;border-color:transparent;
  background:var(--grad-gold);
  box-shadow:0 8px 18px rgba(242,168,30,.28);
}
/* PRICING：固定裝飾字，不隨語言切換；兩張卡位置與層級一致，僅顏色隨底色調整 */
.plan-tag{
  font-size:11px;font-weight:500;letter-spacing:.16em;
  color:rgba(115,101,134,.62);
}
.plan-card-pro .plan-tag{color:rgba(255,255,255,.5)}

.price-block{
  position:relative;
  /* 320px + 非中文語系時，「NT$ 299 / month」加上右側的每月點數會超過卡片寬度，
     而 .plan-card 是 overflow:hidden，點數會被直接裁掉。
     允許換行：空間夠時完全不影響原本的單行排版，不夠時點數區才掉到下一行
     （仍靠 margin-left:auto 右對齊）。 */
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-top:22px;
}
.price-cur{font-size:19px;font-weight:900;letter-spacing:.02em;color:var(--p-600)}
.price-val{
  font-size:44px;font-weight:900;line-height:1;letter-spacing:-.02em;
  color:var(--ink);
}
.price-unit{font-size:15px;font-weight:500;color:var(--ink-3)}
.plan-card-pro .price-cur{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.plan-card-pro .price-val{color:rgba(255,255,255,.96)}
.plan-card-pro .price-unit{color:rgba(255,255,255,.56)}

.plan-feats{
  position:relative;
  margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-start;gap:11px;
  flex:1;   /* 兩卡等高：項目較少的方案，多餘空間留在下方 */
}
.plan-card-pro .plan-feats{border-top-color:rgba(255,255,255,.16)}
.plan-feats li{
  display:flex;align-items:center;gap:11px;
  font-size:15px;font-weight:500;line-height:1.6;
}
.feat-tick{
  position:relative;flex:none;
  width:21px;height:21px;border-radius:50%;
  background:var(--p-70);
  border:1px solid rgba(95,25,133,.14);
}
.feat-tick::after{
  content:"";position:absolute;left:7px;top:5px;
  width:5px;height:9px;
  border:solid var(--p-600);border-width:0 2px 2px 0;
  transform:rotate(42deg);
}
.plan-card-pro .feat-tick{background:var(--grad-gold);border-color:transparent}
.plan-card-pro .feat-tick::after{border-color:#5A3A00}

/* 原「三項優勢卡」(.plan-grid / .plan-list / .plan-item / .plan-ico) 已整組移除：
   兩項升級為 03 區的正式功能卡片，一項依指示刪除。 */

/* 取得使用額度 */
.credit-block{
  margin-top:18px;
  padding:22px 18px;
  background:linear-gradient(165deg,#FFFDF9,#FFF7EA);
  border:1px solid rgba(242,168,30,.26);
  border-radius:var(--r-lg);
  box-shadow:0 12px 30px rgba(201,138,8,.08);
}
.credit-head{text-align:center;margin-bottom:16px}
.credit-step{
  display:inline-flex;align-items:center;height:26px;padding:0 14px;
  font-size:12.5px;font-weight:900;letter-spacing:.04em;color:var(--g-700);
  background:rgba(255,255,255,.9);
  border:1px solid rgba(242,168,30,.34);
  border-radius:var(--r-pill);
}
.credit-head p{margin-top:8px;font-size:13px;color:#96742F}
.credit-row{display:flex;flex-direction:column;align-items:center;gap:10px}
.credit-card{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:16px;
  background:var(--white);
  border:1px solid rgba(242,168,30,.22);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
}
.credit-card:hover{transform:translateY(-3px);border-color:rgba(242,168,30,.5);box-shadow:0 14px 30px rgba(201,138,8,.14)}
.credit-ico{
  width:50px;height:50px;flex:none;border-radius:16px;
  display:grid;place-items:center;
  color:#8A5A00;
  background:var(--grad-gold);
  box-shadow:0 8px 18px rgba(242,168,30,.26),inset 0 1px 0 rgba(255,255,255,.5);
}
.credit-ico svg{width:26px;height:26px}
.credit-txt b{display:block;font-size:15.5px;font-weight:700;line-height:1.55}
.credit-txt span{display:block;font-size:13px;color:var(--ink-3);line-height:1.6}
/* 小標籤：區分「額外加值」與「免費體驗」，兩者非同級選項 */
.credit-tag{
  display:inline-block !important;
  margin-bottom:4px;
  padding:2px 9px;
  font-size:11px !important;font-weight:900;letter-spacing:.06em;
  color:var(--g-700) !important;
  background:rgba(242,168,30,.16);
  border-radius:var(--r-pill);
  line-height:1.6 !important;
}
.credit-tag-trial{
  color:var(--p-700) !important;
  background:var(--p-70);
}
/* 免費體驗卡：層級略低於加值卡 */
.credit-card-trial{
  background:rgba(255,255,255,.72);
  border-color:rgba(95,25,133,.14);
}
.credit-card-trial:hover{border-color:var(--p-300);box-shadow:var(--sh-2)}
.credit-card-trial .credit-ico{
  color:var(--p-700);
  background:linear-gradient(160deg,#F7EDFC,#EFDDF9);
  box-shadow:none;
  border:1px solid rgba(95,25,133,.10);
}

/* ============================================================
   03 · 功能
   ============================================================ */
.section-features{position:relative}
.section-features::before{
  content:"";position:absolute;inset:auto 0 0 0;height:70%;
  background:radial-gradient(700px 300px at 50% 100%,rgba(168,87,216,.10),transparent 70%);
  pointer-events:none;
}
.section-features .wrap{position:relative}

.feat-grid{display:grid;grid-template-columns:1fr;gap:14px}
.feat-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:28px 24px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FDFAFE 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
}
.feat-card::before{
  content:"";position:absolute;right:-40px;top:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,87,216,.13),transparent 68%);
  opacity:0;transition:opacity var(--t-mid);
}
.feat-card:hover{
  transform:translateY(-5px);
  border-color:var(--line-2);
  box-shadow:var(--sh-3);
}
.feat-card:hover::before{opacity:1}
.feat-ico{
  position:relative;
  width:54px;height:54px;border-radius:17px;
  display:grid;place-items:center;
  margin-bottom:18px;
  color:var(--white);
  background:var(--grad-purple);
  box-shadow:0 10px 22px rgba(95,25,133,.26),inset 0 1px 0 rgba(255,255,255,.22);
}
.feat-ico svg{width:28px;height:28px}
.feat-ico::after{
  content:"";position:absolute;right:-3px;top:-3px;
  width:10px;height:10px;border-radius:50%;
  background:var(--grad-gold);
  box-shadow:0 0 0 3px rgba(255,255,255,.9);
}
.feat-card h3{position:relative;font-size:17.5px;font-weight:900;line-height:1.5;letter-spacing:.005em}
.feat-card p{position:relative;margin-top:8px;font-size:14px;font-weight:400;line-height:1.8;color:var(--ink-3)}

/* ============================================================
   04 · 四個步驟
   ============================================================ */
.section-steps{
  position:relative;overflow:hidden;
  margin-top:26px;
  padding:60px 0 64px;
  color:var(--white);
  background:linear-gradient(168deg,#4A1369 0%,#3A0F58 50%,#25093A 100%);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
}
.steps-glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 300px at 86% 2%,rgba(168,87,216,.34),transparent 66%),
    radial-gradient(460px 280px at 6% 96%,rgba(139,52,190,.26),transparent 72%);
}
.section-steps .wrap{position:relative}

/* ------------------------------------------------------------
   步驟卡：桌機版是唯一基準
   卡片的所有尺寸都寫成 calc(桌機值 × --sc)，--sc 預設 1（＝桌機實際值）。
   手機版只調整 --sc 與排列方向，因此比例、留白、視覺層級與桌機完全同一套；
   兩邊不再各自維護一份數值，也就不會再產生「只有概念像」的偏差。
   桌機卡片基準寬度 242px（1120 內容寬 - 3×24 間距，四欄），
   手機的卡片寬度同樣由 calc(242px × --sc) 得出，維持相同長寬比。
   ------------------------------------------------------------ */
/* 行動瀏覽器預設會在「可點擊元素」上蓋一層半透明高亮（Chrome Android 的
   -webkit-tap-highlight-color 預設是 rgba(51,181,229,.4) 的藍色）。
   點擊卡片切換時，那層藍色會在手指放開的瞬間閃一下 —— 這是瀏覽器原生的
   touch feedback，不是 class 或 style 的變化，所以逐幀取樣 class／computed
   style 都驗不出來，只有真機看得到。滑動不會觸發 tap，所以 swipe 沒有這個問題。
   這裡只關掉觸控高亮；鍵盤操作的 :focus-visible 外框不受影響。 */
.step-track,.step-card{-webkit-tap-highlight-color:transparent}

.step-track{display:flex;flex-direction:column;gap:14px;--sc:1}
.step-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  padding:calc(46px * var(--sc)) calc(22px * var(--sc)) calc(30px * var(--sc));
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.15);
  border-radius:calc(24px * var(--sc));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 30px rgba(20,5,34,.22),inset 0 1px 0 rgba(255,255,255,.10);
}
.step-num{
  position:absolute;top:calc(-19px * var(--sc));left:50%;transform:translateX(-50%);
  display:inline-grid;place-items:center;
  width:calc(44px * var(--sc));height:calc(44px * var(--sc));border-radius:50%;
  font-size:calc(20px * var(--sc));font-weight:900;color:var(--white);
  background:linear-gradient(150deg,#A857D8,#5F1985);
  box-shadow:0 8px 18px rgba(20,5,34,.34),inset 0 0 0 1.5px rgba(255,255,255,.22);
}
.step-ico{
  width:calc(54px * var(--sc));height:calc(54px * var(--sc));
  border-radius:calc(17px * var(--sc));
  margin-bottom:calc(16px * var(--sc));
  display:grid;place-items:center;
  color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
}
.step-ico svg{width:calc(28px * var(--sc));height:calc(28px * var(--sc))}
.step-txt{margin-top:0}
.step-label{
  display:block;
  font-size:calc(11px * var(--sc));font-weight:900;letter-spacing:.16em;
  color:var(--g-300);margin-bottom:calc(4px * var(--sc));
}
.step-card h3{font-size:calc(17.5px * var(--sc));font-weight:900;line-height:1.5;color:var(--white)}
.step-card p{margin-top:calc(7px * var(--sc));font-size:calc(13.5px * var(--sc));font-weight:400;line-height:1.8;color:rgba(255,255,255,.70)}
.step-card p b{color:var(--g-300);font-weight:700}

.step-card.is-active{
  background:linear-gradient(180deg,rgba(242,168,30,.20),rgba(255,255,255,.05));
  border-color:rgba(255,201,75,.44);
  box-shadow:0 16px 36px rgba(20,5,34,.30),inset 0 1px 0 rgba(255,217,122,.24);
}
.step-card.is-active .step-num{
  background:var(--grad-gold);color:#4A1369;
  box-shadow:0 8px 18px rgba(242,168,30,.34),inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.step-card.is-active .step-ico{
  background:rgba(255,217,122,.14);
  border-color:rgba(255,201,75,.34);
  color:var(--g-300);
}

/* ---- 手機版：4 個步驟改為左右滑動 Carousel（桌機不受影響，見 960px 斷點） ----
   用原生 CSS scroll-snap 實作：可手指 swipe、有慣性、放手後自動對齊，
   不需要任何 library。卡片樣式沿用既有設計，只改排列方向與寬度。 */
.step-dots{display:none}

@media (max-width:959px){
  /* ---- A. Hero：手機版整組水平置中 ---- */
  .hero-copy{text-align:center}
  .hero-sub{margin-left:auto;margin-right:auto;max-width:34em}
  .hero-actions{justify-content:center}

  /* ---- B. Header ---- */
  .header-inner{gap:4px}

  /* ---- C. 手機版不顯示兩顆浮動標籤 ----
     這是刻意的 responsive 資訊層級差異，不是缺漏：
     手機以「主 LINE 示意圖乾淨、水平置中」為優先，標籤只出現在桌機。 */
  .float-tag{display:none}

  /* ---- D. 四步驟紫色區塊：手機版上緣改直角 ----
     桌機保留 --r-xl 的上圓角（見 960px 斷點外的基準值）；
     手機拿掉後，上緣是一條水平直線，讀起來是「新的一段 section」，
     而不是一張巨型卡片。step card 與白色 CTA 卡的圓角不受影響。 */
  .section-steps{border-radius:0}

  /* ---- E. 步驟卡：卡片本體 100% 沿用桌機版，只改排列方式 ----
     卡片的樣式、比例、留白、字級全部來自共用的 --sc 尺寸系統（見上方基準區塊），
     這裡只負責「橫向捲動 + 對齊」，不重新定義任何卡片內部樣式。 */
  .step-track{
    /* 卡片整體縮放比例：1 ＝ 與桌機卡片完全等尺寸（寬 242px） */
    --sc:1;
    --card-w:calc(242px * var(--sc));

    flex-direction:row;
    gap:calc(24px * var(--sc));   /* 桌機欄距 24px，同步等比縮放 */
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

    /* ---- 定位邏輯：一律以「容器中心」為對齊基準 ----
       用負邊距抵銷 .wrap 的左右內距，讓捲動容器等於整個螢幕寬，
       置中才會是「畫面正中」而不是「內容區正中」。
       左右內距各留 (容器寬 - 卡片寬) / 2，第 1 張與第 4 張才有足夠的
       捲動距離可以捲到正中央；兩側等值，所以每個 index 的左右
       露出比例完全一致，最後一張也不會偏左。
         容器寬 = 100%（.wrap 內容寬）+ 2×--pad
         單側內距 = (容器寬 - 卡片寬) / 2 = 50% + --pad - 卡片寬/2
       上方 30px 是留給浮出卡片上緣的數字徽章，避免被捲動容器裁掉。 */
    padding:30px 0 18px;
    padding-inline:calc(50% + var(--pad) - var(--card-w) / 2);
    margin-inline:calc(var(--pad) * -1);
    scroll-padding-inline:0;
  }
  .step-track::-webkit-scrollbar{display:none}
  .step-card{
    flex:0 0 var(--card-w);
    scroll-snap-align:center;
    scroll-snap-stop:always;
  }

  /* ---- F. Carousel 前後景深：主卡在前、鄰卡退後 ----
     只用 transform / opacity / z-index，完全不碰版面盒模型，
     因此 scroll-snap 的落點、置中計算與 JS 的 index 判定都不受影響
     （scale 以元素中心為原點，卡片中心座標不變）。
     選擇器用 .step-track .step-card 提高權重，避免被進場動畫的 .reveal 蓋掉。 */
  .step-track .step-card{
    transform:scale(.87);
    opacity:.6;
    z-index:0;
    transition:transform .34s var(--ease),opacity .34s var(--ease),box-shadow .34s var(--ease);
  }
  .step-track .step-card.is-active{
    transform:scale(1);
    opacity:1;
    z-index:3;
    /* 主卡多一層較深、較開的陰影，強化「浮在前面」的感覺；
       只加重既有陰影，不另外做光暈，避免變成誇張的 3D 效果。 */
    box-shadow:0 22px 46px rgba(20,5,34,.44),inset 0 1px 0 rgba(255,217,122,.26);
  }

  .step-dots{
    display:flex;justify-content:center;align-items:center;gap:8px;
    margin-top:18px;
  }
  .step-dot{
    width:7px;height:7px;padding:0;flex:none;
    border-radius:var(--r-pill);
    background:rgba(255,255,255,.26);
    transition:background var(--t-mid),width var(--t-mid);
  }
  .step-dot.is-on{width:22px;background:var(--g-300)}
}

/* 依螢幕寬度只調整 --sc（整張卡等比縮放），不改任何單項數值，
   確保卡片在每個尺寸下都與桌機卡片同一個長寬比與版面。
   320／360／375／390／412／430 皆維持「一張主卡 + 右側露出下一張」。 */
@media (max-width:359px){
  .step-track{--sc:.88}    /* 卡片寬 213px：320 寬螢幕仍留得下右側 peek */
}
@media (min-width:414px) and (max-width:959px){
  .step-track{--sc:1.08}   /* 卡片寬 261px：大尺寸手機不會顯得空 */
}

/* 完成提示 → 返回 LINE CTA */
.done-card{
  display:flex;align-items:center;gap:16px;
  margin-top:24px;padding:20px 22px;
  background:var(--white);
  border:1px solid transparent;
  border-radius:var(--r-lg);
  box-shadow:0 20px 44px rgba(20,5,34,.28);
  color:var(--ink);
  cursor:pointer;
  transition:transform var(--t-mid),box-shadow var(--t-mid),border-color var(--t-mid);
}
.done-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,201,75,.55);
  box-shadow:0 26px 54px rgba(20,5,34,.34);
}
.done-card:active{transform:translateY(-1px);box-shadow:0 14px 30px rgba(20,5,34,.30)}
.done-card:hover .done-arrow{transform:translateX(3px);color:var(--p-600)}
.done-arrow{
  flex:none;margin-left:auto;color:var(--p-400);
  transition:transform var(--t-fast),color var(--t-fast);
}
.done-arrow svg{width:22px;height:22px}
.done-check{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  color:#7A4E00;
  background:var(--grad-gold);
  box-shadow:0 8px 18px rgba(242,168,30,.32),inset 0 1px 0 rgba(255,255,255,.6);
}
.done-check svg{width:24px;height:24px}
.done-txt b{font-size:16px;font-weight:900;line-height:1.6}
.done-txt p{font-size:13.5px;font-weight:400;color:var(--ink-2);line-height:1.7}
.done-txt p b{color:var(--p-700);font-weight:700;font-size:inherit}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:#25093A;color:rgba(255,255,255,.62);
  text-align:center;
  padding:32px 20px calc(36px + env(safe-area-inset-bottom));
}
/* 由 Header 使用中的素材 1:1 裁出的圖形本體（assets/logo-mark-only.png），
   僅切掉旁邊的文字，透明背景原樣保留，未做二次去背。 */
.footer-home{display:inline-block;color:inherit;text-decoration:none;border-radius:8px}
.footer-home:focus-visible{outline:2px solid var(--g-400);outline-offset:4px}
.footer-logo{
  display:block;
  width:70px;height:auto;
  margin:0 auto 12px;
}
.footer-name{font-size:15px;font-weight:900;color:var(--white);letter-spacing:.03em}
.footer-name span{
  font-weight:400;font-size:10.5px;letter-spacing:.26em;
  color:rgba(255,255,255,.45);margin-left:7px;
}
.footer-note{font-size:12px;margin-top:5px;letter-spacing:.06em}

/* ============================================================
   進場動畫
   ============================================================ */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RWD · ≥400px
   ============================================================ */
@media (max-width:439px){
  /* 窄螢幕：兩顆 CTA 並排會過擠，改為上下排列並各自滿版 */
  .hero-actions{flex-direction:column;gap:10px}
}

/* ============================================================
   RWD · Tablet ≥640px
   ============================================================ */
@media (min-width:640px){
  :root{--sec-y:80px;--pad:28px}
  .sec-title{font-size:29px}
  .sec-desc{font-size:15px}
  .sec-head{margin-bottom:44px}

  .hero{padding:40px 0 64px}
  .hero-title{font-size:50px}

  .plan-duo{grid-template-columns:1fr 1fr;gap:18px}
  .plan-card{padding:30px 28px}
  .credit-block{padding:26px 24px}
  .credit-row{flex-direction:row;align-items:center;gap:14px}
  .credit-card{flex:1}

  .feat-grid{grid-template-columns:1fr 1fr;gap:16px}

  .done-card{padding:24px 28px}
}

/* ============================================================
   RWD · Desktop ≥960px
   ============================================================ */
@media (min-width:960px){
  :root{--header-h:66px;--sec-y:104px;--pad:40px}
  body{font-size:16px}

  /* 內距沿用基準值 var(--pad)（桌機為 40px），與 .wrap 對齊，此處不覆寫 */
  .header-brand{justify-content:flex-start}
  .header-logo{height:36px}
  /* 導覽選單只服務手機／平板；桌機維持 Logo + 語言切換的既有排版 */
  .nav-wrap{display:none}

  .sec-title{font-size:34px}
  .sec-desc{font-size:16px}
  .sec-head{margin-bottom:56px}

  .btn{height:56px;padding:0 30px;font-size:16px}
  /* Hero 兩顆 CTA：收窄左右內距，確保最長的語言（印尼文）在桌機仍能同一行並排 */
  .hero-actions{flex-wrap:nowrap}
  .hero-actions .btn{padding:0 22px;white-space:nowrap}

  /* Hero */
  .hero{padding:60px 0 76px}
  .hero-inner{flex-direction:row;align-items:center;gap:56px}
  /* 文字欄略寬於示意圖欄，讓最長語言的兩顆 CTA 有餘裕並排 */
  .hero-copy{flex:1.1;max-width:560px}
  /* 左右視覺平衡（各語言皆適用，不寫死任何單一語言的數值）：
     1. .hero-inner 的 align-items:center 會依「該語言實際的文案高度」
        重新求出置中點，所以每個語言各自取得自己的平衡點。
     2. 再加一段相對於示意圖自身高度的下移量。左欄的視覺重量集中在
        上方的大標題，幾何置中看起來會偏高；示意圖略微下沉可以把
        整體重心拉回中線。用 % 是相對自身高度，示意圖在 960／1200
        兩個斷點放大時，位移量會跟著等比變化，不需要另外校正。 */
  .hero-visual{
    flex:.9;
    --vis-pad-b:10px;
    /* 7% ≈ 27px（區塊高 381px）。示意圖與兩個浮動標籤都在這個容器內，
       transform 會整組一起移動，比例與尺寸不受影響。 */
    --visual-drop:7%;
    --tag-b-lift:10px;
    padding:10px 0 var(--vis-pad-b);
    transform:translateY(var(--visual-drop,3.2%));
  }
  /* 進場動畫也用 transform，若不合併會把上面的下移量整個蓋掉，
     造成動畫結束前後跳動 12px。這裡把「下移」與「進場位移」疊加，
     動畫結束後回到單純的下移量，前後一致。 */
  .hero-visual.reveal{transform:translateY(calc(var(--visual-drop,3.2%) + 18px))}
  .hero-visual.reveal.is-in{transform:translateY(var(--visual-drop,3.2%))}
  .hero-title{font-size:clamp(50px,4.8vw,62px);margin-top:26px}
  .hero-sub{font-size:17.5px;margin-top:54px}
  .hero-actions{margin-top:30px}

  /* 各語言 headline 微調：字長不同，字級與行距分別校準 */
  html[lang="zh-TW"] .hero-title{font-size:clamp(52px,5.05vw,65px)}          /* 繁中 +5%，維持一行 */
  html[lang="th"]      .hero-title{font-size:clamp(48.5px,4.7vw,60px);line-height:1.18}  /* 泰文 -2.5%，行距收緊 */
  html[lang="vi"]      .hero-title{font-size:clamp(48px,4.6vw,59px);line-height:1.14}    /* 越南文 -4% */
  html[lang="id"]      .hero-title{font-size:clamp(48px,4.6vw,59px);line-height:1.16}    /* 印尼文 -4%，兩行收緊 */
  .phone{width:328px}
  .float-tag-a{left:-4px;top:30%}
  /* 往左 25px（-4px → 21px）並上提 10px（--tag-b-lift），
     讓標籤貼近手機右下角、像附著在示意圖上，而不是獨立漂浮。 */
  .float-tag-b{right:21px}

  /* 02 */
  .plan-duo{gap:22px}
  .plan-card{padding:36px 32px}
  .price-val{font-size:52px}
  .price-cur{font-size:22px}
  .price-unit{font-size:16px}
  .plan-feats li{font-size:15.5px}
  .credit-block{margin-top:22px;padding:30px}

  /* 03 */
  /* 6 張功能卡：3 欄 × 2 列，每一列都是滿的，不會有尾列空位 */
  .feat-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .feat-card{padding:34px 26px 30px;min-height:250px}
  .feat-ico{margin-bottom:22px}
  .feat-card h3{font-size:18.5px}
  .feat-card p{font-size:14.5px;margin-top:10px}

  /* 04 */
  .section-steps{margin-top:34px;padding:104px 0 110px}
  /* 卡片本體的尺寸與版面來自共用基準（--sc:1），此處只排四欄等寬 */
  .step-track{flex-direction:row;gap:24px;align-items:stretch}
  .step-card{flex:1}
  /* 桌機：步驟卡可點擊切換 active 高亮 */
  .step-track .step-card{
    cursor:pointer;
    transition:background var(--t-mid),border-color var(--t-mid),box-shadow var(--t-mid);
  }
  .step-track .step-card .step-num,
  .step-track .step-card .step-ico{
    transition:background var(--t-mid),border-color var(--t-mid),color var(--t-mid),box-shadow var(--t-mid);
  }
  .step-track .step-card:not(.is-active):hover{
    background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.24);
  }
  .step-card::after{
    content:"";position:absolute;right:-16px;top:50%;
    width:9px;height:9px;
    border-top:2px solid rgba(255,201,75,.5);
    border-right:2px solid rgba(255,201,75,.5);
    transform:translateY(-50%) rotate(45deg);
  }
  .step-card:last-child::after{display:none}

  .done-card{
    max-width:540px;margin:36px auto 0;
    justify-content:center;padding:24px 32px;
  }
}

@media (min-width:1200px){
  .hero-copy{max-width:560px}
  .phone{width:344px}
}