:root{
  --bg:#000;
  --fg:#fff;
  --fg-2:#9a9a9a;
  --fg-3:#6a6a6a;
  --rule:rgba(255,255,255,.14);
  --line:255,255,255;               /* 球體線條 RGB，canvas 讀這個 */
  --scrim:0,0,0;                    /* 頂部漸層與 nav 毛玻璃底色 */
  --soft:rgba(255,255,255,.04);     /* 次要按鈕底色 */
  --soft-b:rgba(255,255,255,.3);
  --serif:"Noto Serif TC","Songti TC","PMingLiU",serif;
  --sans:"Jost","Futura","Century Gothic","Helvetica Neue",sans-serif;
}
html[data-theme=light]{
  --bg:#EFEEEA;                     /* 乳白帶一點灰 */
  --fg:#161616;
  --fg-2:#6c6b67;
  --fg-3:#9a9994;
  --rule:rgba(0,0,0,.12);
  --line:24,24,24;
  --scrim:239,238,234;
  --soft:rgba(255,255,255,.55);
  --soft-b:rgba(0,0,0,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--serif);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
html[lang=en] body{font-family:var(--sans)}
html[lang=en] .serif-en{font-family:var(--serif)}

/* ---- nav：固定在頂，捲動後變毛玻璃 ---- */
nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;height:76px;padding:0 44px;transition:background .4s,backdrop-filter .4s}
nav.scrolled{background:rgba(var(--scrim),.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.left{display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--fg)}
.brand .zh{font-size:20px;letter-spacing:.18em;font-weight:400}
.brand .en{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.22em;color:var(--fg-2)}
html[lang=en] .brand .zh{font-family:var(--sans);font-size:17px;letter-spacing:.2em}
html[lang=en] .brand .en{font-family:var(--serif);font-size:13px;letter-spacing:.2em}
/* 左下角：主題 icon ＋ 語言 */
.corner{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;gap:10px}
.corner button{width:42px;height:42px;padding:0;background:var(--bg);display:grid;place-items:center;color:var(--fg);cursor:pointer;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.12em}
.corner button:hover{background:var(--fg);color:var(--bg)}
.corner svg{display:block}
.corner .ic-moon{display:none}
html[data-theme=light] .corner .ic-sun{display:none}
html[data-theme=light] .corner .ic-moon{display:block}
.links{display:flex;align-items:center;gap:36px;font-size:14px;letter-spacing:.14em}
html[lang=en] .links{font-family:var(--sans);font-weight:400;letter-spacing:.1em}
.links a{color:var(--fg-2);text-decoration:none;transition:color .3s}
.links a:hover,.links a.on{color:var(--fg)}
.links .pill{padding:9px 20px;color:var(--fg)}

/* ---- 次要按鈕：細邊、微底色、不做玻璃與反光 ---- */
.soft{background:var(--soft);border:1px solid var(--soft-b);border-radius:999px;transition:background .3s,color .3s,border-color .3s}
.soft:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
html[data-theme=light] .soft{box-shadow:0 1px 2px rgba(0,0,0,.05)}

/* ---- hero ---- */
.hero{position:relative;min-height:100svh}                    /* 不裁切：球的下緣可以垂到下一區 */
.stage{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;z-index:1}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.stage::after{content:"";position:absolute;left:0;right:0;top:0;height:170px;background:linear-gradient(rgb(var(--scrim)) 0%,rgba(var(--scrim),.6) 45%,rgba(var(--scrim),0) 100%)}
.copy{position:relative;z-index:2;padding:0 44px 60px;margin-top:0;padding-top:clamp(132px,22vh,226px);max-width:min(680px,54vw)}
h1{margin:0;font-weight:300;font-size:clamp(38px,5.4vw,86px);line-height:1.28;letter-spacing:.06em}
html[lang=en] h1{font-family:var(--sans);font-size:clamp(36px,4.6vw,72px);line-height:1.16;letter-spacing:.01em}
.sub{font-family:var(--sans);font-weight:300;font-size:clamp(14px,1.15vw,18px);letter-spacing:.16em;color:var(--fg-2);margin:26px 0 0}
html[lang=en] .sub{font-family:var(--serif);letter-spacing:.3em}
.cta{display:flex;gap:14px;margin-top:46px;flex-wrap:wrap}
.btn{display:inline-block;font-family:var(--serif);font-size:15px;letter-spacing:.16em;padding:13px 28px 13px 30px;border-radius:999px;text-decoration:none;border:1px solid var(--fg);transition:background .3s,color .3s;cursor:pointer;color:var(--fg);background:none}
html[lang=en] .btn{font-family:var(--sans);font-weight:400;letter-spacing:.08em;padding:13px 26px}
.btn.primary{background:var(--fg);color:var(--bg)}
.btn.primary:hover{background:transparent;color:var(--fg)}
.btn.soft{border-color:var(--soft-b)}
.btn.sm{font-size:13px;padding:10px 20px;white-space:nowrap}
a:focus-visible,button:focus-visible{outline:1px solid var(--fg);outline-offset:4px}

/* 單一進場：文案淡入，球面線條同時浮現，第一條線索接著射出 */
.copy>*{opacity:0;transform:translateY(14px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
html.ready .copy>*{opacity:1;transform:none}
html.ready .copy .sub{transition-delay:.25s}
html.ready .copy .cta{transition-delay:.45s}

/* ---- 各區共用 ---- */
.sec{position:relative;z-index:2;padding:120px 44px;max-width:1180px;scroll-margin-top:0}
.sec+.sec{border-top:1px solid var(--rule)}
.sec>h2{margin:0;font-weight:300;font-size:clamp(30px,3.4vw,46px);line-height:1.25;letter-spacing:.1em}
html[lang=en] .sec>h2{font-family:var(--sans);letter-spacing:.02em}
.sec .lead{margin:22px 0 0;font-size:17px;line-height:1.9;color:var(--fg-2);max-width:640px}
html[lang=en] .sec .lead{line-height:1.7}
.note{margin:14px 0 0;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.06em;color:var(--fg-3)}

/* ---- 服務項目：兩欄，髮線分列 ---- */
.svc{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
.svc li{border-top:1px solid var(--rule);padding:30px 0 34px}
.svc h3{margin:0;font-weight:400;font-size:20px;letter-spacing:.12em}
html[lang=en] .svc h3{letter-spacing:.03em}
.svc p{margin:12px 0 0;font-size:15px;line-height:1.9;color:var(--fg-2);max-width:46ch}
html[lang=en] .svc p{line-height:1.7}
.fees{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--rule);font-size:14px;line-height:1.9;color:var(--fg-2);max-width:72ch}

/* ---- 關於我們 ---- */
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;margin-top:56px;align-items:start}
.stmt{margin:0;font-weight:300;font-size:clamp(24px,2.6vw,36px);line-height:1.6;letter-spacing:.06em}
html[lang=en] .stmt{font-family:var(--sans);letter-spacing:.01em;line-height:1.4}
.stmt span{display:block}
.stmt span+span{margin-top:.5em}
.about-grid h3{margin:0;font-weight:400;font-size:15px;letter-spacing:.2em;color:var(--fg-2)}
html[lang=en] .about-grid h3{letter-spacing:.1em}
.about-grid p{margin:18px 0 0;font-size:15px;line-height:1.9;color:var(--fg-2)}
.about-grid p b{font-weight:400;color:var(--fg)}

/* ---- 洞察：兩個分頁 ---- */
.tabs{display:flex;gap:40px;margin-top:56px;border-bottom:1px solid var(--rule)}
.tab{font-family:inherit;font-size:16px;letter-spacing:.16em;color:var(--fg-2);background:none;border:0;padding:0 0 16px;cursor:pointer;position:relative}
html[lang=en] .tab{font-weight:400;letter-spacing:.1em}
.tab[aria-selected=true]{color:var(--fg)}
.tab[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fg)}
.tab:hover{color:var(--fg)}
.panel[hidden]{display:none}
.panel-title{font-size:13px;letter-spacing:.2em;color:var(--fg-2);margin:36px 0 0}
html.js .panel-title{display:none}
.list{list-style:none;margin:0;padding:0}
.list li{border-bottom:1px solid var(--rule)}
.entry{display:grid;grid-template-columns:150px 1fr;gap:32px;padding:34px 0;scroll-margin-top:96px}
.meta{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.08em;color:var(--fg-2);line-height:1.9}
.meta b{font-weight:400;color:var(--fg)}
.entry h3{margin:0;font-weight:300;font-size:clamp(20px,2vw,26px);line-height:1.5;letter-spacing:.03em}
html[lang=en] .entry h3{font-weight:400;line-height:1.35}
.entry h3 .ttl{all:unset;cursor:pointer;display:inline;font:inherit;color:inherit;letter-spacing:inherit;text-align:left}
.entry h3 .ttl:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.entry h3 .ttl:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.entry h3 .ttl::after{content:"＋";font-family:var(--sans);font-weight:300;font-size:.7em;margin-left:.6em;color:var(--fg-3);vertical-align:.1em}
.entry h3 .ttl[aria-expanded=true]::after{content:"－"}
/* 展開的全文 */
.full{margin-top:34px;padding-top:34px;border-top:1px solid var(--rule);max-width:64ch}
.full[hidden]{display:none}
html:not(.js) .full[hidden]{display:block}
html:not(.js) .fold{display:none}
.art{font-size:16px;line-height:2}
html[lang=en] .art{line-height:1.75}
.art[hidden]{display:none}
.art h4{margin:40px 0 0;font-weight:700;font-size:18px;line-height:1.6;letter-spacing:.08em}
html[lang=en] .art h4{font-weight:600;letter-spacing:.01em}
.art h4:first-child{margin-top:0}
.art p{margin:16px 0 0}
.art ul,.art ol{margin:16px 0 0;padding-left:1.4em}
.art li{margin:8px 0 0}
.art li::marker{color:var(--fg-3)}
.art b{font-weight:700;color:var(--fg)}
html[lang=en] .art b{font-weight:600}
.art .note{margin:20px 0 0;padding:16px 20px;border-left:1px solid var(--soft-b);font-size:14.5px;line-height:1.9;color:var(--fg-2)}
.art .faq{margin-top:44px;padding-top:34px;border-top:1px solid var(--rule)}
.art .faq dl{margin:0}
.art .faq dt{font-weight:700;font-size:16.5px;line-height:1.6;margin-top:26px}
html[lang=en] .art .faq dt{font-weight:600}
.art .faq dd{margin:8px 0 0;color:var(--fg-2);line-height:1.9}
.fold{margin:36px 0 0}
.fold-btn{all:unset;cursor:pointer;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.14em;color:var(--fg-2)}
.art .permalink{margin:36px 0 0;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.14em}
.art .permalink a{color:var(--fg-2);text-decoration:none;border-bottom:1px solid var(--soft-b);padding-bottom:2px}
.art .permalink a:hover{color:var(--fg);border-color:var(--fg)}
.fold-btn:hover{color:var(--fg)}
.fold-btn:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.answer{margin:12px 0 0;font-size:15px;line-height:1.9;color:var(--fg-2);max-width:62ch}
html[lang=en] .answer{line-height:1.7}
.tags{margin:14px 0 0;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.08em;color:var(--fg-2)}
.tags>span>span+span::before{content:"／";margin:0 6px;color:var(--fg-3)}

/* ---- 聯絡我們：三欄 ---- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);margin-top:56px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.way{padding:36px 32px 36px 0}
.way+.way{border-left:1px solid var(--rule);padding-left:32px}
.way h3{margin:0;font-weight:400;font-size:15px;letter-spacing:.2em;color:var(--fg-2)}
html[lang=en] .way h3{letter-spacing:.1em}
.way dl{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:15px;line-height:1.7}
.way dt{color:var(--fg-2);white-space:nowrap}
.way dd{margin:0}
.way p{margin:22px 0 0;font-size:15px;line-height:1.9;color:var(--fg-2);max-width:32ch}
.way .id{margin:22px 0 0;font-family:var(--sans);font-size:20px;letter-spacing:.06em;color:var(--fg)}
.way .id.hold{visibility:hidden}   /* 佔位：讓兩欄的 QR 落在同一條線上 */
.qr-img{width:140px;height:140px;border:0;padding:0;background:#fff;border-radius:6px;display:block;margin-top:20px}
.qr{width:120px;height:120px;border:1px solid var(--rule);margin-top:20px;display:grid;place-items:center;font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--fg-3);text-align:center;padding:8px}
.way .btn{margin-top:22px;font-size:14px;padding:11px 24px}
.way .scan{margin-top:16px;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.06em;color:var(--fg-3);max-width:none}
.promise{margin:40px 0 0;font-size:14px;line-height:1.9;color:var(--fg-2);max-width:62ch}
.contact-cta{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.contact-cta span{font-size:14px;color:var(--fg-2)}

footer{padding:40px 44px 48px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.14em;color:var(--fg-3)}

/* ---- 預約諮詢：彈出表單 ---- */
dialog.book{background:var(--bg);color:var(--fg);border:1px solid var(--soft-b);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto}
dialog.book::backdrop{background:rgba(0,0,0,.6)}
.book-in{padding:40px 44px 44px;position:relative}
.book h2{margin:0;font-weight:300;font-size:26px;letter-spacing:.12em}
html[lang=en] .book h2{font-weight:400;letter-spacing:.04em}
.book .why{margin:14px 0 0;font-size:14px;line-height:1.9;color:var(--fg-2)}
.book .close{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--fg-2);font-family:var(--sans);font-size:13px;letter-spacing:.14em;cursor:pointer;padding:8px}
.book .close:hover{color:var(--fg)}
.line-row{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.line-row p{margin:0;font-size:13px;line-height:1.8;color:var(--fg-2);flex:1}
.book form{margin-top:26px;display:grid;gap:18px}
.book label{display:block;font-size:13px;letter-spacing:.1em;color:var(--fg-2);margin-bottom:8px}
.book input,.book select,.book textarea{width:100%;background:transparent;color:var(--fg);border:0;border-bottom:1px solid var(--soft-b);padding:8px 0;font-family:inherit;font-size:15px;font-weight:300;border-radius:0}
.book select{appearance:none;background:transparent}
.book select option{background:var(--bg);color:var(--fg)}
.book textarea{min-height:88px;resize:vertical}
.book input:focus,.book select:focus,.book textarea:focus{outline:0;border-bottom-color:var(--fg)}
.book .hint{margin:6px 0 0;font-size:12px;line-height:1.7;color:var(--fg-3)}
.book .reply{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.book .reply-fields{display:grid;gap:18px;margin-top:18px}
.book .reply-fields:not(:has(.rf:not([hidden]))){display:none}
.book .reply-fields .rf[hidden]{display:none}
.book .reply label{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--fg);letter-spacing:.04em}
.book input[type=radio],.book input[type=checkbox]{width:auto;accent-color:var(--fg);margin:0}
.book .agree{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.7;color:var(--fg-2)}
.book .agree label{margin:0;color:var(--fg-2);letter-spacing:.02em}
.book .actions{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.book .actions small{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--fg-3)}
.book .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book .fail{display:none;margin:0;font-size:13px;line-height:1.8;color:var(--fg)}
.book.failed .fail{display:block}
.book button[disabled]{opacity:.45;pointer-events:none}
.book .done{display:none;margin-top:26px;font-size:15px;line-height:1.9}
.book.sent form,.book.sent .line-row{display:none}
.book.sent .done{display:block}

@media (max-width:900px){
  nav{padding:0 22px;height:64px}
  .left{gap:14px}
  .corner{right:14px;bottom:14px}
  .links{gap:18px;font-size:13px}
  .links a:not(.pill):not(.mob){display:none}
  .copy{padding:0 22px 40px;padding-top:110px;max-width:100%}
  h1{font-size:clamp(36px,10vw,56px)}
  html[lang=en] h1{font-size:clamp(32px,8.6vw,48px)}
  .sec{padding:72px 22px}
  .svc{grid-template-columns:1fr;column-gap:0}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .tabs{gap:28px;margin-top:40px}
  .sec{scroll-margin-top:16px}
  .entry{grid-template-columns:1fr;gap:10px;padding:28px 0;scroll-margin-top:80px}
  .ways{grid-template-columns:1fr}
  .way{padding:30px 0}
  .way+.way{border-left:0;border-top:1px solid var(--rule);padding-left:0}
  .way .id.hold{display:none}
  .book-in{padding:30px 22px 32px}
  .line-row{flex-direction:column;align-items:flex-start}
  footer{padding:32px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .copy>*{transition:none;opacity:1;transform:none}
}