/* HU3C 形象頁:深色場景 + CSS 3D 線框球 + Canvas 粒子與水面。
   刻意不用 three.js —— 那包壓縮後還有六百多 KB,客人多半用手機而且常常是舊機,
   純 CSS 3D + Canvas 2D 做得到八成的視覺,首屏卻只有幾十 KB。
   (這段仍是手機與跑不動 WebGPU 那條路的長相;桌機另外載 sea/ 的即時海洋當背景) */
/* 夕陽西下:天空從天頂的暮紫燒到地平線的橘紅,水面反射它。
   品牌綠只留給 HU3C 的字與 CTA —— 橘紅底上的綠是互補色,反而更跳 */
:root{
  --bg:#0d0916; --bg2:#1a1030; --ink:#f6efe6; --muted:#b39a92;
  --brand:#16a34a; --glow:#3ddc97; --line:rgba(255,190,150,.22);
  --sun:#ff9b45;
}
/* 天空只鋪到地平線(水面畫布從 34% 高的位置往下接手) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#0d0916 0%,#180f2c 26%,#3a1a3a 46%,#7a2f26 58%,
    #b8481e 64%,#d9631f 66%,transparent 66.4%)}
/* 落在地平線上的太陽:壓在球體後面當逆光 */
body::after{content:"";position:fixed;left:50%;top:66%;z-index:-1;pointer-events:none;
  width:min(60vh,52vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#ffe2b0 0%,#ffb063 20%,rgba(255,130,60,.42) 40%,
    rgba(255,110,50,.12) 60%,transparent 72%)}
@media(min-width:1081px){body::after{left:59%}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  line-height:1.8;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}

/* 場景畫布固定在最底層,整頁共用。水面另外一張(WebGL),粒子那張是 2D */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#water{position:fixed;left:0;right:0;bottom:0;width:100%;height:34%;z-index:0;pointer-events:none;
  display:none}
#water.on{display:block}

/* ---------- 開場 ---------- */
.bl{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;
  justify-content:center;transition:opacity .7s ease,visibility .7s}
.bl.done{opacity:0;visibility:hidden}
.bl-in{width:min(420px,78vw);text-align:center}
.bl-logo{font-size:38px;font-weight:800;letter-spacing:.06em;color:var(--ink);
  text-shadow:0 0 26px rgba(61,220,151,.45)}
.bl-logo b{color:var(--glow)}
.bl-tt{font-size:12.5px;letter-spacing:.34em;color:var(--muted);margin:10px 0 26px}
.bl-bar{height:2px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden}
.bl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--glow));
  box-shadow:0 0 12px rgba(61,220,151,.8);transition:width .3s ease}
.bl-n{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.2em;
  color:var(--muted);margin:10px 0 0;font-variant-numeric:tabular-nums}
.bl-n .bl-s{opacity:.7}

/* ---------- 章節導覽 ---------- */
.bn{position:fixed;left:34px;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:20px}
.bn a{display:block;padding-left:16px;position:relative;opacity:.42;transition:opacity .25s}
.bn a::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
  background:var(--muted);transition:background .25s,box-shadow .25s,transform .25s}
.bn a b{display:block;font-size:13.5px;font-weight:700;letter-spacing:.14em}
.bn a span{display:block;font-size:10px;letter-spacing:.26em;color:var(--muted)}
.bn a.on{opacity:1}
/* opacity:.42 會把焦點框一起壓淡,鍵盤使用者看不出自己停在哪一節 */
.bn a:focus-visible{opacity:1;outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}
.bn a.on::before{background:var(--glow);box-shadow:0 0 10px var(--glow);transform:scale(1.25)}
@media(max-width:1080px){.bn{display:none}}

/* ---------- 頁首 ---------- */
.bh{position:fixed;top:0;left:0;right:0;z-index:45;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px clamp(18px,4vw,42px);
  background:linear-gradient(180deg,rgba(7,11,10,.86),transparent)}
.bh-logo{display:flex;align-items:center;gap:12px}
.bh-logo .mk{font-size:21px;font-weight:800;letter-spacing:.04em}
.bh-logo .mk b{color:var(--glow)}
.bh-logo .tx{font-size:13.5px;font-weight:700;line-height:1.35;
  border-left:1px solid var(--line);padding-left:12px}
.bh-logo .tx small{display:block;font-size:9.5px;letter-spacing:.2em;color:var(--muted);font-weight:600}
.bh-go{font-size:13px;font-weight:700;letter-spacing:.06em;border:1px solid var(--line);
  border-radius:999px;padding:9px 18px;transition:border-color .2s,color .2s,background .2s}
.bh-go i{font-style:normal;margin-left:6px}
.bh-go:hover{border-color:var(--glow);color:var(--glow);background:rgba(61,220,151,.07)}
@media(max-width:640px){.bh-logo .tx{display:none}}

/* ---------- 區塊 ---------- */
main{position:relative;z-index:10}
.bs{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:110px clamp(20px,6vw,84px) 90px}
.bw{width:min(1080px,100%);margin:0 auto}
.eb{font-size:11.5px;font-weight:700;letter-spacing:.3em;color:var(--glow);margin:0 0 14px}
h1{font-size:clamp(34px,7vw,74px);line-height:1.1;font-weight:850;letter-spacing:-.02em;margin:0}
h1 em{font-style:normal;color:var(--glow);text-shadow:0 0 40px rgba(61,220,151,.35)}
/* 形象頁開場打的是品牌,不是價格 */
h1 .wm{display:block;font-size:clamp(72px,15vw,196px);line-height:.9;letter-spacing:-.045em;
  font-weight:850;text-shadow:0 0 70px rgba(61,220,151,.26)}
h1 .wm em{text-shadow:0 0 56px rgba(61,220,151,.6)}
h1 .sub{display:block;font-size:clamp(12.5px,1.8vw,18px);font-weight:700;letter-spacing:.2em;
  color:var(--ink);opacity:.82;margin-top:16px}
h2{font-size:clamp(24px,4.2vw,44px);line-height:1.24;font-weight:800;letter-spacing:-.01em;margin:0 0 18px}
h2 em{font-style:normal;color:var(--glow)}
.ld{font-size:clamp(14.5px,1.7vw,17px);color:var(--muted);margin:20px 0 0;max-width:46ch}

/* 序章 */
/* .orb 是滿版方塊,≥1081px 被 translateX(9%) 推出去會讓整頁多 130px 可捲寬度 */
.bs-open{align-items:center;overflow:hidden}
.bo{position:relative;z-index:3;width:min(1080px,100%);margin:0 auto}
.ba{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.bb{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
  padding:14px 26px;border-radius:999px;border:1.5px solid transparent;transition:transform .18s,box-shadow .25s,background .2s,color .2s,border-color .2s}
.bb:hover{transform:translateY(-2px)}
.bb-line{background:#06c755;color:#fff;box-shadow:0 14px 34px -14px rgba(6,199,85,.75)}
.bb-line:hover{background:#05b04b;box-shadow:0 18px 42px -14px rgba(6,199,85,.9)}
.bb-gh,.bb-tel{border-color:var(--line);color:var(--ink)}
.bb-gh:hover,.bb-tel:hover{border-color:var(--glow);color:var(--glow);background:rgba(61,220,151,.07)}

/* 線框球:一組經線 div 繞 Y 軸各轉一角度,一組緯線用縮放的圓 */
.orb{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.orb-in{position:relative;width:min(60vh,58vw);aspect-ratio:1;transform-style:preserve-3d;
  animation:orb-spin 34s linear infinite}
.orb-in i,.orb-in u{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line);
  box-shadow:0 0 22px rgba(61,220,151,.07) inset}
.orb-in i{transform:rotateY(var(--r))}
.orb-in u{transform:rotateX(90deg) translateZ(calc(var(--y) * -1)) scale(var(--s));
  border-color:rgba(120,200,165,.16)}
.orb-glow{position:absolute;width:min(66vh,64vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,170,90,.20),rgba(255,130,60,.06) 42%,transparent 66%);
  filter:blur(6px)}
@keyframes orb-spin{to{transform:rotateY(360deg)}}
@media(max-width:860px){.orb-in{width:74vw}.orb{opacity:.55}}

/* 這行字正好壓在水面上,水一有粼光就吃掉字。給它一層深色暈開的陰影當底 */
.scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);text-align:center;
  z-index:3;color:var(--muted);text-shadow:0 2px 16px rgba(3,9,7,.95),0 0 5px rgba(3,9,7,.85)}
.scroll span{display:block;font-size:12px;letter-spacing:.28em}
.scroll small{display:block;font-size:9.5px;letter-spacing:.3em;opacity:.6;margin-top:2px}
.scroll i{display:block;width:1px;height:44px;margin:10px auto 0;
  background:linear-gradient(var(--glow),transparent);animation:sc 2.1s ease-in-out infinite}
@keyframes sc{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* 數字 */
.ng{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:860px){.ng{grid-template-columns:repeat(2,1fr)}}
.ng article{border:1px solid var(--line);border-radius:14px;padding:22px 20px 20px;
  background:linear-gradient(160deg,rgba(61,220,151,.07),rgba(255,255,255,.015));
  transition:transform .25s,border-color .25s,box-shadow .25s}
.ng article:hover{transform:translateY(-4px);border-color:rgba(61,220,151,.42);
  box-shadow:0 22px 46px -26px rgba(61,220,151,.5)}
.ng b{display:block;font-size:clamp(38px,5.4vw,58px);font-weight:850;line-height:1;
  color:var(--glow);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ng span{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--ink);margin-top:6px}
.ng p{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.75}

/* 服務 */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:860px){.sg{grid-template-columns:1fr}}
.sc{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 24px;background:linear-gradient(165deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s}
.sc::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(61,220,151,.16),transparent 62%)}
.sc:hover{transform:translateY(-6px);border-color:rgba(61,220,151,.45);
  box-shadow:0 30px 60px -34px rgba(61,220,151,.55)}
.sc:hover::after{opacity:1}
.sc .no{position:relative;z-index:1;font-size:12px;font-weight:800;letter-spacing:.24em;color:var(--glow)}
.sc h3{position:relative;z-index:1;font-size:21px;font-weight:800;margin:12px 0 10px}
.sc p{position:relative;z-index:1;font-size:14px;color:var(--muted);margin:0 0 18px;line-height:1.85}
.sc em{position:relative;z-index:1;font-style:normal;font-size:13px;font-weight:800;color:var(--glow)}

/* 聯絡 */
.bs-cta{text-align:center}
.bs-cta .ld,.bs-cta .ba{margin-left:auto;margin-right:auto}
.bs-cta .ba{justify-content:center}
.addr{font-size:13px;color:var(--muted);margin:24px 0 0}
.back{display:inline-block;margin-top:26px;font-size:13.5px;font-weight:700;
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .2s,border-color .2s}
.back:hover{color:var(--glow);border-color:var(--glow)}

/* 章節導覽在的時候,內容要讓出左邊那一條,不然標題會壓過去。
   這段必須擺在 .bs 的 padding 簡寫之後,不然會被它蓋掉 */
@media(min-width:1081px){
  .bs{padding-left:196px}
  .orb{transform:translateX(9%)}
}

/* 即時海洋接手整頁背景。跑不動的機器(手機、沒 WebGPU、reduced-motion)拿不到 html.sea,
   維持上面那套純 CSS 夕陽場景 —— 兩邊都是同一片黃昏海,只差真假 */
.sea-bg{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:0;
  pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.sea-bg.on{opacity:1}
html.sea body::before,html.sea body::after{display:none}
/* 暗紗是貼視窗量的,不是貼頁面。.bs 置中讓四節文案的中線恆在視窗 50% 上下,
   所以最厚的一段要壓在中間那一帶,亮的留給上緣的夕陽帶與下緣的近景浪 */
html.sea main::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(20,10,16,.50) 0%,
    rgba(20,10,16,.40) 20%,
    rgba(20,10,16,.76) 36%,
    rgba(20,10,16,.76) 74%,
    rgba(20,10,16,.38) 100%)}
/* 粼光會動,沒有局部底的小字會隨浪一閃一閃地消失 —— .scroll 當年就是為這個加的陰影 */
html.sea .ld,html.sea .addr,html.sea .ng p,html.sea .ng span,
html.sea .sc p,html.sea .sc .no,html.sea .back{
  text-shadow:0 1px 12px rgba(3,9,7,.92),0 0 4px rgba(3,9,7,.8)}
/* 這兩個是 11.5-13px 加寬字距的細綠字,暈太開會糊 */
html.sea .eb,html.sea .sc em{text-shadow:0 1px 8px rgba(3,9,7,.92)}
/* 七張卡在會動的海上完全沒有自己的底,內文等於直接坐在浪上 */
html.sea .ng article,html.sea .sc{
  background:linear-gradient(160deg,rgba(9,14,20,.58),rgba(9,14,20,.44))}
html.sea .sc::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
  rgba(61,220,151,.10),transparent 62%)}
/* --line 在亮水面上只剩 1.3:1,而那圈線是「這是按鈕」的唯一訊號。
   不要改 --line 本身 —— 它最大的用戶是 .orb-in 那顆線框球,一改整顆會亮兩倍 */
html.sea .bb-gh,html.sea .bb-tel{border-color:rgba(255,205,170,.5);background:rgba(9,14,20,.5)}
/* 導覽本來就刻意淡,但壓在粼光走廊上會掉到 1.2:1。靠陰影救,opacity 只微調 */
html.sea .bn a{opacity:.6;text-shadow:0 2px 14px rgba(3,9,7,.96),0 0 6px rgba(3,9,7,.9)}
html.sea .bn a span{color:#d8c6bd}

/* 進場 */
[data-rv]{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.3,1) var(--d,0s)}
[data-rv].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .orb-in{animation:none}
  .scroll i{animation:none}
  [data-rv]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}