/* 外網 v3 共用樣式（色票、重置、按鈕、徽章、版頭、頁尾）。
       首頁 index_v3.jsp 與各內容頁都先載這支，再載各自的 inpage_v3*.css；
       規則原本都在 inpage_v3.css，抽出來只是讓內容頁不用把整支首頁樣式拖進來。 */
    /* ─── Color Tokens ─── */
    :root {
      --c0:  #E0E9EA;
      --c1:  #B8DCE1;
      --c2:  #8ADBE6;
      --c3:  #64CBDB;
      --c4:  #51C1D2;
      --c5:  #4AB6CA;
      --c6:  #45A6B7;
      --c7:  #3F929E;
      --c8:  #3A7D86;
      --c9:  #305A5D;

      --bg:         #edf5f6;
      --bg-alt:     rgba(255,255,255,0.55);
      --surface:    rgba(255,255,255,0.70);
      --surface-hi: rgba(255,255,255,0.90);
      --blur:       blur(24px);
      --blur-sm:    blur(14px);

      /* AAA-compliant text — all ≥ 7:1 on glass card bg */
      --text-head:  #162527;   /* 13.4:1 on white */
      --text-body:  #244649;   /* 9.2:1  on white */
      --text-muted: #305A5D;   /* 7.2:1  on white — AAA floor */

      --border-grad: linear-gradient(145deg,
        rgba(138,219,230,0.85) 0%,
        rgba(81,193,210,0.40) 40%,
        rgba(74,182,202,0.12) 65%,
        rgba(58,125,134,0.65) 100%
      );
      --border-grad-strong: linear-gradient(145deg,
        rgba(138,219,230,1.0) 0%,
        rgba(81,193,210,0.65) 35%,
        rgba(74,182,202,0.25) 60%,
        rgba(58,125,134,0.90) 100%
      );

      --hc-ca: var(--text-head);   /* 別 + 讓客戶 */
      --hc-cb: var(--c5);          /* 來找你 + 讓客戶 (state B) */

      --shadow-sm: 0 4px 16px rgba(48,90,93,0.08);
      --shadow:    0 8px 32px rgba(48,90,93,0.11);
      --shadow-md: 0 18px 52px rgba(48,90,93,0.15);

      --radius:    18px;
      --radius-sm: 11px;
      --radius-lg: 26px;

      /* 內容頁（關於我們／產品／隱私／條款／幫助中心）樣式沿用的別名，與上面同一套色票 */
      --bg-hi:  #f4fafb;
      --ink:    #162527;
      --body:   #244649;
      --muted:  #305A5D;
      --dim:    #55706D;
      --dark:   #1F3840;
      --line:   rgba(48,90,93,.14);
      --danger: #C2410C;
      --warn:   #B7791F;
      --f-body: 'DM Sans','Noto Sans TC',system-ui,sans-serif;
      --f-logo: 'Syne','Noto Sans TC',sans-serif;
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    /* 這裡本來想比照 body 多加一道 overflow-x:hidden 保險，
       結果 html/body 同時有 overflow-x:hidden 會讓兩層都被瀏覽器隱含補上 overflow-y:auto，
       變成兩層各自獨立的捲軸容器，proof-sec 的 position:sticky 找錯「最近的捲動容器」整個失效
       （bcta 的手機因此在淡入時已經跟著頁面滾走）。body 原本就有 overflow-x:hidden，這裡拿掉就好。 */

    /* ─── AAA: Focus indicator ─── */
    :focus-visible {
      outline: 3px solid var(--c9);
      outline-offset: 4px;
      border-radius: 4px;
    }

    /* ─── AAA: All links distinguishable by more than color ─── */
    /* 這條優先權很高（每個 :not 都疊加），會蓋掉各頁元件自己的 text-decoration:none；
       長得像按鈕／分頁的連結（條款分頁、目錄、產品頁分頁、商店按鈕）要在這裡排除，PM 稿本來就沒底線 */
    a:not(.btn):not(.logo):not(.nav-links a):not(.nav-pill a):not(.nav-login-txt):not(.mn a):not(.footer-links a):not(footer a):not(.p-cta):not(.doc-tabs a):not(.toc a):not(.jump a):not(.app) {
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    body {
      font-family: 'DM Sans','Noto Sans TC',system-ui,sans-serif;
      background: #ffffff;
      color: var(--text-body);
      overflow-x: hidden;
      min-height: 100vh;
    }

    /* ─── Background Orbs ─── */
    .orbs {
      display: none;
    }
    .orb {
      position:absolute; border-radius:50%;
      filter: blur(80px); opacity:.55;
    }
    .orb-a {
      width:640px; height:640px; top:-160px; left:-180px;
      background: radial-gradient(circle, #8ADBE6 0%, transparent 65%);
    }
    .orb-b {
      width:560px; height:560px; bottom:-140px; right:-160px;
      background: radial-gradient(circle, #4AB6CA 0%, transparent 65%);
    }
    .orb-c {
      width:440px; height:440px; top:42%; right:8%;
      background: radial-gradient(circle, #B8DCE1 0%, transparent 65%);
    }

    /* ─── Layout ─── */
    section, header, footer { position:relative; z-index:1; }
    .wrap    { max-width:1080px; margin:0 auto; padding:0 24px; }
    .wrap-sm { max-width:660px;  margin:20px auto; padding:0; }

    /* ─── Typography ─── */
    h1,h2,h3 {
      font-family:'Syne','Noto Sans TC',sans-serif;
      color: var(--text-head);
    }

    /* ─── Buttons ─── */
    .btn {
      display:inline-flex; align-items:center; justify-content:center; gap:7px;
      padding:12px 24px; border-radius:9999px;
      font-weight:700; font-size:14px; font-family:inherit;
      text-decoration:none; transition:transform .45s cubic-bezier(0.34,1.56,0.64,1), box-shadow .45s cubic-bezier(0.34,1.56,0.64,1), background .22s ease, opacity .22s ease, color 0s;
      border:none; cursor:pointer; white-space:nowrap;
      overflow:hidden; position:relative;
    }
    .btn-lg { padding:16px 36px; font-size:16px; border-radius:9999px; }

    .btn-primary {
      background: #51C1D2;
      color: #fff;
      box-shadow: 0 5px 20px rgba(36,70,73,.30);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(36,70,73,.42);
      color: #fff;
    }

    /* ─── Badge ─── */
    .badge {
      display:inline-flex; align-items:center; gap:6px;
      padding:5px 14px; border-radius:999px;
      font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
      position:relative;
      background: rgba(255,255,255,.65);
      color: var(--text-muted);
      backdrop-filter: var(--blur-sm);
      -webkit-backdrop-filter: var(--blur-sm);
    }
    .badge::before {
      content:'';
      position:absolute; inset:0; border-radius:inherit;
      padding:1px;
      background: linear-gradient(135deg, var(--c2) 0%, var(--c5) 50%, var(--c8) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
    }

    /* ═══ HEADER ═══ */
    header {
      position:fixed; top:0; left:0; right:0; z-index:100;
      background: transparent;
    }
    /* 手機版 header 完全透明的話，任何區塊的標題只要滾到這個高度就會跟 logo 疊字（實機上抓到過），
       改成半透明毛玻璃，不管底下滾到什麼內容都不會露出來；大裝置維持原本透明，不加底色 */
    @media(max-width:640px){
      header {
        background: rgba(255,255,255,0.72);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
    }
    .header-inner {
      padding:20px 28px;
      display:flex; align-items:center; justify-content:space-between;
    }
    @media(max-width:640px){
      .header-inner { padding-top:12px; padding-bottom:12px; }
    }
    .logo { display:flex; align-items:center; gap:7px; text-decoration:none; }
    .logo-mark {
      width:40px; height:40px;
      display:flex; align-items:center; justify-content:center;
    }
    .logo-mark img {
      width:40px; height:40px; object-fit:contain;
      filter: none;
    }
    /* 河馬圖示＋「河馬保險／HIPPO INSURANCE」兩行字：兩行都用 flex 把字平均撐滿同一個寬度，左右邊才會對齊 */
    .logo-text { display:inline-flex; flex-direction:column; align-items:stretch; width:90px; line-height:1; }
    .logo-name {
      display:flex; justify-content:space-between; width:100%;
      font-family:'Noto Sans TC','Syne',sans-serif;
      font-size:20px; font-weight:900; line-height:1.05; color:var(--text-head);
      transition: color .4s ease;
    }
    .logo-en {
      display:flex; justify-content:space-between; width:100%; margin-top:4px;
      font-family:'DM Sans','Noto Sans TC',sans-serif;
      font-size:9px; font-weight:500; line-height:1; color:var(--text-muted);
      transition: color .4s ease;
    }
    .logo-name i, .logo-en i { font-style:normal; }
    .logo-en .sp { width:3px; }
    @media(max-width:640px){
      .logo-text { width:84px; }
      .logo-name { font-size:18.5px; }
      .logo-en { font-size:8.5px; margin-top:3px; }
    }

    .nav-right { display:flex; align-items:center; gap:10px; }

    /* ── Pill nav ── */
    .nav-pill {
      display:flex; align-items:center;
      background:rgba(255,255,255,0.88);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border:1px solid rgba(0,0,0,0.08);
      border-radius:999px;
      padding:0 8px;
      gap:2px;
    }
    .nav-pill a {
      color:var(--text-head); text-decoration:none;
      font-size:13px; font-weight:500;
      padding:16px 14px;
      border-radius:999px;
      transition:background .15s;
      white-space:nowrap;
      overflow:hidden;
      display:inline-flex; align-items:center; position:relative;
    }
    .nav-pill a:hover { text-decoration:none; }

    /* ── Char hover animation ── */
    .ch-orig, .ch-dbl {
      display:inline-flex;
      pointer-events:none;
    }
    .ch-dbl {
      position:absolute; inset:0;
      align-items:center; justify-content:center;
      color:inherit;
    }
    .ch-orig .ch, .ch-dbl .ch {
      display:inline-block;
      line-height:1;
      transition:transform .42s cubic-bezier(0.34,1.56,0.64,1);
    }
    .ch-dbl .ch { transform:translateY(230%); }

    /* ── Login text button ── */
    .ext-arrow {
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-left: 5px;
      vertical-align: -2px;
      flex-shrink: 0;
    }
    .ch svg { display: block; }
    .nav-login-txt {
      color:var(--text-head); text-decoration:none;
      font-size:13px; font-weight:500;
      padding:16px 20px;
      background:rgba(255,255,255,0.88);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border:1px solid rgba(0,0,0,0.08);
      border-radius:999px;
      overflow:hidden;
      display:inline-flex; align-items:center; position:relative;
      white-space:nowrap;
    }

    #headerSignup { padding:16px 20px; font-size:13px; box-shadow:none; }
    #headerSignup:hover { box-shadow:none; }

    /* ── 已登入：頭像膠囊＋會員選單（照 PM 稿 .ua／.ua-menu） ── */
    .ua { display:inline-flex; white-space:nowrap; align-items:center; gap:8px; height:44px; padding:0 12px 0 5px; border-radius:999px; border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.9); cursor:pointer; font:700 14px 'Noto Sans TC',sans-serif; color:#1c3136; -webkit-tap-highlight-color:transparent; }
    .ua:hover { border-color:rgba(81,193,210,.5); }
    .ua svg { color:#7d9294; transition:transform .2s; }
    .ua[aria-expanded="true"] svg { transform:rotate(180deg); }
    .ua.m { padding:0; width:44px; justify-content:center; }
    .ua-av { flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; background:linear-gradient(135deg,#2f8f99,#51c1d2); box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(81,193,210,.5); }
    .ua-av img { width:100%; height:100%; object-fit:cover; }
    header.header-dark .ua { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.22); color:#fff; }
    .ua-menu { position:fixed; z-index:9995; width:260px; padding:8px; border-radius:20px; background:rgba(255,255,255,.98); border:1px solid rgba(0,0,0,.06); box-shadow:0 24px 50px -18px rgba(14,36,40,.45); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s,transform .2s,visibility 0s linear .2s; font-family:'Noto Sans TC','DM Sans',sans-serif; box-sizing:border-box; }
    .ua-menu.open { opacity:1; visibility:visible; transform:none; transition:opacity .2s,transform .2s; }
    .ua-hd { display:flex; align-items:center; gap:12px; padding:12px 12px 14px; border-bottom:1px solid rgba(0,0,0,.06); margin-bottom:6px; }
    .ua-hd .ua-av { width:42px; height:42px; font-size:16px; }
    .ua-hd b { font-size:15px; color:#1c3136; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ua-menu a { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px; border-radius:12px; box-sizing:border-box; text-decoration:none !important; color:#1c3136; font:600 14px inherit; }
    .ua-menu a:hover { background:#eef7f8; }
    .ua-menu a svg { color:#2f8f99; flex:none; }
    .ua-menu a.go { background:linear-gradient(135deg,#51c1d2,#3aa9b9); color:#fff; justify-content:center; margin:2px 0 6px; }
    .ua-menu a.go svg { color:#fff; }
    .ua-menu hr { border:0; border-top:1px solid rgba(0,0,0,.06); margin:6px 4px; }
    .ua-menu a.out, .ua-menu a.out svg { color:#c2493a; }

    /* ── Header dark mode (over proof section) ── 河馬圖示本身是淺色，深色底上不用換圖，只把兩行字轉白 */
    header.header-dark .logo-name { color: #ffffff; }
    header.header-dark .logo-en { color: var(--c1); }
    /* 大裝置 header 整個透明，header-dark 只切換文字顏色，白字直接襯著底下深色區塊的背景就看得到，不需要再加自己的底色；
       手機版 header 本來就有毛玻璃底色，header-dark 的白字才需要換成深色底色才看得到 */
    @media(max-width:640px){
      header.header-dark {
        background: rgba(31,56,64,0.75);
      }
    }

    @media(max-width:640px){
      .nav-pill { display:none; }
      .nav-login-txt, #headerSignup, .nav-right .ua { display:none; }
    }
    .nav-mob { display:none; }
    /* line-height:1 —— 頁尾的 initCharHover 會把按鈕文字拆成逐字 span（.ch 是 line-height:1），
       原本在拆字前文字用繼承來的行高，按鈕會比拆字後高，重新整理時「開始使用」會由高變短。
       手機版先把行高固定成跟拆字後一樣，載入前後高度就一致 */
    @media(max-width:640px){ .nav-mob { display:flex; line-height:1; } }

    /* ── 手機版展開選單（選項同桌機版 header） ── */
    .nav-mob-group, .mn { display:none; }
    @media(max-width:640px){
      .nav-mob-group { display:flex; align-items:center; gap:10px; }
      .nav-burger {
        width:40px; height:40px; padding:0;
        display:inline-flex; align-items:center; justify-content:center;
        background:rgba(255,255,255,0.88);
        border:1px solid rgba(0,0,0,0.08);
        border-radius:999px;
        color:var(--text-head);
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
      }
      .nav-burger-icon { position:relative; width:16px; height:12px; display:block; }
      .nav-burger-icon span {
        position:absolute; left:0; width:100%; height:2px; border-radius:2px;
        background:currentColor;
        transition:transform .25s ease, opacity .2s ease, top .25s ease;
      }
      .nav-burger-icon span:nth-child(1) { top:0; }
      .nav-burger-icon span:nth-child(2) { top:5px; }
      .nav-burger-icon span:nth-child(3) { top:10px; }
      .nav-burger[aria-expanded="true"] .nav-burger-icon span:nth-child(1) { top:5px; transform:rotate(45deg); }
      .nav-burger[aria-expanded="true"] .nav-burger-icon span:nth-child(2) { opacity:0; }
      .nav-burger[aria-expanded="true"] .nav-burger-icon span:nth-child(3) { top:5px; transform:rotate(-45deg); }

      /* 手機選單：版頭下方整頁展開，每項附圖示與一行說明 */
      .mn {
        position:fixed; left:0; right:0; top:var(--mn-top,72px); bottom:0; z-index:9990;
        display:flex; flex-direction:column;
        padding:14px 16px calc(18px + env(safe-area-inset-bottom));
        overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
        background:radial-gradient(260px 260px at 100% 0,rgba(81,193,210,.22),transparent 70%),linear-gradient(180deg,rgba(247,251,251,.98),rgba(236,246,247,.99));
        backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
        opacity:0; visibility:hidden; transform:translateY(-10px);
        transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
      }
      .mn.open { opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
      .mn-list { display:flex; flex-direction:column; gap:8px; }
      .mn-item {
        display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:18px;
        background:rgba(255,255,255,.78); border:1px solid rgba(81,193,210,.16); box-shadow:0 6px 18px -12px rgba(22,60,70,.25);
        text-decoration:none; color:#1c3136; -webkit-tap-highlight-color:transparent;
        opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), background .15s;
      }
      .mn.open .mn-item { opacity:1; transform:none; transition-delay:calc(60ms + var(--i) * 45ms); }
      .mn-item:active { background:#e3f4f6; }
      .mn-ic { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#2f8f99; background:linear-gradient(135deg,rgba(81,193,210,.18),rgba(81,193,210,.06)); }
      .mn-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
      .mn-t b { font-size:17px; font-weight:700; letter-spacing:.02em; display:flex; align-items:center; gap:4px; }
      .mn-t small { font-size:13px; color:#6f8486; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
      .mn-ext { color:#8aa0a2; }
      .mn-chev { flex:none; color:#a7bbbd; }
      .mn-item.on { background:linear-gradient(135deg,#2f8f99,#3ba7b4); border-color:transparent; color:#fff; box-shadow:0 12px 26px -14px rgba(47,143,153,.8); }
      .mn-item.on .mn-ic { background:rgba(255,255,255,.2); color:#fff; }
      .mn-item.on small, .mn-item.on .mn-chev { color:rgba(255,255,255,.82); }
      .mn-foot { margin-top:auto; padding-top:18px; opacity:0; transition:opacity .35s ease; }
      .mn.open .mn-foot { opacity:1; transition-delay:.33s; }
      .mn-contact { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:#6f8486; }
      .mn-contact a { color:#2f8f99; font-weight:700; text-decoration:none; }
    }

    /* Screen-reader-only utility */
    .sr-only {
      position:absolute; width:1px; height:1px;
      padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }

    /* ═══ FOOTER ═══ */
    footer {
      padding: 56px 0 28px;
      color: #ffffff;
    }
    .proof-footer {
      padding: 20px 24px 16px;
    }
    .proof-footer .footer-body {
      padding-bottom: 12px;
    }
    .footer-wrap { padding: 0 28px; }

    .footer-body {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 28px 28px 0;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
    @media(max-width:768px){
      /* 手機版頁尾上緣那條細白線拿掉（深色圓角頁尾本身已經有分界） */
      .footer-body { flex-direction: column; gap: 24px; border-top: 0; }
    }

    /* ── Left: social + app buttons ── */
    .footer-left { flex: 0 0 50%; display: flex; flex-direction: column; gap: 16px; }
    @media(max-width:768px){ .footer-left { flex: 0 0 100%; } }
    .footer-brand { display:flex; align-items:center; gap:14px; }
    .footer-brand .logo-mark img { width:52px; height:52px; }
    .footer-brand-text { line-height:1.3; }
    .footer-brand-name {
      font-family:'Syne','Noto Sans TC',sans-serif;
      font-weight:700; font-size:18px; color:#ffffff;
    }
    .footer-brand-tagline { font-size:13px; color:rgba(255,255,255,0.7); margin-top:3px; }
    .footer-brand-en { font-size:13px; color:rgba(255,255,255,0.5); letter-spacing:.12em; margin-top:3px; }

    /* ── Right ── */
    .footer-right { flex: 0 0 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; margin-top: 7px; }

    .footer-nav {
      display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 13px;
    }
    .footer-nav a {
      color: #ffffff; text-decoration: none; font-weight: 500;
      transition: opacity .2s;
    }
    .footer-nav a:hover { opacity: .65; }

    .footer-contact-row {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: rgba(255,255,255,0.6); flex-wrap: wrap;
    }
    .footer-contact-item { color: rgba(255,255,255,0.6); text-decoration: none; }
    .footer-contact-sep { color: rgba(255,255,255,0.3); }

    .footer-bottom-row {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    .footer-social { display:flex; gap:8px; }
    .footer-bottom-row > a.fs-line,
    .footer-bottom-row > a.fs-fb,
    .footer-bottom-row > a.fs-ig {
      width:32px; height:32px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:#fff; transition:opacity .2s; text-decoration:none;
    }
    .footer-bottom-row > a.fs-line:hover,
    .footer-bottom-row > a.fs-fb:hover,
    .footer-bottom-row > a.fs-ig:hover { opacity:.8; }
    .footer-bottom-row > a.fs-line,
    .footer-bottom-row > a.fs-fb,
    .footer-bottom-row > a.fs-ig   { background:#45A6B7; }
    .footer-bottom-row > a.fs-line svg,
    .footer-bottom-row > a.fs-fb svg,
    .footer-bottom-row > a.fs-ig svg { width:16px; height:16px; }

    .footer-apps { display:none; }
    .footer-app-btn {
      display:inline-flex; align-items:center; gap:7px;
      padding:7px 14px; border-radius:9999px;
      background:transparent; color:#45A6B7;
      border:1.5px solid #45A6B7;
      text-decoration:none; font-size:13px; font-weight:600;
      transition:opacity .2s; white-space:nowrap;
    }
    .footer-app-btn:hover { opacity:.65; }
    .footer-app-btn--white {
      background: #ffffff;
      color: #1F3840;
      border-color: #ffffff;
    }
    .fs-ig + .footer-app-btn--white {
      margin-left: 12px;
    }
    .footer-app-btn svg { width:16px; height:16px; flex-shrink:0; }

    .footer-copy {
      text-align:left; font-size:13px;
      color:rgba(255,255,255,0.45); margin-top:20px;
    }

    /* Footer — full-width body on mobile; reset auto margin on app buttons */
    @media(max-width:768px){
      .footer-body { width: 100%; box-sizing: border-box; }
      .fs-ig + .footer-app-btn { margin-left: 0; }
      /* 社群圖示一排、兩顆商店按鈕固定另起一排並排，不讓 Google Play 被擠到第三行 */
      .footer-bottom-row { row-gap: 12px; }
      .footer-bottom-row::after { content: ""; flex-basis: 100%; order: 1; }
      .footer-bottom-row > .footer-app-btn { order: 2; }
    }

    /* Footer — tighten contact row on very small screens */
    @media(max-width:400px){
      .footer-contact-row { font-size: 13px; gap: 6px; }
      .footer-brand-name { font-size: 16px; }
    }

    /* ═══ 內容頁共用：目前所在頁籤、獨立深色頁尾（首頁的頁尾包在 footer-reveal 的 shader 畫布裡，不走這組） ═══ */
    .nav-pill a.on { color:var(--c8); font-weight:700; }
    .nav-pill a.on::after {
      content:""; position:absolute; left:14px; right:14px; bottom:10px;
      height:2px; border-radius:2px; background:var(--c4);
    }
    footer.v3-footer {
      background:var(--dark); margin-top:72px;
      border-radius:40px 40px 0 0; padding:28px 0 28px;
    }
    /* 版頭是 position:fixed，內容頁主體要自己留出版頭的高度（桌機約 93px、手機約 64px） */
    .v3-main { padding-top:100px; }
    @media(max-width:640px){ .v3-main { padding-top:72px; } }
    /* 回到頂部：捲超過一屏才浮出來 */
    .to-top {
      position:fixed; right:18px; bottom:18px; z-index:90;
      width:44px; height:44px; border-radius:50%;
      border:1px solid var(--line); background:rgba(255,255,255,.88);
      backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
      color:var(--muted); display:grid; place-items:center;
      box-shadow:0 8px 24px -10px rgba(22,37,39,.35); cursor:pointer;
      opacity:0; transform:translateY(12px); pointer-events:none;
      transition:opacity .3s, transform .3s;
    }
    .to-top.show { opacity:1; transform:none; pointer-events:auto; }
    .to-top:hover { color:var(--ink); background:#fff; }
    /* 毛玻璃卡片（內容頁通用） */
    .glass {
      position:relative; background:var(--surface);
      backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
      box-shadow:var(--shadow); border-radius:26px;
    }
    .glass::before {
      content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
      background:var(--border-grad);
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
    }