/* =========================================================
   Viper Studio - Cleaned & Reordered CSS
   - Ordered by HTML structure
   - Removed conflicting / duplicated definitions
   ========================================================= */

/* ----------------------------
   0) Base / Tokens
----------------------------- */
:root {
  --bg0: #05060a;
  --bg1: #070a12;
  --fg: #e9f2ff;
  --muted: #a9b6d6;

  /* 文字三階層級（取代原本散落的 13 種透明度） */
  --text-1: rgba(233, 242, 255, .94); /* 標題 */
  --text-2: rgba(233, 242, 255, .72); /* 內文 */
  --text-3: rgba(233, 242, 255, .50); /* meta / 註解 */
  --line: rgba(120, 180, 255, .18);
  --glass: rgba(12, 16, 30, .58);

  /* 配色收斂：aqua 為全站唯一重點色，blue 僅用於 hover / 連結。
     violet / magenta 已退役，保留別名避免舊樣式失效。 */
  --n1: #4fffd4; /* aqua  — accent */
  --n2: #67b7ff; /* blue  — hover / link */
  --n3: var(--n2);
  --n4: var(--n1);
  --warn: #ff4a4a;

  /* 圓角：只留兩級 + 膠囊，避免 10/12/14/16/18px 混用 */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* 表面層級（取代到處硬寫的 rgba(12,16,30,.55)） */
  --surface-1: rgba(13, 18, 32, .52);
  --surface-2: rgba(16, 22, 38, .72);
  --surface-3: rgba(20, 27, 46, .86);

  /* 邊框三階：專業感來自細線的層次，而不是發光 */
  --border-subtle: rgba(130, 170, 230, .10);
  --border: rgba(130, 170, 230, .16);
  --border-strong: rgba(130, 170, 230, .28);

  /* 字級階梯（modular scale，取代散落的 12/14/16/22px） */
  --step-eyebrow: 12px;
  --step--1: clamp(12.5px, .8vw, 13.5px);
  --step-0: clamp(15px, .95vw, 16px);
  --step-1: clamp(17px, 1.15vw, 19px);
  --step-2: clamp(20px, 1.5vw, 23px);
  --step-3: clamp(27px, 2.5vw, 38px);
  --step-4: clamp(34px, 4.2vw, 54px);

  /* 垂直節奏 */
  --space-section: clamp(64px, 7vw, 108px);
  --space-head: clamp(26px, 3vw, 40px);
  --gap-cards: clamp(16px, 1.7vw, 24px);
  --shadow: 0 18px 60px rgba(0, 0, 0, .55);
  --shadow2: 0 10px 30px rgba(0, 0, 0, .45);

  --circuit-trace: rgba(120, 180, 255, .10);
  --circuit-node: rgba(79, 255, 212, .12);
  --circuit-glow: rgba(79, 255, 212, .22);
  --circuit-speed: 13s;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: var(--font-source-han), var(--font-rounded), "PingFang TC", "Microsoft JhengHei", sans-serif;
  --rounded: var(--font-rounded), var(--font-source-han), "PingFang TC", sans-serif;
}

/* 文字反白（選取）顏色：避免在深色/發光背景上看不清楚 */
::selection {
  background: rgba(79, 255, 212, 0.35);
  color: var(--text-1);
}
::-moz-selection {
  background: rgba(79, 255, 212, 0.35);
  color: var(--text-1);
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  position: relative;
  font-family: var(--sans);
  color: var(--fg);
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(103, 183, 255, .10), transparent 60%),
    radial-gradient(900px 520px at 12% 60%, rgba(79, 255, 212, .08), transparent 55%),
    #070A12;
  overflow-x: hidden;
}
/* ----------------------------
   0.1) Body background overlays
   - Keep BOTH layers (static traces + animated current)
----------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Layer 1: static traces */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%2380B4FF' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M18 42h84v46h64v-22h44v80h-52v46h86'/%3E%3Cpath d='M40 210h92v-54h42v94h68'/%3E%3Cpath d='M250 44v68h-62v34h-78'/%3E%3Cpath d='M64 296v-58h58v-46h46'/%3E%3C/g%3E%3Cg fill='%234FFFD4' fill-opacity='.20'%3E%3Ccircle cx='18' cy='42' r='3'/%3E%3Ccircle cx='102' cy='42' r='3'/%3E%3Ccircle cx='102' cy='88' r='3'/%3E%3Ccircle cx='166' cy='88' r='3'/%3E%3Ccircle cx='210' cy='66' r='3'/%3E%3Ccircle cx='210' cy='146' r='3'/%3E%3Ccircle cx='158' cy='156' r='3'/%3E%3Ccircle cx='40' cy='210' r='3'/%3E%3Ccircle cx='132' cy='156' r='3'/%3E%3Ccircle cx='250' cy='112' r='3'/%3E%3Ccircle cx='64' cy='296' r='3'/%3E%3C/g%3E%3C/svg%3E");

  background-size: 420px 420px;
  background-repeat: repeat;
  background-position: 0 0;

  opacity: .11;
  mix-blend-mode: screen;
  filter: blur(0);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Layer 2: animated current */
  background-image:
    radial-gradient(14px 220px at 20% 10%, var(--circuit-glow), transparent 60%),
    radial-gradient(16px 260px at 70% 30%, rgba(103,183,255,.18), transparent 62%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(79,255,212,.22) 20%,
      transparent 45%,
      rgba(103,183,255,.18) 65%,
      transparent 100%);

  background-size: 520px 520px, 640px 640px, 1200px 100%;
  background-repeat: repeat;
  background-position: 0 0, 120px 220px, 0 0;

  opacity: .10;
  mix-blend-mode: screen;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M18 42h84v46h64v-22h44v80h-52v46h86'/%3E%3Cpath d='M40 210h92v-54h42v94h68'/%3E%3Cpath d='M250 44v68h-62v34h-78'/%3E%3Cpath d='M64 296v-58h58v-46h46'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-size: 420px 420px;
  -webkit-mask-repeat: repeat;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23fff' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M18 42h84v46h64v-22h44v80h-52v46h86'/%3E%3Cpath d='M40 210h92v-54h42v94h68'/%3E%3Cpath d='M250 44v68h-62v34h-78'/%3E%3Cpath d='M64 296v-58h58v-46h46'/%3E%3C/g%3E%3C/svg%3E");
  mask-size: 420px 420px;
  mask-repeat: repeat;

  animation: circuit-flow var(--circuit-speed) linear infinite;
}

@keyframes circuit-flow {
  0%   { background-position: 0 0, 120px 220px, -1200px 0; }
  100% { background-position: 420px 420px, 540px 640px, 1200px 0; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; opacity: .30; }
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--fg);
  background:
    /* 光源集中在版面頂部：往下捲動時背景自然沉靜下來 */
    radial-gradient(1100px 760px at 22% 2%, rgba(103, 183, 255, .10), transparent 58%),
    radial-gradient(820px 620px at 78% 10%, rgba(79, 255, 212, .075), transparent 58%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(1180px, calc(100% - 48px));
  /* Tailwind 掃到 HTML 裡的 class="container" 之後，會自動生成同名 utility：
     .container{width:100%} 加上各斷點的 max-width（640/768/1024/1280/1536）。
     它只設 max-width，不會被上面的 width 蓋掉，結果在 1024~1279px（iPad 橫向 1194px）
     容器被硬壓成 1024px —— 導覽列擠到換行、團隊卡片被壓窄到徽章跟著換行。
     這行是用來取消那個上限，本站容器一律以上面的 width 為準。 */
  max-width: none;
  margin: 0 auto;
}

/* .container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
} */

/* ----------------------------
   1) Circuit Background (SVG)
   (fixed, behind all content)
----------------------------- */
#circuit-bg {
  /* 刻意用 absolute 而非 fixed：
     fixed 會讓電路層永遠黏在螢幕上，捲到哪裡都在搶注意力。
     改成隨頁面捲走後，特效只存在於第一屏，往下閱讀時背景是安靜的深色。 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(1040px, 116vh);
  z-index: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;

  /* 下緣柔化，避免電路層出現一條水平截斷線 */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 46%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0, #000 46%, transparent 94%);
}

/* Make sure all content is above the SVG background */
header,
main,
section,
footer {
  position: relative;
  z-index: 1;
}

#circuit-bg .trace path {
  fill: none;
  stroke: rgba(120, 180, 255, .12);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#circuit-bg .nodes circle {
  fill: rgba(79, 255, 212, .14);
}

#circuit-bg .pulse path {
  fill: none;
  stroke: rgba(79, 255, 212, .75);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80 260;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(79, 255, 212, .35)) drop-shadow(0 0 18px rgba(79, 255, 212, .18));
}

@keyframes pulse-run {
  0% { stroke-dashoffset: 0; opacity: 0; }
  10% { opacity: .85; }
  55% { opacity: .75; }
  80% { opacity: 0; }
  100% { stroke-dashoffset: -520; opacity: 0; }
}

/* 原本 5 條脈衝同時跑 = 視覺雜訊。
   收斂成 2 條並錯開時間，讓「有東西在動」成為點綴而非干擾。 */
#circuit-bg .p1 { animation: pulse-run 6.5s linear infinite; animation-delay: .4s; }
#circuit-bg .p3 { animation: pulse-run 7.5s linear infinite; animation-delay: 3.6s; }
#circuit-bg .p2,
#circuit-bg .p4,
#circuit-bg .p5 { display: none; }

@media (prefers-reduced-motion: reduce) {
  #circuit-bg .pulse path { animation: none; opacity: .18; }
}

/* ----------------------------
   2) Global overlays (noise / grid / scanlines)
----------------------------- */
.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.grid {
  pointer-events: none;
  /* 與 #circuit-bg 一致：隨頁面捲走，不要整站都蓋著格線 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(1040px, 116vh);
  background:
    linear-gradient(to right, rgba(103, 183, 255, .08) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(to bottom, rgba(79, 255, 212, .06) 1px, transparent 1px) 0 0 / 72px 72px;
  mask-image: radial-gradient(560px 340px at 50% 26%, black 38%, transparent 76%);
  opacity: .28;
}

/* 掃描線預設停用（GlobalOverlays 已移除該層）；要復原時把 display 拿掉即可 */
.scanlines {
  display: none;
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, .05) 0px,
      rgba(255, 255, 255, .05) 1px,
      transparent 2px,
      transparent 6px);
  opacity: .14;
  mix-blend-mode: overlay;
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(-12px); }
  100% { transform: translateY(12px); }
}

/* ----------------------------
   3) Header / Navbar
----------------------------- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(5, 6, 10, .55);
  border-bottom: 1px solid rgba(120, 180, 255, .12);

  transition: background .25s ease, border-color .25s ease;
}

/* 捲離第一屏後收緊：底色加深、內距縮小，把空間還給內容 */
header.is-scrolled {
  background: rgba(5, 6, 10, .88);
  border-bottom-color: var(--border);
}

header.is-scrolled .nav { padding: 9px 0; }

header.is-scrolled .brand-badge {
  width: 40px;
  height: 40px;
}

.nav,
.brand-badge {
  transition: padding .25s ease, width .25s ease, height .25s ease;
}

/* 目前所在區塊：底線常駐，不用 hover 也看得出來 */
.nav-links a.is-active {
  color: var(--text-1);
}

.nav-links a.is-active::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  header, .nav, .brand-badge { transition: none; }
}

body {
  padding-top: 72px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, rgba(79, 255, 212, .55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(103, 183, 255, .55), transparent 55%),
    linear-gradient(135deg, rgba(103, 183, 255, .20), rgba(0, 0, 0, 0));
  border: 1px solid rgba(120, 180, 255, .25);
  box-shadow: 0 0 0 1px rgba(79, 255, 212, .12) inset, 0 12px 30px rgba(0, 0, 0, .45);
  position: relative;
  overflow: hidden;
}

.brand-badge::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(79, 255, 212, .8), transparent, rgba(103, 183, 255, .75), transparent);
  animation: spin 7s linear infinite;
  opacity: .55;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.brand-title { line-height: 1.05; }

.brand-title strong {
  display: block;
  letter-spacing: .08em;
  font-weight: 800;
  text-transform: uppercase;
}

.brand-title span {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}

nav a {
  font-size: 14px;
  color: var(--text-2);
  padding: 10px 10px;
  border-radius: 12px;
  transition: .25s ease;
  position: relative;
}

nav a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 255, 212, .7), rgba(103, 183, 255, .7), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
  opacity: .9;
}

nav a:hover {
  background: rgba(120, 180, 255, .08);
  color: var(--text-1);
}

nav a:hover::after { transform: scaleX(1); }

.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
}

/* 861~970: keep navbar single row, compact */
@media (max-width: 970px) and (min-width: 861px) {
  .nav { flex-wrap: nowrap; gap: 12px; }

  .brand { min-width: 0; flex: 0 1 320px; }

  .brand-title strong { font-size: 15px; letter-spacing: .06em; }

  .brand-title span {
    display: block;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 22ch;
  }

  .nav-links { flex: 0 1 420px; min-width: 0; }

  .nav-links ul {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
  }

  nav a { font-size: 13px; padding: 8px 8px; white-space: nowrap; }

  .nav-cta { min-width: 0; flex: 0 0 auto; gap: 8px; }

  .nav-cta .btn { padding: 9px 10px; font-size: 13px; white-space: nowrap; }

  .nav-cta .btn:first-child {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 861~1120: 導覽列項目變多之後，這個區間放不下「電話 + 預約洽談」兩顆。
   電話在抽屜與頁尾都還有，這裡只留主要 CTA，避免和選單重疊。 */
@media (max-width: 1120px) and (min-width: 861px) {
  .nav-cta .btn:not(.primary) { display: none; }

  .nav-links ul { gap: 10px; }

  nav a { font-size: 13px; padding: 8px 6px; white-space: nowrap; }

  .brand { min-width: 0; }
}

@media (max-width: 900px) and (min-width: 861px) {
  .nav-cta .btn:first-child { max-width: 180px; }
  .nav-links { padding-right: 18px; }
  .nav-cta { margin-left: 10px; }
  .nav-links ul { justify-content: center; padding-left: 10px; }
}

/* ----------------------------
   3.1) Buttons / Common UI atoms
----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-1);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  background: var(--surface-2);
}

.btn.primary {
  /* 主要按鈕：實色重點，而不是一團光暈 */
  border-color: transparent;
  background: linear-gradient(180deg, #5ef0cb, #34d3ab);
  color: #04120e;
  font-weight: 650;
}

.btn.primary .dot {
  background: #04120e;
  box-shadow: none;
  opacity: .55;
}

.btn.primary:hover {
  background: linear-gradient(180deg, #74f7d6, #43ddb6);
  box-shadow: 0 12px 32px rgba(79, 255, 212, .22);
}

.btn .dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--n1);
  box-shadow: 0 0 16px rgba(79, 255, 212, .8);
}

.glow {
  background: linear-gradient(92deg, #e9f2ff 0%, #e9f2ff 34%, var(--n1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(79, 255, 212, .12));
}

/* ----------------------------
   3.2) Mobile drawer (CSS-only)
----------------------------- */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* 手機選單（components/sections/MobileDrawer.tsx）
   由上而下：品牌列 → 大字選單（中英標籤、箭頭）→ 固定在底部的聯絡區 */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(88vw, 380px);
  padding: 18px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;

  background:
    radial-gradient(120% 60% at 100% 0%, rgba(79, 255, 212, .10), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(103, 183, 255, .08), transparent 60%),
    rgba(6, 8, 13, .94);
  backdrop-filter: blur(18px);
  border-left: 1px solid rgba(120, 180, 255, .14);
  box-shadow: -24px 0 70px rgba(0, 0, 0, .6);
  z-index: 120;

  transform: translateX(110%);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);

  display: flex;
  flex-direction: column;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  z-index: 110;

  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

#nav-toggle:checked ~ .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

#nav-toggle:checked ~ .nav-drawer {
  transform: translateX(0);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(120, 180, 255, .10);
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.drawer-brand .brand-badge { width: 42px; height: 42px; border-radius: 12px; }
.drawer-brand .brand-title strong { font-size: 15px; letter-spacing: .1em; }
.drawer-brand .brand-title span { font-size: 10.5px; margin-top: 4px; }

/* 關閉鈕：用兩條線畫出 ×，取代原本的 emoji */
.drawer-close {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(120, 180, 255, .18);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.drawer-close span::before,
.drawer-close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text-1);
}

.drawer-close span::before { transform: translate(-50%, -50%) rotate(45deg); }
.drawer-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }

.drawer-close:hover {
  border-color: rgba(79, 255, 212, .5);
  background: rgba(79, 255, 212, .08);
  transform: rotate(90deg);
}

/* 小標：MENU / CONTACT */
.drawer-eyebrow {
  margin: 22px 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-3);
}

.drawer-nav { display: grid; }

.drawer-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(120, 180, 255, .08);
  color: var(--text-1);
  transition: color .2s ease, padding .2s ease;
}

.drawer-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.drawer-label {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .02em;
}

.drawer-en {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.drawer-arrow {
  font-size: 18px;
  color: var(--text-3);
  transition: transform .2s ease, color .2s ease;
}

.drawer-link:hover,
.drawer-link:focus-visible {
  padding-left: 10px;
  outline: none;
}

.drawer-link:hover .drawer-arrow,
.drawer-link:focus-visible .drawer-arrow {
  color: var(--n1);
  transform: translateX(3px);
}

/* 目前所在頁面：主題色＋左側亮條 */
.drawer-link.is-current {
  position: relative;
  color: var(--n1);
}

.drawer-link.is-current::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  width: 3px;
  height: 26px;
  border-radius: 0 3px 3px 0;
  background: var(--n1);
  box-shadow: 0 0 12px rgba(79, 255, 212, .6);
  transform: translateY(-50%);
}

.drawer-link.is-current .drawer-arrow { color: var(--n1); }

/* 打開選單時，項目由上而下依序滑入 */
#nav-toggle:checked ~ .nav-drawer .drawer-link {
  animation: drawerIn .42s cubic-bezier(.22, .61, .36, 1) both;
}

#nav-toggle:checked ~ .nav-drawer .drawer-link:nth-child(1) { animation-delay: .08s; }
#nav-toggle:checked ~ .nav-drawer .drawer-link:nth-child(2) { animation-delay: .13s; }
#nav-toggle:checked ~ .nav-drawer .drawer-link:nth-child(3) { animation-delay: .18s; }
#nav-toggle:checked ~ .nav-drawer .drawer-link:nth-child(4) { animation-delay: .23s; }
#nav-toggle:checked ~ .nav-drawer .drawer-link:nth-child(5) { animation-delay: .28s; }

@keyframes drawerIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

/* 聯絡區固定在選單底部，拇指範圍內 */
.drawer-cta {
  margin-top: auto;
  padding-top: 8px;
}

.drawer-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.drawer-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, .14);
  background: rgba(255, 255, 255, .03);
  color: var(--text-1);
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease;
}

.drawer-quick-btn svg { font-size: 18px; color: var(--n1); }

.drawer-quick-btn:hover {
  border-color: rgba(79, 255, 212, .45);
  background: rgba(79, 255, 212, .06);
}

.drawer-main {
  width: 100%;
  justify-content: center;
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 15px;
}

.drawer-close:focus-visible,
.drawer-quick-btn:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer { transition: none; }
  #nav-toggle:checked ~ .nav-drawer .drawer-link { animation: none; }
  .drawer-close:hover { transform: none; }
}

/* Desktop defaults */
.nav-links { display: block; }
.nav-cta { display: flex; }
.nav-burger { display: none; }

/* Mobile: show burger, hide links/cta */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: grid; }

  .brand { min-width: 0; }
  .brand-title span {
    display: block;
    font-size: 11px;
    color: var(--text-2);
    margin-top: 4px;
  }

  .nav { justify-content: space-between; }
  .nav-burger { order: 2; }
  .brand { order: 1; }
}

/* 手機：導覽列收窄，把垂直空間還給內容。
   高度 = 上下內距 8px × 2 + 40px 的 logo / 選單鈕 = 56px；
   下面 body 的 padding-top 要跟著這個數字，sian.module.css 的 --bar-h 也是 */
@media (max-width: 860px) {
  body { padding-top: 56px; }

  .nav,
  header.is-scrolled .nav { padding: 8px 0; gap: 12px; }

  .brand { gap: 10px; }

  .brand-badge,
  header.is-scrolled .brand-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .brand-title strong { font-size: 14px; letter-spacing: .07em; }

  .brand-title span {
    font-size: 10.5px;
    margin-top: 3px;
  }

  /* 選單鈕的手機尺寸寫在更下面（Burger 區塊之後），放這裡會被後面的基本樣式蓋掉 */
}

/* Burger (logo-mini skin) */
.nav-burger {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 999px;

  background:
    radial-gradient(22px 18px at 32% 28%, rgba(79, 255, 212, .18), transparent 70%),
    radial-gradient(28px 22px at 78% 35%, rgba(103, 183, 255, .12), transparent 72%),
    linear-gradient(180deg, rgba(12, 16, 30, .70), rgba(7, 10, 18, .55));
  border: 1px solid rgba(120, 180, 255, .18);

  box-shadow: 0 0 0 1px rgba(79, 255, 212, .10) inset, 0 14px 40px rgba(0, 0, 0, .50);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  position: relative;
  overflow: hidden;
  place-items: center;

  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}

.nav-burger:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 255, 212, .55);
  box-shadow: 0 0 0 1px rgba(79, 255, 212, .16) inset, 0 18px 55px rgba(0, 0, 0, .58);
}

.nav-burger:active { transform: translateY(0) scale(.98); }

.nav-burger::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .06) 0px,
    rgba(255, 255, 255, .06) 1px,
    transparent 2px,
    transparent 6px
  );
  opacity: .10;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nav-burger::before {
  content: "";
  position: absolute;
  inset: -18px;
  background: radial-gradient(circle, rgba(79, 255, 212, .18), transparent 62%);
  filter: blur(10px);
  opacity: .70;
  animation: snakeGlow 2.8s ease-in-out infinite;
  pointer-events: none;
}

.burger-lines {
  display: grid;
  gap: 6px;
}

.burger-lines span {
  width: 26px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--n1), var(--n2));
  box-shadow: 0 0 10px rgba(79, 255, 212, .55);
}

#nav-toggle:checked ~ header .burger-lines span {
  background: linear-gradient(90deg, var(--n1), var(--n2));
  box-shadow: 0 0 10px rgba(79, 255, 212, .5);
}

@keyframes snakeGlow {
  0%, 100% { opacity: .45; transform: scale(.98); }
  50% { opacity: .80; transform: scale(1.03); }
}

.snake-badge {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;

  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(120, 180, 255, .22);

  box-shadow: 0 0 0 1px rgba(79, 255, 212, .10) inset, 0 8px 18px rgba(0, 0, 0, .35);

  display: grid;
  place-items: center;
}

.snake-badge img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  filter: contrast(1.10) saturate(1.12) drop-shadow(0 0 10px rgba(79, 255, 212, .18));
}

.snake-badge::after {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(79, 255, 212, .22), rgba(103, 183, 255, .14), transparent 65%);
  transform: rotate(12deg) translateX(-55%);
  opacity: 0;
  animation: sheenMini 4.6s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes sheenMini {
  0% { transform: rotate(12deg) translateX(-55%); opacity: 0; }
  12% { opacity: .55; }
  40% { opacity: .25; }
  55% { opacity: 0; }
  100% { transform: rotate(12deg) translateX(55%); opacity: 0; }
}

#nav-toggle:checked ~ header .nav-burger {
  border-color: rgba(103, 183, 255, .70);
  filter: saturate(1.06);
}

/* 手機：選單鈕縮小。要排在上面 Burger 的基本樣式之後才蓋得過去 */
@media (max-width: 860px) {
  .nav-burger {
    width: 34px;
    height: 34px;
  }

  .burger-lines { gap: 4px; }
  .burger-lines span { width: 18px; }
}

@media (max-width: 480px) {
  .nav-burger {
    position: fixed;
    right: 14px;
    /* 手機導覽列高 56px、選單鈕 34px：(56 - 34) / 2 = 11px 才會垂直置中 */
    top: 11px;
    z-index: 130;
  }
}

/* ----------------------------
   3.9) Scroll reveal（捲動進場）

   初始隱藏刻意寫在 .js-reveal 底下：這個 class 由 ScrollReveal 元件
   掛載後才加到 <html>，所以 JS 沒跑起來時內容照樣看得到，不會變空白頁。
----------------------------- */
.js-reveal .will-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js-reveal .will-reveal.is-visible {
  opacity: 1;
  transform: none;
  /* 收尾慢、起手快的曲線，看起來是「就定位」而不是「飛進來」 */
  transition:
    opacity .62s cubic-bezier(.16, 1, .3, 1),
    transform .62s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .will-reveal,
  .js-reveal .will-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------
   4) Main layout + Sections (shared)
----------------------------- */

/* 錨點捲動補償：
   頁首是 position: fixed（約 72px），沒有這個的話點導覽列跳到 #work / #team
   時，該段的標題會剛好躲在頁首底下，看起來像「跳錯地方」。 */
section[id],
[id="contact"] {
  scroll-margin-top: clamp(88px, 9vw, 104px);
}

section {
  /* 只給上內距：section 之間的呼吸由下一段的上內距統一決定，節奏才會一致 */
  padding: var(--space-section) 0 0;
  position: relative;
}



.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--space-head);
}

/* 每個章節以一條 hairline 起頭 —— 細線比發光更能表達專業 */
section[id] > .section-head {
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--border-subtle);
}

.section-head h2 {
  margin: 0;
  font-family: var(--rounded);
  font-size: clamp(2rem, 2.5vw, 2.7rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
}


.section-head p {
  margin: 10px 0 0;
  color: var(--text-2);
  max-width: 54ch;
  line-height: 1.75;
  font-size: var(--step-0);
}

/* 右側 CTA 不要被標題的 baseline 拉歪 */
.section-head > .btn { flex: none; align-self: flex-end; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

.card {
  position: relative;
  border-radius: var(--radius);
  background: var(--surface-1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    /* 單一頂光取代三色光暈：卡片不再自己發光，文字才站得出來 */
    linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 44%),
    radial-gradient(320px 220px at 18% 10%, rgba(79, 255, 212, .10), transparent 62%);
  opacity: .9;
  pointer-events: none;
}

/* 原本的直條紋 overlay 已移除：它讓卡片自己變成圖案，文字反而退到後面 */

.card:hover {
  /* 只做細微位移 + 邊框提亮，不做 3D 翻轉 */
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}

.card .inner {
  position: relative;
  padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.6vw, 24px);
  display: grid;
  gap: 12px;
}

.card .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chip {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-2);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
}

.chip-ghost {
  opacity: .86;
  border-color: rgba(120, 180, 255, .12);
  background: rgba(12, 16, 30, .42);
}

/* 原本是一顆藍綠漸層光澤球，質感偏玩具。
   改成細框標記 + 中央小點，維持「刻意的裝飾」而不是一個空盒。 */
.icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
}

.icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: var(--radius-pill);
  background: var(--n1);
  opacity: .5;
}

/* 流程卡片已經有 iconify 圖示，右側再放一個標記只是重複 */
/* ----------------------------
   7.5) Why us (#why)

   可點選的優勢面板：左側選項、右側展開細節。
   讓訪客挑自己在意的那一點看，而不是讀一整面文字牆。
----------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(16px, 1.8vw, 28px);
  align-items: start;
}

/* --- 左側選項 --- */
.why-list {
  display: grid;
  gap: 8px;
}

.why-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;

  padding: 16px 18px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-1);

  color: var(--text-2);
  font-family: inherit;
  font-size: var(--step-0);
  text-align: left;
  cursor: pointer;

  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.why-tab:hover { border-color: var(--border); background: var(--surface-2); }

.why-tab:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

.why-tab.is-active {
  border-color: rgba(79, 255, 212, .34);
  background: var(--surface-3);
  color: var(--text-1);
}

.why-tab-no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-3);
  transition: color .2s ease;
}

.why-tab.is-active .why-tab-no { color: var(--n1); }

.why-tab-title { font-weight: 550; }

.why-tab-arrow {
  font-size: 16px;
  opacity: 0;
  transform: translateX(-4px);
  color: var(--n1);
  transition: opacity .2s ease, transform .2s ease;
}

.why-tab.is-active .why-tab-arrow { opacity: 1; transform: translateX(0); }

/* --- 右側面板 --- */
.why-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;

  padding: clamp(22px, 2.2vw, 34px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);

  animation: why-in .3s ease both;
}

@keyframes why-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 面板標頭：左邊圖示，右邊標題與副標兩行 */
.why-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.why-panel-head-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.why-panel-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--n1);
  font-size: 24px;
}

.why-panel-title {
  margin: 0;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.why-panel-lead {
  margin: 0;
  color: var(--text-1);
  font-size: var(--step-0);
  line-height: 1.7;
  font-weight: 500;
}

.why-panel-detail {
  margin: 0;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.85;
}

.why-panel-tags {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.why-tag {
  padding: 5px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* 「你會得到」：整段的結論，給它明確的視覺重量 */
.why-outcome {
  margin-top: 6px;
  padding: 16px 18px;

  border-left: 2px solid rgba(79, 255, 212, .55);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(79, 255, 212, .05);
}

.why-outcome-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--n1);
}

.why-outcome-text {
  margin: 0;
  color: var(--text-1);
  font-size: var(--step-0);
  line-height: 1.7;
}

/* --- 手機／平板：手風琴 ---
   桌機的「左選項、右面板」在窄螢幕會變成選項全部疊在上面、面板掉到最下面，
   點了選項卻看不到內容在哪裡變。窄螢幕改成手風琴：
   每一項自己帶一句摘要，點了就在正下方展開細節。 */
.why-accordion {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.why-acc {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  transition: border-color .2s ease, background .2s ease;
}

.why-acc.is-open {
  border-color: rgba(79, 255, 212, .34);
  background: var(--surface-2);
}

.why-acc-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  width: 100%;
  padding: 16px 14px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.why-acc-head:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

.why-acc-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 20px;
  transition: color .2s ease, border-color .2s ease;
}

.why-acc.is-open .why-acc-icon {
  color: var(--n1);
  border-color: rgba(79, 255, 212, .3);
}

.why-acc-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.why-acc-no {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
}

.why-acc.is-open .why-acc-no { color: var(--n1); }

.why-acc-title {
  color: var(--text-1);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.why-acc-lead {
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1.65;
}

.why-acc-chevron {
  margin-top: 8px;
  font-size: 22px;
  color: var(--text-3);
  transition: transform .25s ease, color .2s ease;
}

.why-acc.is-open .why-acc-chevron {
  transform: rotate(180deg);
  color: var(--n1);
}

/* 0fr → 1fr 讓高度可以做過場，不用寫死 max-height */
.why-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.why-acc.is-open .why-acc-body { grid-template-rows: 1fr; }

.why-acc-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 0 14px;
}

.why-acc.is-open .why-acc-inner { padding-bottom: 16px; }

.why-acc-inner .why-panel-detail { font-size: .92rem; }
.why-acc-inner .why-outcome { margin-top: 0; padding: 14px; }
.why-acc-inner .why-outcome-text { font-size: .96rem; }
.why-acc-inner .why-panel-tags { margin: 0; }

@media (max-width: 900px) {
  .why-grid { display: none; }
  .why-accordion { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .why-panel { animation: none; }
  .why-tab, .why-tab-arrow, .why-tab-no { transition: none; }
  .why-acc, .why-acc-icon, .why-acc-chevron, .why-acc-body { transition: none; }
}

/* ----------------------------
   7.7) Services (#services)

   四個群組，三／四欄都排得整齊（原本 7 張卡會變成 3-3-1 落單）。
   每張卡是「一句定位 + 清單」而非敘述段落，才不會變成文字牆。
----------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-cards);
  counter-reset: svc;
}

.svc {
  position: relative;
  overflow: hidden;
  counter-increment: svc;

  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: clamp(20px, 1.9vw, 26px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);

  transition: border-color .2s ease, background .2s ease;
}

/* 卡片上緣一條主題色漸層細線，四張卡看起來是同一組 */
.svc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--n1), var(--n2), transparent 85%);
  opacity: .7;
}

/* 右上角淡淡的大編號 01～04，順序由 CSS counter 自動產生 */
.svc::after {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: 10px;
  right: 16px;

  font-family: var(--mono);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(120, 180, 255, .08);
  pointer-events: none;
}

.svc:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.svc-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.svc-icon {
  flex: none;
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(79, 255, 212, .22);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(circle at 30% 25%, rgba(79, 255, 212, .22), transparent 65%),
    var(--surface-2);
  box-shadow: 0 0 18px rgba(79, 255, 212, .10);
  color: var(--n1);
  font-size: 21px;
}

.svc-title { min-width: 0; }

.svc-title h3 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

/* 英文副標：建立節奏，也讓卡片頭部有兩層資訊而不是單薄一行 */
.svc-en {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
  text-transform: uppercase;
}

.svc-lead {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);

  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

.svc-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.svc-items li {
  position: relative;
  padding-left: 16px;

  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.55;
}

.svc-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .58em;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .55);
}

/* 結尾那一行（取代原本佔一整張卡的「更多可能的資訊服務」） */
.svc-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 32px);
  flex-wrap: wrap;

  margin-top: var(--gap-cards);
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 28px);

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.svc-more p {
  margin: 0;
  flex: 1 1 420px;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.75;
}

.svc-more strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text-1);
  font-size: var(--step-0);
  font-weight: 600;
}

.svc-more .btn { flex: none; }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }

  /* 平板與手機：項目改成依文字長短排列的小標籤（一行放得下幾個就放幾個），
     每個標籤不會從中間斷行，比一整排條列好掃讀、也比較短 */
  .svc-lead {
    color: var(--n1);
    font-weight: 500;
  }

  .svc-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .svc-items li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px 7px 8px;

    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);

    color: var(--text-1);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .svc-items li::before {
    content: "✓";
    position: static;
    flex: none;
    width: 16px;
    height: 16px;

    display: grid;
    place-items: center;

    border-radius: 50%;
    background: rgba(79, 255, 212, .14);
    color: var(--n1);
    font-size: 10px;
    font-weight: 700;
  }
}

@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-more .btn { width: 100%; }

  .svc { padding: 20px 16px 18px; gap: 14px; }
  .svc::after { display: none; }

  .svc-icon { width: 46px; height: 46px; font-size: 22px; }
  .svc-title h3 { font-size: 19px; }

  .svc-lead { font-size: 14px; padding-bottom: 14px; }

  /* 手機：卡片太窄，標籤大多一行只放得下一個、會參差不齊，
     改成對齊的勾選清單，每行一項，左邊的勾勾上下對成一直線 */
  .svc-items {
    display: grid;
    gap: 2px;
  }

  .svc-items li {
    display: flex;
    gap: 10px;
    padding: 7px 0;

    border: 0;
    border-radius: 0;
    background: none;

    font-size: 14px;
    white-space: normal;
  }

  .svc-items li + li { border-top: 1px dashed rgba(120, 180, 255, .10); }

  .svc-items li::before { width: 18px; height: 18px; font-size: 10.5px; }
}

/* ----------------------------
   7.8) Pricing (#pricing)
----------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: clamp(22px, 2.2vw, 30px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.plan.is-featured {
  border: 4px solid rgba(79, 255, 212, .55);

  background:
    linear-gradient(
      180deg,
      rgba(79, 255, 212, .065),
      rgba(79, 255, 212, .025)
    );

  box-shadow:
    inset 0 0 0 1px rgba(79, 255, 212, .035),
    0 0 18px rgba(79, 255, 212, .10),
    0 0 42px rgba(79, 255, 212, .045);

  animation: planFeaturedGlow 1s ease-in-out infinite;
}

@keyframes planFeaturedGlow {
  0%,
  100% {
    border-color: rgba(79, 255, 212, .42);

    box-shadow:
      inset 0 0 0 1px rgba(79, 255, 212, .025),
      0 0 14px rgba(79, 255, 212, .07),
      0 0 34px rgba(79, 255, 212, .03);
  }

  50% {
    border-color: rgba(79, 255, 212, .68);

    box-shadow:
      inset 0 0 0 1px rgba(79, 255, 212, .055),
      0 0 22px rgba(79, 255, 212, .14),
      0 0 48px rgba(79, 255, 212, .06);
  }
}

.plan.is-featured::before {
  content: "";

  position: absolute;
  top: -1px;
  left: 14%;
  right: 14%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(79, 255, 212, .85),
      transparent
    );

  box-shadow:
    0 0 12px rgba(79, 255, 212, .40);

  pointer-events: none;
}


.plan.is-secondary {
  border: 2px solid rgba(15, 118, 209, 0.645);

  background:
    linear-gradient(
      180deg,
      rgba(103, 183, 255, .032),
      rgba(103, 183, 255, .012)
    );

  box-shadow:
    inset 0 0 0 1px rgba(103, 183, 255, .018),
    0 0 16px rgba(103, 183, 255, .035);
}

.plan.is-secondary::before {
  content: "";

  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(103, 183, 255, .52),
      transparent
    );

  box-shadow:
    0 0 9px rgba(103, 183, 255, .20);

  pointer-events: none;
}

/* 非主推方案用低調的描邊徽章，主推方案才用實色——
   三個都實色的話就失去引導作用了 */
.plan-flag {
  position: absolute;
  top: -10px;
  left: clamp(22px, 2.2vw, 30px);

  padding: 4px 10px;

  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-2);

  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
}

.plan-flag.is-featured {
  border-color: transparent;
  background: linear-gradient(180deg, #5ef0cb, #34d3ab);
  color: #04120e;
  font-weight: 650;
}

.plan-name {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.plan-audience {
  margin: 0;
  color: var(--text-3);
  font-size: var(--step--1);
  line-height: 1.7;
  min-height: 3.4em;
}

.plan-price {
  margin: 10px 0 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;

  font-family: var(--mono);
  color: var(--n1);
}

.plan-price-cur { font-size: 15px; opacity: .8; }

.plan-price-num {
  font-size: clamp(27px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.plan-price-unit,
.plan-price-tbd {
  font-size: 15px;
  color: var(--text-2);
}

.plan-price-tbd {
  font-size: clamp(22px, 2vw, 27px);
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.plan-price-note {
  margin: 0;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.6;
}

.plan-timeline {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 12px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);

  font-size: var(--step--1);
  color: var(--text-1);
}

.plan-timeline-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-3);
}

.plan-includes {
  list-style: none;
  margin: 12px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border-subtle);

  display: grid;
  gap: 9px;
  flex: 1;
}

.plan-includes li {
  position: relative;
  padding-left: 20px;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.65;
}

.plan-includes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .6);
}

.plan-cta { margin-top: 18px; width: 100%; }

/* 所有方案共通的保障：電腦版（861px 以上）一排四個，平板與手機兩個一排（2 × 2） */
.plan-common {
  list-style: none;
  margin: var(--gap-cards) 0 0;
  padding: 18px 22px;

  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: space-evenly;
  gap: 12px 26px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.plan-common li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  font-size: var(--step--1);
  white-space: nowrap;
}

.plan-common-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .14);
  color: var(--n1);
  font-size: 12px;
}

/* 較窄的電腦視窗：維持一排四個，字和間距收小一點才排得下 */
@media (max-width: 1100px) and (min-width: 861px) {
  .plan-common {
    gap: 12px 14px;
    padding: 16px 14px;
  }

  .plan-common li {
    gap: 8px;
    font-size: 13px;
  }
}

/* 兩個一排時，欄寬跟著文字走、剩下的空間平均分到兩側，
   整組才會看起來在框的正中間（用 1fr 等分的話文字全擠在每欄左邊） */
@media (max-width: 860px) {
  .plan-common {
    grid-template-columns: repeat(2, auto);
    justify-content: space-evenly;
  }
}

/* 手機：兩個一排，勾勾和文字在同一行、不換行。
   最長的一項有 11 個字，字級跟著螢幕寬度縮放，360px 寬的手機也排得下 */
@media (max-width: 640px) {
  .plan-common {
    gap: 10px 6px;
    padding: 12px 8px;
  }

  .plan-common li {
    min-width: 0;
    gap: 5px;
    font-size: clamp(11px, 3.1vw, 13px);
    white-space: nowrap;
  }

  .plan-common-check {
    width: 16px;
    height: 16px;
    font-size: 10px;
  }
}

/* 比 360px 還窄的手機實在排不下，允許換行，避免文字超出框外 */
@media (max-width: 359px) {
  .plan-common li { white-space: normal; }
}

/* 從別頁用 /pricing#plan-basic 這類連結跳到某張方案卡時，
   預留固定導覽列的高度，卡片上緣才不會被蓋住 */
.plan[id] { scroll-margin-top: clamp(88px, 9vw, 104px); }

/* 方案卡：721px 以上維持三張一排。
   861~1100 每張卡只剩約 260~330px，內距、間距和字收小一點才不會擠 */
@media (max-width: 1100px) and (min-width: 721px) {
  .plans { gap: 16px; }
  .plan { padding: 22px 20px; }
  .plan-flag { left: 20px; }
  .plan-includes li { font-size: 13px; }
}

/* 721~860：每張卡只剩約 215~260px，再收一級 */
@media (max-width: 860px) and (min-width: 721px) {
  .plans { gap: 12px; }
  .plan { padding: 20px 14px; }
  .plan-flag { left: 14px; }
  .plan-name { font-size: 16px; }
  .plan-audience { font-size: 12.5px; min-height: 0; }
  .plan-price-num { font-size: 24px; }
  .plan-price-note { font-size: 11.5px; }
  .plan-timeline { flex-wrap: wrap; gap: 4px 8px; padding: 8px 10px; font-size: 12.5px; }
  .plan-includes li { font-size: 12.5px; padding-left: 16px; }
}

/* 720px 以下：方案卡改成橫向滑動，一次看一張、左右滑換下一張。
   - 每張佔 85% 寬，露出隔壁卡片的邊，讓人知道可以滑
   - 捲動區往左右延伸到螢幕邊緣（抵銷 .container 兩側各 24px 的留白）
   - 上下留內距：overflow 會裁掉超出的部分，不留的話卡片上緣的標籤和發光會被切掉
   圓點與「最多人選擇」預設置中由 components/ui/SwipeDots.tsx 負責；
   服務案例卡（.work-cards）用同一套做法，寫在 Work 區塊後面 */
@media (max-width: 720px) {
  /* 卡片寬度用螢幕寬（捲動區已延伸到螢幕兩側），左右留白 = (100vw - 卡片寬) / 2，
     第一張和最後一張也能捲到正中間；原本留白只有 24px，頭尾兩張會偏左／偏右 */
  .plans {
    --swipe-card: 84vw;
    /* 卡片位置（offsetLeft）以捲動區為基準，置中的計算才會準 */
    position: relative;

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--swipe-card);
    gap: 14px;

    margin: 0 -24px;
    padding: 16px calc((100vw - var(--swipe-card)) / 2) 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* 瀏覽器只負責上下捲動頁面；左右滑、吸附到卡片中間都由 components/ui/SwipeDots.tsx 處理，
       一次只移動一張。不另外開 scroll-snap，兩套機制會互相拉扯造成「彈一下」 */
    touch-action: pan-y;
  }

  .plans::-webkit-scrollbar { display: none; }


  .plan-audience { min-height: 0; }
  .plan-flag { left: auto; right: clamp(22px, 2.2vw, 30px); }
}

/* 圓點：只有手機版橫向滑動時才出現，置中（components/ui/SwipeDots.tsx） */
.swipe-dots { display: none; }

@media (max-width: 720px) {
  .swipe-dots {
    display: flex;
    justify-content: center;
    margin-top: 2px;
  }

  .swipe-dots-list {
    display: flex;
    gap: 8px;
  }

  .swipe-dot {
    width: 8px;
    height: 8px;
    padding: 0;

    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
  }

  .swipe-dot.is-active {
    width: 24px;
    background: var(--n1);
  }

  .swipe-dot:focus-visible {
    outline: 2px solid var(--n1);
    outline-offset: 2px;
  }
}

/* ----------------------------
   8) Process (#process) — 時間軸
----------------------------- */
.timeline {
  list-style: none;
  padding: 0;

  /* 置中於版面，左右留白對稱，整條軸線看起來是刻意擺放而不是靠邊。
     寬度收窄到 560px：內文是靠左排的，太寬時右半邊是空的，
     軸線看起來就會偏左。 */
  max-width: 560px;
  margin-inline: auto;
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding-bottom: clamp(26px, 3vw, 40px);
}

.timeline-step:last-child { padding-bottom: 0; }

/* 連接線：由本節點往下連到下一個節點。
   用 ::before 逐段繪製，卡片高度不一也不會對不齊。 */
.timeline-step::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 56px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(79, 255, 212, .34),
    var(--border-subtle) 72%);
}

.timeline-step:last-child::before { display: none; }

/* 階段列（釐清 / 打造 / 維運）：把 7 步分成 3 組好記。
   自成一列，第一欄讓軸線穿過，標籤放在第二欄，線就不會被切斷。 */
.timeline-phase-row {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  align-items: center;
  padding: 4px 0 18px;
}

.timeline-phase-row::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-subtle);
}

.timeline-phase-row:first-child { padding-top: 0; }
.timeline-phase-row:first-child::before { top: 50%; }

.timeline-phase {
  grid-column: 2;
  justify-self: start;

  padding: 5px 12px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-2);

  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--text-3);
}



.timeline-marker {
  position: relative;
  z-index: 1;

  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--n1);

  transition: border-color .2s ease, transform .2s ease;
}

.timeline-step:hover .timeline-marker {
  border-color: rgba(79, 255, 212, .42);
  transform: translateY(-1px);
}

.timeline-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.timeline-body { padding-top: 4px; }

.timeline-eyebrow {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: .16em;
}

.timeline-no { color: var(--n1); opacity: .9; }
.timeline-of { color: var(--text-3); letter-spacing: .06em; }

.timeline-title {
  margin: 0 0 8px;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.timeline-desc {
  margin: 0;
  color: var(--text-2);
  font-size: var(--step-0);
  line-height: 1.75;
  max-width: 62ch;
}

@media (max-width: 640px) {
  .timeline-step {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }

  .timeline-step::before,
  .timeline-phase-row::before {
    left: 21px;
  }

  .timeline-step::before { top: 48px; }

  .timeline-phase-row {
    grid-template-columns: 44px 1fr;
    gap: 14px;
  }

  .timeline-marker { width: 44px; height: 44px; }
  .timeline-icon { font-size: 20px; width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-marker { transition: none; }
}

.card h3 {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.card p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--step-0);
  line-height: 1.75;
}

/* ----------------------------
   5) Hero
----------------------------- */
.hero {
  position: relative;

  /* hero 不吃 section 的統一上內距：
     頁首已經是 fixed 且 body 有 72px 的 padding-top，
     再加一段 section 間距會讓第一屏上方空掉一大塊。 */
  padding: clamp(10px, 1.4vw, 20px) 0 0;

  z-index: 0;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -60px -20px auto -20px;
  height: 420px;
  background:
    linear-gradient(90deg, transparent, rgba(79, 255, 212, .12), rgba(103, 183, 255, .10), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 10px);
  transform: skewY(-6deg);
  opacity: .26;
  filter: blur(.2px);
  animation: drift 9s ease-in-out infinite alternate;
  mask-image: radial-gradient(580px 320px at 45% 45%, black 48%, transparent 80%);
}

@keyframes drift {
  0% { transform: translateX(-2%) skewY(-6deg); }
  100% { transform: translateX(2%) skewY(-6deg); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 26px;
  align-items: center;
}

.hero-copy {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.hero-line {
  display: block;
  width: 100%;
  white-space: normal;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.hero-line--lead,
.hero-line--tail {
  font-size: clamp(1.1rem, 2vw, 2.3rem);
  text-align: left;
}

.hero-line--main {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  text-align: center;
  padding-block: 0.3rem;
}

.hero-line--tail {
  text-align: right;
}

.hero-action-btn {
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  padding-inline: 0.75rem;
  font-size: clamp(0.7rem, 1.2vw, 1rem);
}

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.kicker .pulse {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--n1);
  box-shadow: 0 0 18px rgba(79, 255, 212, .95);
  position: relative;
}

.kicker .col{
  color: rgba(79, 255, 212, .95);
  font-size: 15px;
}

.kicker .pulse::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 99px;
  border: 1px solid rgba(79, 255, 212, .55);
  opacity: 0;
  animation: ping 1.8s ease-out infinite;
}

@keyframes ping {
  0% { transform: scale(.45); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: scale(1.7); opacity: 0; }
}

h1 {
  margin: 0 0 14px;
  font-family: var(--rounded);
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.sub {
  margin: 0 0 22px;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.8;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

/* ----------------------------
   5.1) Hero 窄螢幕修正

   h1 的三行都帶 whitespace-nowrap，在窄螢幕會被撐出畫面；
   body 又是 overflow-x: hidden，結果不是捲動而是直接被裁掉。
   這裡讓字級隨視窗寬度縮放，保留原本左/中/右錯落的排版意圖。
   （選擇器特異度高於 Tailwind 的 .text-2xl 等工具類，不需 !important）
----------------------------- */
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-copy {
    gap: 0.25rem;
  }

  .hero-line--main {
    padding-block: 0.15rem;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    gap: 0.15rem;
  }

  .hero-line--lead,
  .hero-line--tail {
    font-size: clamp(1rem, 5vw, 1.6rem);
    line-height: 1.25;
  }

  .hero-line--main {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
    line-height: 1.12;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-action-btn {
    width: 100%;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 0.8rem;
  }

  .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .section-head > .btn {
    width: 100%;
    justify-content: center;
  }

  .section-head p {
    font-size: 0.96rem;
    line-height: 1.7;
  }

  .section-head h2 {
    font-size: clamp(1.8rem, 8vw, 2.2rem);
  }

  .svc-grid,
  .work-cards {
    gap: 14px;
  }

  .svc-more {
    flex-direction: column;
    align-items: stretch;
  }

  .svc-more p {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
  }

  .svc-more .btn,
  .work-more-btn {
    width: 100%;
    justify-content: center;
  }
}

.micro {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-2);
  font-size: 13px;
  font-family: var(--mono);
}

.micro span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, .16);
  background: rgba(12, 16, 30, .45);
  box-shadow: 0 0 0 1px rgba(79, 255, 212, .06) inset;
}

.micro i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(103, 183, 255, .85);
  box-shadow: 0 0 14px rgba(103, 183, 255, .55);
}

.micro--slogan{
  display: grid;
  gap: 10px;
  padding-left: 14px;
  margin-top: 10px;
  border-left: 1px solid rgba(120, 180, 255, .18);
}

.micro--slogan .micro__line{
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 0;                 /* 取消 chip 感 */
  border: 0;
  background: transparent;
  box-shadow: none;

  font-family: var(--sans);    /* 標語用 sans 更像宣言 */
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-2);
}

.micro--slogan .micro__line i{
  margin-top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(79, 255, 212, .90);
  box-shadow: 0 0 14px rgba(79, 255, 212, .45);
  flex: 0 0 auto;
}

.slogan{
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.slogan__line{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.slogan__mark{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9481ffb5;
  box-shadow: 0 0 14px rgba(79,255,212,.35);
  margin-top: 10px;
  flex: 0 0 auto;
}

.slogan__text{
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-1);
  line-height: 1.9;
  padding-bottom: 6px;
}

/* 能量底線：用「掃過」感但不等於主標題 */
.slogan__text::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: min(42ch, 100%);
  background: linear-gradient(90deg,
    rgba(79,255,212,.0),
    rgba(79,255,212,.70),
    rgba(103,183,255,.45),
    rgba(103,183,255,.0)
  );
  opacity: .75;
  filter: blur(.2px);
}



/* Right panel: holo card */
.holo {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(12, 16, 30, .78), rgba(12, 16, 30, .45));
  border: 1px solid rgba(120, 180, 255, .18);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
  will-change: transform;
}

.holo:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.holo::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg, rgba(79, 255, 212, 0), rgba(79, 255, 212, .28), rgba(103, 183, 255, .18), rgba(79, 255, 212, 0));
  filter: blur(12px);
  opacity: .10;
  animation: spin 16s linear infinite;
}

.holo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(240px 180px at 30% 25%, rgba(79, 255, 212, .10), transparent 60%),
    radial-gradient(240px 180px at 75% 40%, rgba(103, 183, 255, .08), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 12px);
  opacity: .38;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(480px 380px at 50% 40%, black 52%, transparent 85%);
  pointer-events: none;
}

.holo-inner {
  position: relative;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.holo-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 2px;
}

.holo-meta strong {
  font-size: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.holo-meta .tag {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  border: 1px solid rgba(120, 180, 255, .16);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(12, 16, 30, .55);
}

.logo-wrap {
  border-radius: 18px;
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(120, 180, 255, .16);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow2);
  padding: 12px;
}

.logo-wrap img {
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  transition: transform .35s ease;
  filter: saturate(1.06) contrast(1.06);
}

.holo:hover .logo-wrap img { transform: scale(1.05); }

.logo-wrap::after {
  content: "";
  position: absolute;
  inset: -40% -30%;
  background: linear-gradient(120deg, transparent 35%, rgba(79, 255, 212, .26), rgba(103, 183, 255, .20), transparent 65%);
  transform: rotate(12deg) translateX(-30%);
  animation: sheen 4.8s ease-in-out infinite;
  mix-blend-mode: screen;
}


/* ==========================================================
       VPS Showcase (右側正方形輸送帶)
       - 為避免與現有 .hero/.marquee/.grid 等 class 衝突，全部使用 vps- 前綴
       ========================================================== */

    /* 使用輸送帶時，關閉 logo-wrap 原本的 sheen 覆蓋層，避免壓到內容 */
    .vps-host::after { display: none; }

    .vps-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        overflow: hidden;
        background:
            radial-gradient(420px 320px at 30% 20%, rgba(79, 255, 212, .08), transparent 60%),
            radial-gradient(380px 280px at 70% 80%, rgba(103, 183, 255, .10), transparent 62%),
            linear-gradient(180deg, #05060a, #0b111c);
    }

    .vps-stage {
        position: absolute;
        inset: 0;
        perspective: 1200px;
    }

    .vps-stage > .vps-showcase {
        position: absolute;
        left: 55%;
        top: 8%;
        transform-origin: 50% 0%;
        transform:
            translate3d(-30%, -8%, 0)
            scale3d(0.97, 0.90, 1)
            rotateX(15deg)
            rotateY(-9deg)
            rotateZ(32deg);
    }

    .vps-showcase {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 160%;
        height: 190%;
    }

    .vps-col {
        position: relative;
        overflow: hidden;
    }

    .vps-fade-mask::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
            to bottom,
            rgba(5, 6, 10, 0.85) 0%,
            rgba(5, 6, 10, 0.35) 8%,
            rgba(5, 6, 10, 0) 20%,
            rgba(5, 6, 10, 0) 80%,
            rgba(5, 6, 10, 0.35) 92%,
            rgba(5, 6, 10, 0.85) 100%
        );
        z-index: 2;
    }

    .vps-marquee {
        display: flex;
        flex-direction: column;
        gap: 0;                 /* 兩組內容接縫需無額外間距，避免「線」或跳動 */
        height: max-content;    /* 高度跟著內容，讓 translate(-50%) 精準對齊一整組 */
        will-change: transform;
    }

    .vps-group {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    /* 卡片視窗：控制可視高度，超出就裁掉 */
    .vps-group img {
      width: 100%;
      aspect-ratio: 5 / 3;      /* ✅ 300x180 等比（避免寬縮小但高固定） */
      height: auto;
      object-fit: contain;      /* ✅ 不裁切，保留完整畫面 */
      object-position: center;
      display: block;

      border-radius: 0;
      box-shadow: none;
    }

    .vps-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, rgba(255, 255, 255, 0) 40%, rgba(79, 255, 212, 0.08) 50%, rgba(255, 255, 255, 0) 60%),
        radial-gradient(600px 300px at 70% 20%, rgba(103, 183, 255, 0.06), transparent 60%);
      mix-blend-mode: screen;
      opacity: 0.35;
      filter: blur(8px);
      animation: vps-glass-sheen 10s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes vps-glass-sheen {
      0% { transform: translateX(-30%); opacity: 0.35; }
      50% { transform: translateX(0%); opacity: 0.7; }
      100% { transform: translateX(30%); opacity: 0.35; }
    }

    @keyframes vps-scrollDown {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(0, -50%, 0); }
    }

    @keyframes vps-scrollUp {
        0% { transform: translate3d(0, -50%, 0); }
        100% { transform: translate3d(0, 0, 0); }
    }

    .vps-marquee-down { animation: vps-scrollDown 72s linear infinite; }
    .vps-marquee-up   { animation: vps-scrollUp   86s linear infinite; }

    .vps-dur-22 { animation-duration: 32s; }
    .vps-dur-28 { animation-duration: 40s; }
    .vps-dur-32 { animation-duration: 48s; }

    .vps-delay-neg-8  { animation-delay: -8s; }
    .vps-delay-neg-14 { animation-delay: -14s; }

.vps-glass {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            radial-gradient(1000px 600px at 15% 20%, rgba(99, 102, 241, .08), transparent 55%),
            radial-gradient(800px 500px at 85% 60%, rgba(236, 72, 153, .06), transparent 60%);
        mix-blend-mode: multiply;
        opacity: .42;
    }

/* Process icons */
.service-icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(83%) sepia(33%) saturate(749%) hue-rotate(108deg) brightness(104%) contrast(101%);
  opacity: 0.95;
}

	    @media (max-width: 480px) {
	        /* Mobile: 保留 3D 斜角，但用手機專屬參數（更滿版、不會只剩角落） */
	
	        /* 1) 版型：手機版斜角定位 */
	        .vps-stage > .vps-showcase {
	            left: 54%;
	            top: 6%;
	            transform:
	                translate3d(-34%, -10%, 0)
	                scale3d(1.05, 0.98, 1)
	                rotateX(15deg)
	                rotateY(-9deg)
	                rotateZ(30deg);
	        }
	
	        .vps-showcase {
	            width: 175%;
	            height: 205%;
	            grid-template-columns: repeat(3, 1fr);
	            gap: 12px;
	        }

        /* 2) 跑法：手機用較慢、更穩的動畫 */
        @keyframes vps-scrollDown-m {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(0, -50%, 0); }
        }

        @keyframes vps-scrollUp-m {
            0% { transform: translate3d(0, -50%, 0); }
            100% { transform: translate3d(0, 0, 0); }
        }

        .vps-marquee-down { animation-name: vps-scrollDown-m; }
        .vps-marquee-up { animation-name: vps-scrollUp-m; }

        /* 速度也稍微放慢一點（視覺上比較舒服） */
        .vps-dur-22 { animation-duration: 26s; }
        .vps-dur-28 { animation-duration: 34s; }
        .vps-dur-32 { animation-duration: 40s; }

	        /* 3) 尺寸/間距：圖片更密集（間距交給 group 內部控制） */
	        .vps-marquee { gap: 0; }
	        .vps-group { gap: 16px; }
	        .vps-group img { height: auto; }
	    }

    @media (min-width: 481px) and (max-width: 900px) {
        .vps-stage > .vps-showcase {
            transform:
                translate3d(-36%, -4%, 0)
                scale3d(0.93, 0.87, 1)
                rotateX(15deg)
                rotateY(-9deg)
                rotateZ(32deg);
        }
    }




@keyframes sheen {
  0% { transform: rotate(12deg) translateX(-55%); opacity: 0; }
  15% { opacity: .55; }
  45% { opacity: .35; }
  65% { opacity: 0; }
  100% { transform: rotate(12deg) translateX(55%); opacity: 0; }
}

/* Marquee / Tape */
.tape {
  margin-top: 18px;
  border-top: 1px solid rgba(120, 180, 255, .12);
  border-bottom: 1px solid rgba(120, 180, 255, .12);
  background: rgba(12, 16, 30, .35);
  overflow: hidden;
}

.marquee {
  display: flex;
  gap: 26px;
  padding: 12px 0;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  animation: marquee 20s linear infinite;
  opacity: .9;
}

/* 跑馬燈內的指示點：原本每顆都帶 ping 光環，上下兩條共 20+ 顆同時閃，
   是 hero 最主要的視覺雜訊。收斂成靜態小點，讓跑馬燈退回輔助資訊的位置。 */
.marquee .kicker .pulse {
  width: 6px;
  height: 6px;
  background: rgba(79, 255, 212, .62);
  box-shadow: none;
}

.marquee .kicker .pulse::after { display: none; }

.marquee .kicker {
  margin-bottom: 0;
  letter-spacing: .14em;
}

.marquee .kicker .col { font-size: 13px; }

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.marquee b { color: var(--text-1); }

.marquee i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(79, 255, 212, .85);
  box-shadow: 0 0 14px rgba(79, 255, 212, .55);
  display: inline-block;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 手機：軌道寬度改為內容寬，整串文字跑完才循環。
   內容是兩份相同的項目，位移半個軌道再加半個 gap 剛好無縫接回。 */
@media (max-width: 640px) {
  .marquee {
    width: max-content;
    animation: marquee-full 26s linear infinite;
  }

  .marquee .kicker { flex: none; }
}

@keyframes marquee-full {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 13px)); }
}

/* ----------------------------
   6) Services CTA (inside #services)
----------------------------- */
.cta {
  margin-top: 18px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(12, 16, 30, .62), rgba(12, 16, 30, .42));
  border: 1px solid rgba(120, 180, 255, .16);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg, rgba(79, 255, 212, 0), rgba(79, 255, 212, .30), rgba(103, 183, 255, .26), rgba(79, 255, 212, 0));
  filter: blur(18px);
  opacity: .24;
  animation: spin 12s linear infinite;
}

.cta .inner {
  position: relative;
  padding: 20px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cta h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.cta p {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
  max-width: 70ch;
}

/* ----------------------------
   6.5) Trust bar（服務承諾列）

   放在第一屏正下方，讓訪客在往下捲之前就看到可以負責的事實。
   沒有 id，所以不會被 section 自動編號吃到。
----------------------------- */
.trustbar {
  padding: clamp(28px, 3vw, 44px) 0 0;
}

.trustbar-list {
  list-style: none;
  margin: 0;
  padding: clamp(20px, 2.2vw, 30px) clamp(16px, 2vw, 28px);

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.trustbar-item {
  position: relative;
  text-align: center;
}

/* 細線分隔，比外框更輕 */
.trustbar-item + .trustbar-item::before {
  content: "";
  position: absolute;
  left: calc(clamp(16px, 2vw, 28px) / -2);
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64%;
  background: var(--border-subtle);
}

.trustbar-value {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;

  font-family: var(--mono);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--n1);
}

.trustbar-unit {
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .04em;
  color: var(--text-2);
}

.trustbar-label {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

@media (max-width: 760px) {
  .trustbar-list { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }

  /* 兩欄時只保留每列中間那一條分隔線 */
  .trustbar-item + .trustbar-item::before { display: none; }
  .trustbar-item:nth-child(even)::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 64%;
    background: var(--border-subtle);
    display: block;
  }
}

@media (max-width: 440px) {
  .trustbar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    padding: 18px 14px;
  }

  .trustbar-item + .trustbar-item::before {
    display: none;
  }

  .trustbar-item:nth-child(even)::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 64%;
    background: var(--border-subtle);
    display: block;
  }

  .trustbar-value {
    font-size: clamp(22px, 7vw, 30px);
  }

  .svc,
  .work-card,
  .why-panel {
    border-radius: 14px;
  }
}

/* ----------------------------
   7) Work (Portfolio)

   設計重點：作品截圖是主角；文字分三層（主標 / 副標 / 敘述）；
   敘述固定三行讓三張卡等高，視線可以橫向比較。
----------------------------- */
.work-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

/* 篩選列（案例少於 4 件時元件端不會渲染） */
.work-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--gap-cards);
}

.work-filter-btn {
  padding: 8px 16px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-1);

  color: var(--text-2);
  font-family: inherit;
  font-size: var(--step--1);
  cursor: pointer;

  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.work-filter-btn:hover {
  border-color: var(--border);
  background: var(--surface-2);
}

.work-filter-btn:focus-visible { outline: 2px solid var(--n1); outline-offset: 2px; }

.work-filter-btn.is-active {
  border-color: transparent;
  background: linear-gradient(180deg, #5ef0cb, #34d3ab);
  color: #04120e;
  font-weight: 600;
}

/* 篩選列上方的說明 */
.work-filter-title {
  margin: 0 0 14px;
  color: var(--text-1);
  font-size: var(--step-0);
  font-weight: 600;
}

/* 按鈕右邊的件數 */
.work-filter-count {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 11px;
  opacity: .6;
}

.work-filter-btn { position: relative; white-space: nowrap; }

/* 按鈕是 label，裡面藏著單選鈕（服務案例頁的純 CSS 篩選）：
   單選鈕看不見但還能用鍵盤操作，選到的按鈕亮起來 */
.work-filter-btn:has(> .work-filter-input:checked) {
  border-color: transparent;
  background: linear-gradient(180deg, #5ef0cb, #34d3ab);
  color: #04120e;
  font-weight: 600;
}

.work-filter-btn:has(> .work-filter-input:focus-visible) {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

.work-filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* 手機版：按鈕列不換行，改成左右滑動，延伸到螢幕兩側 */
@media (max-width: 720px) {
  .work-filter {
    flex-wrap: nowrap;
    margin: 0 -24px 4px;
    padding: 2px 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .work-filter::-webkit-scrollbar { display: none; }

  .work-filter-btn {
    flex: none;
    padding: 7px 14px;
  }
}

/* 產業 · 年份 */
.work-meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;

  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--text-3);
}

.work-meta-dot { opacity: .5; }

.work-card {
  display: flex;
  flex-direction: column;

  position: relative;
  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);
  box-shadow: var(--shadow2);

  color: inherit;
  text-decoration: none;

  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.work-card.is-link { cursor: pointer; }

.work-card.is-link:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .5);
}

.work-card.is-link:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 3px;
}

/* --- 圖 --- */
.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(0, 0, 0, .3);
  border-bottom: 1px solid var(--border-subtle);
}

.work-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s ease;
}

.work-card.is-link:hover .work-media img { transform: scale(1.04); }

/* 底部微暗，讓分類標籤在任何截圖上都讀得到 */
.work-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 10, .72));
}

.work-category {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;

  padding: 6px 12px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: rgba(8, 11, 20, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--text-1);
}

/* --- 文字 --- */
.work-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: clamp(18px, 1.6vw, 24px);
}

.work-title {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.work-subtitle {
  display: block;
  margin-top: 5px;
  font-size: var(--step--1);
  font-weight: 450;
  letter-spacing: 0;
  color: var(--text-3);
}

.work-desc {
  margin: 0;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.75;

  /* 固定三行：三張卡等高，也避免長敘述把卡片撐成一面文字牆 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 標籤 --- */
.work-tags {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.work-tag {
  padding: 4px 9px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);

  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}

/* --- 卡片底部 --- */
.work-foot {
  margin-top: auto;      /* 不論敘述長短，動作列都貼齊卡片底部 */
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}

.work-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: var(--step--1);
  font-weight: 550;
  color: var(--n1);
}

.work-arrow { transition: transform .2s ease; }

.work-card.is-link:hover .work-arrow { transform: translateX(4px); }

.work-pending {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-3);
}

/* 首頁「查看更多案例」——首頁只放精選，完整清單在 /work */
.work-more {
  display: flex;
  justify-content: center;
  margin-top: var(--gap-cards);
}

.work-more-btn {
  gap: 12px;
  padding-inline: 26px;
}

.work-more-count {
  padding: 2px 9px;

  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .14);

  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--n1);
}

.work-more-btn:hover .work-arrow { transform: translateX(4px); }

/* 721~980：仍是三張一排，但每張卡只剩約 215~300px 寬，
   內距、字級與標籤都收小，卡片才不會被擠成細長條 */
@media (max-width: 980px) and (min-width: 721px) {
  .work-cards { gap: 12px; }
  .work-body { padding: 14px; gap: 10px; }
  .work-title { font-size: 16px; }
  .work-subtitle { font-size: 12.5px; }
  .work-desc { font-size: 13px; line-height: 1.65; }
  .work-tag { padding: 3px 7px; font-size: 10.5px; }
  .work-category { left: 8px; bottom: 8px; padding: 4px 9px; font-size: 11px; }
  .work-foot { padding-top: 10px; }
}

@media (max-width: 640px) {
  .work-desc {
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  .work-card {
    min-height: 0;
  }

  .work-body {
    padding: 16px;
  }
}

/* 720px 以下：專案卡改成橫向滑動，做法和上面的方案卡（.plans）相同。
   要排在上面的 .work-cards 斷點之後，才蓋得過它的 grid-template-columns */
@media (max-width: 720px) {
  /* 卡片寬度用螢幕寬（捲動區已延伸到螢幕兩側），左右留白 = (100vw - 卡片寬) / 2，
     第一張和最後一張也能捲到正中間；原本留白只有 24px，頭尾兩張會偏左／偏右 */
  .work-cards {
    --swipe-card: 84vw;
    /* 卡片位置（offsetLeft）以捲動區為基準，置中的計算才會準 */
    position: relative;

    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--swipe-card);
    gap: 14px;

    margin: 0 -24px;
    padding: 16px calc((100vw - var(--swipe-card)) / 2) 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* 瀏覽器只負責上下捲動頁面；左右滑、吸附到卡片中間都由 components/ui/SwipeDots.tsx 處理，
       一次只移動一張。不另外開 scroll-snap，兩套機制會互相拉扯造成「彈一下」 */
    touch-action: pan-y;
  }

  .work-cards::-webkit-scrollbar { display: none; }


  /* 滑動中卡片不要被 hover 往上推，避免碰到捲動區上緣 */
  .work-card.is-link:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card, .work-media img, .work-arrow { transition: none; }
}

/* ----------------------------
   8.9) FAQ (#faq)
----------------------------- */
/* 元件在 components/sections/FaqSection.tsx。
   電腦版：左邊問題清單 + 右邊固定答案面板，點哪題右邊換哪題，區塊高度不會被答案撐長。
   手機版：精簡手風琴，答案在問題正下方展開，一次只開一題。 */

/* 分類切換：兩顆並排的分段按鈕，後面帶題數 */
.faq-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;

  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  background: rgba(8, 12, 22, .55);
}

.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;

  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.faq-tab:hover { color: var(--text-1); }

.faq-tab.is-active {
  background: var(--n1);
  color: #04120e;
  font-weight: 650;
}

.faq-tab-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-family: var(--mono);
  font-size: 11px;
  text-align: center;
}

.faq-tab.is-active .faq-tab-count { background: rgba(4, 18, 14, .16); }

.faq-tab:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

/* 電腦版：左右兩欄。每題的問題和答案在 app/page.tsx 各寫一段（li 裡一個按鈕、一個答案），
   這裡讓 .faq-list 和 .faq-item 不產生自己的框（display: contents），
   問題按鈕排在左欄，被選中那題的答案移到右欄、橫跨所有列，看起來就是一塊答案面板；
   面板底部的聯絡列疊在答案面板最下方。
   --faq-rows 是目前分類的題數（由 page.tsx 帶入），用來讓答案面板和左欄等高 */
.faq-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: repeat(var(--faq-rows, 6), auto);
  column-gap: var(--gap-cards);
  align-items: start;
}

.faq-list,
.faq-item { display: contents; }

.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-q {
  grid-column: 1;
  margin-bottom: 8px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;

  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(8, 12, 22, .45);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.faq-q:hover {
  border-color: var(--border);
  background: rgba(12, 16, 30, .6);
  color: var(--text-1);
}

.faq-tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid rgba(79, 255, 212, .22);
  border-radius: 6px;
  background: rgba(79, 255, 212, .06);
  color: var(--n1);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.faq-q-text {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

/* 電腦版：箭頭朝右，代表「看右邊」 */
.faq-q-icon {
  font-size: 20px;
  color: var(--text-3);
  transform: rotate(-90deg);
  transition: transform .25s ease, color .2s ease;
}

/* 電腦版目前選中的那題 */
.faq-item.is-selected .faq-q {
  border-color: rgba(79, 255, 212, .45);
  background: linear-gradient(90deg, rgba(79, 255, 212, .10), rgba(79, 255, 212, .02));
  color: var(--text-1);
  box-shadow: inset 3px 0 0 var(--n1);
}

.faq-item.is-selected .faq-q-icon { color: var(--n1); }

/* 答案：只顯示選中的那題，放在右欄、從第一列跨到最後一列 */
.faq-a { display: none; }

.faq-item.is-selected .faq-a {
  display: block;
  grid-column: 2;
  grid-row: 1 / span var(--faq-rows, 6);
  align-self: stretch;
  margin-bottom: 8px;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(79, 255, 212, .08), transparent 60%),
    var(--surface-1);
  overflow: hidden;
}

.faq-item.is-selected .faq-a-inner {
  /* 底部留出聯絡列的高度 */
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px) 96px;
  animation: faqIn .3s ease both;
}

.faq-a-q {
  margin: 14px 0 12px;
  font-size: var(--step-2);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--text-1);
}

.faq-a-text {
  margin: 0;
  color: var(--text-2);
  font-size: var(--step-0);
  line-height: 1.9;
}

/* 聯絡列：疊在答案面板的最下方 */
.faq-panel-foot {
  grid-column: 2;
  grid-row: var(--faq-rows, 6);
  align-self: end;
  position: relative;
  z-index: 1;
  margin: 0 1px 9px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px clamp(22px, 2.4vw, 32px);

  border-top: 1px solid var(--border-subtle);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: rgba(79, 255, 212, .04);
  color: var(--text-2);
  font-size: 14px;
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* 電腦版答案面板已經有「直接問我們」，下面那條就不重複顯示 */
.faq-more.faq-more--mobile { display: none; }

/* ---------- 平板與手機（900px 以下）：精簡手風琴 ---------- */
@media (max-width: 900px) {
  .faq-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 14px;
  }

  .faq-tab { justify-content: center; padding: 10px 12px; font-size: 14px; }

  .faq-body { display: block; }
  .faq-panel-foot { display: none; }
  .faq-more.faq-more--mobile { display: flex; }

  .faq-list { display: block; border-top: 1px solid var(--border-subtle); }

  .faq-item { display: block; border-bottom: 1px solid var(--border-subtle); }

  /* 手機的答案只顯示內文，標籤與問題標題（電腦版面板用）隱藏 */
  .faq-a-inner > .faq-tag,
  .faq-a-q { display: none; }

  /* 手機版的問題列：沒有外框，用分隔線區隔，整體更輕 */
  .faq-q,
  .faq-q:hover,
  .faq-item.is-selected .faq-q {
    margin: 0;
    padding: 14px 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text-1);
  }

  .faq-q-text { font-size: 15px; }

  .faq-q-icon,
  .faq-item.is-selected .faq-q-icon {
    transform: none;
    color: var(--text-3);
  }

  .faq-item.is-open .faq-q-icon {
    transform: rotate(180deg);
    color: var(--n1);
  }

  .faq-item.is-open .faq-q-text { color: var(--n1); }

  /* 展開動畫：grid 的列高從 0 到內容高度 */
  .faq-a,
  .faq-item.is-selected .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none;
    transition: grid-template-rows .28s ease;
  }

  .faq-item.is-selected .faq-a-inner { padding: 0; animation: none; }

  .faq-item.is-open .faq-a { grid-template-rows: 1fr; }

  .faq-a-inner { overflow: hidden; }

  .faq-a-text {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-left: 2px solid var(--n1);
    border-radius: 0 10px 10px 0;
    background: rgba(79, 255, 212, .04);
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.8;
  }
}

/* 很窄的手機：標籤收進問題上方一行，問題文字才有足夠寬度 */
@media (max-width: 380px) {
  .faq-q { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .faq-tag { grid-column: 1; justify-self: start; }
  .faq-q-text { grid-column: 1; grid-row: 2; }
  .faq-q-icon { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-a-inner { animation: none; }
  .faq-a, .faq-q-icon { transition: none; }
}

.faq-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;

  margin-top: var(--gap-cards);
  padding: 18px clamp(18px, 2vw, 24px);

  border: 1px solid rgba(79, 255, 212, .2);
  border-radius: var(--radius);
  background: rgba(79, 255, 212, .045);
}

.faq-more p {
  margin: 0;
  color: var(--text-1);
  font-size: var(--step-0);
}

@media (max-width: 560px) {
  .faq-more .btn { width: 100%; }
}

/* ----------------------------
   9) Team (#team)
----------------------------- */
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  justify-content: center;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .team-cards { grid-template-columns: 1fr; max-width: 640px; }
}

/* 注意特異度：這條 (.team-card .team-inner) 會蓋過單獨的 .team-inner，
   所以卡片內距必須寫在這裡，寫在下面那條是沒有用的。 */
.team-card .team-inner {
  padding: clamp(20px, 1.8vw, 26px);
  display: grid;
  gap: 16px;
}

/* 頭像改成小尺寸圓形，放在姓名旁邊。
   原本是 4:3 滿版橫幅，卡通插畫佔掉整張卡的上半部，
   在深色專業版面裡最搶戲也最扣分；縮小之後改由文字主導，
   插畫退回「識別用的頭像」而不是主視覺。 */
.team-media {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, .22);
}

.team-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.06);
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}

/* team-media-overlay 已隨大圖橫幅一起移除 */

.team-body {
  padding: 0;
  display: grid;
  gap: 12px;
}

/* 頭像 ／ 姓名＋職稱 ／ 徽章 固定排成兩列的 grid。
   原本是 flex + flex-wrap: wrap：同一行塞得下就併排、塞不下才換行。
   兩張卡的職稱只差一個字（「專案管理 × 系統設計」vs「介面設計 × 資料庫開發」），
   寬度剛好卡在臨界點 —— 左卡塞得下、右卡塞不下，iPad 上就變成一張徽章在姓名右邊、
   一張徽章掉到下一行，兩張卡對不齊。改成 grid 後兩張卡一律同一種排法。 */
.team-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
}

.team-top > div { min-width: 0; }

/* 頭像固定在左側，跨越「姓名」與「徽章」兩列 */
.team-top > .team-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.team-top > div:not(.team-avatar),
.team-top > .team-badges { grid-column: 2; }

.team-name {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.team-role {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.team-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* 徽章自成一列，靠左才會跟姓名、職稱切齊 */
  justify-content: flex-start;
}

.team-desc {
  margin: 0;
  color: var(--text-2);
  line-height: 1.85;
  font-size: 14px;
}

.team-list {
  list-style: none;
  padding: 0;
  margin: 2px 0 0;
  display: grid;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.team-list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
}

.team-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(79, 255, 212, .85);
  box-shadow: 0 0 14px rgba(79, 255, 212, .45);
}

.team-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

.team-link {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 180, 255, .16);
  background: rgba(12, 16, 30, .45);
  color: var(--text-2);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.team-card:hover .team-media img {
  transform: scale(1.06);
  filter: saturate(1.12) contrast(1.08);
}

.team-card:hover .team-link {
  transform: translateY(-1px);
  border-color: rgba(79, 255, 212, .45);
  background: rgba(12, 16, 30, .62);
}

/* ----------------------------
   10) Reviews (#review)
----------------------------- */
.review-slider { position: relative; }

.review-track {
  /* 卡片位置（offsetLeft）以捲動區為基準計算，輪播置中才會準 */
  position: relative;
  display: flex;
  gap: 14px;
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;
  scroll-padding-left: 0px;

  border-radius: calc(var(--radius) + 6px);
  touch-action: pan-x pan-y;

  scrollbar-width: none;
}

.review-track::-webkit-scrollbar { height: 0; }

.review-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.review-card {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(12, 16, 30, .62), rgba(12, 16, 30, .42));
  border: 1px solid rgba(120, 180, 255, .16);
  box-shadow: var(--shadow2);
  overflow: hidden;
  padding: 18px 18px 16px;

  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: center;
}

.review-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 44%),
    radial-gradient(420px 260px at 18% 12%, rgba(79, 255, 212, .10), transparent 62%);
  opacity: .9;
  pointer-events: none;
}

.review-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 10px);
  opacity: .20;
  mix-blend-mode: overlay;
  mask-image: radial-gradient(520px 320px at 40% 30%, black 55%, transparent 85%);
  pointer-events: none;
}

.review-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.review-avatar {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(120, 180, 255, .22);
  box-shadow: 0 0 0 1px rgba(79, 255, 212, .10) inset, 0 10px 24px rgba(0, 0, 0, .35);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: rgba(0, 0, 0, .10);
  filter: contrast(1.05) saturate(1.05);
}

.review-avatar.placeholder {
  font-family: var(--mono);
  color: var(--text-1);
  letter-spacing: .12em;
}

.review-meta { position: relative; min-width: 0; }

.review-name {
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-1);
  font-size: 18px;
}

.review-role {
  margin-top: 4px;
  color: var(--text-3);
  font-size: 13px;
  font-family: var(--mono);
}

.review-stars {
  margin-top: 8px;
  display: inline-flex;
  gap: 4px;
}

.review-stars .star {
  color: rgba(79, 255, 212, .90);
  text-shadow: 0 0 18px rgba(79, 255, 212, .22);
  font-size: 16px;
  line-height: 1;
}

.review-divider {
  position: relative;
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(79, 255, 212, .50), rgba(103, 183, 255, .45), transparent);
  opacity: .85;
}

.review-text {
  position: relative;
  margin: 0;
  color: var(--text-2);
  line-height: 1.9;
  font-size: 14px;
}

.review-card.muted { filter: saturate(.92); opacity: .92; }

.review-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.review-dot {
  width: 28px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 180, 255, .18);
  background: rgba(12, 16, 30, .45);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.review-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(79, 255, 212, .75), rgba(103, 183, 255, .60));
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: left;
  transition: .22s ease;
}

.review-dot.is-active { border-color: rgba(79, 255, 212, .45); }
.review-dot.is-active::after { opacity: 1; transform: scaleX(1); }

/* 電腦版：每則回饋是一張接近正方形的小卡。
   目前那張（.is-current）固定在正中間、清楚放大，兩旁的變小、變霧；
   每 6 秒換下一張，1 → 2 → 3 之後回到第一張（邏輯在 app/page.tsx） */
@media (min-width: 981px) {
  /* 前後各一塊留白，第一張和最後一張也能捲到正中間 */
  .review-track::before,
  .review-track::after {
    content: "";
    flex: 0 0 calc(33.333% - 9.333px);
  }

  .review-card {
    flex: 0 0 calc((100% - 28px) / 3);
    max-width: none;
    aspect-ratio: 1 / 1;

    display: flex;
    flex-direction: column;
    padding: 22px 22px 20px;
  }

  .review-avatar { width: 54px; height: 54px; border-radius: 14px; }
  .review-name { font-size: 16.5px; }

  .review-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.85;
  }
}

/* 平板：中間一張，兩旁露出一部分 */
@media (max-width: 980px) and (min-width: 641px) {
  .review-card { flex-basis: 56%; }

  .review-track::before,
  .review-track::after {
    content: "";
    flex: 0 0 calc(22% - 14px);
  }
}

/* 平板與電腦：非目前那張變小、變霧 */
@media (min-width: 641px) {
  .review-card {
    transition: transform .5s ease, opacity .5s ease, filter .5s ease, border-color .5s ease;
  }

  .review-card:not(.is-current) {
    transform: scale(.9);
    opacity: .4;
    filter: blur(2px) saturate(.7);
  }

  .review-card.is-current {
    border-color: rgba(79, 255, 212, .35);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(79, 255, 212, .08);
  }

  /* 原本的「下一位合作夥伴」卡片自帶的淡化，在置中時不要再額外打折 */
  .review-card.muted.is-current { filter: none; opacity: 1; }
}

/* 手機：中間一張佔 84%，左右露出前後張的一小截，提示可以滑。
   兩旁只變淡、稍微縮小，不加模糊（只露出一小條時，模糊看起來像沒載好，也比較吃效能） */
@media (max-width: 640px) {
  .review-track { gap: 10px; }

  /* 至少是正方形（高度不小於寬度，寬度 = 容器寬 × 84%）；
     評價太長時卡片往下長高，文字完整顯示、不截斷。
     同一排的卡片會自動等高，三張看起來一致 */
  .review-card {
    flex-basis: 84%;
    aspect-ratio: auto;
    min-height: calc((100vw - 48px) * .84);
    display: flex;
    flex-direction: column;
    padding: 16px 16px 14px;
    transition: transform .45s ease, opacity .45s ease, border-color .45s ease;
  }

  .review-top { gap: 12px; }
  .review-avatar { width: 48px; height: 48px; border-radius: 12px; }
  /* 店名不截斷：放不下時換行 */
  .review-name {
    font-size: 14.5px;
    line-height: 1.35;
  }
  .review-role { margin-top: 2px; font-size: 12px; }
  .review-stars { margin-top: 5px; }
  .review-stars .star { font-size: 14px; }
  .review-divider { margin: 12px 0 10px; }

  .review-text {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .review-card:not(.is-current) {
    transform: scale(.94);
    opacity: .6;
  }

  .review-card.is-current { border-color: rgba(79, 255, 212, .32); }

  .review-card.muted.is-current { filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .review-card { transition: none; }
}

@media (max-width: 980px) {
  .review-name { font-size: 16px; }
  .review-avatar { width: 58px; height: 58px; }
}

/* ----------------------------
   10.5) Contact (#contact)

   不做表單：把三個真實管道攤開讓訪客挑最順手的，
   每張卡說清楚「適合什麼情況」，降低開口的心理成本。
----------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-cards);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 8px;

  padding: clamp(20px, 2vw, 28px);

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-1);

  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.contact-card:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 3px;
}

.contact-card.is-primary {
  border-color: rgba(79, 255, 212, .32);
  background: rgba(79, 255, 212, .045);
}

.contact-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-card-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--text-3);
}

.contact-card-badge {
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .14);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  color: var(--n1);
}

.contact-card-value {
  margin: 2px 0 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-1);
}

.contact-card-when {
  margin: 0;
  flex: 1;
  color: var(--text-2);
  font-size: var(--step--1);
  line-height: 1.75;
}

.contact-card-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);

  font-size: var(--step--1);
  font-weight: 550;
  color: var(--n1);
}

.contact-card-arrow { transition: transform .2s ease; }
.contact-card:hover .contact-card-arrow { transform: translateX(4px); }

/* 降低承諾感的那一行（對應 Shopify 的「無需提供信用卡資料」） */
.contact-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-top: var(--gap-cards);
  padding: 16px 20px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface-1);
}

.contact-note-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;

  border-radius: var(--radius-pill);
  background: rgba(79, 255, 212, .14);
  color: var(--n1);
  font-size: 12px;
}

.contact-note p {
  margin: 0;
  color: var(--text-1);
  font-size: var(--step-0);
  line-height: 1.7;
}

.contact-note-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--step--1);
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ----------------------------
   10.6) Floating contact（常駐聯絡入口）
----------------------------- */
/* 元件捲過第一屏才會被掛載，所以進場交給 animation 而不是 transition */
.fc {
  position: fixed;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  z-index: 90;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;

  animation: fc-rise .34s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes fc-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.fc-panel {
  display: grid;
  gap: 8px;
  width: min(84vw, 290px);

  padding: 10px;

  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(8, 11, 20, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);

  animation: fc-in .22s ease both;
}

@keyframes fc-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.fc-item {
  display: grid;
  gap: 2px;

  padding: 11px 13px;

  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);

  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.fc-item:hover {
  border-color: rgba(79, 255, 212, .4);
  background: var(--surface-3);
}

.fc-item:focus-visible { outline: 2px solid var(--n1); outline-offset: 2px; }

.fc-item-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-3);
}

.fc-item-value {
  font-size: var(--step--1);
  font-weight: 550;
  color: var(--text-1);
}

.fc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding: 13px 20px;

  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #5ef0cb, #34d3ab);
  color: #04120e;

  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 650;
  cursor: pointer;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease;
}

.fc-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(79, 255, 212, .26);
}

.fc-toggle:focus-visible { outline: 2px solid var(--n1); outline-offset: 3px; }

.fc-toggle svg { width: 18px; height: 18px; }

@media (max-width: 480px) {
  .fc-toggle { padding: 12px 16px; }
  .fc-toggle-text { display: none; }
  .fc.is-open .fc-toggle-text { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .fc, .fc-toggle, .fc-item, .fc-panel { transition: none; animation: none; }
}

/* ----------------------------
   11) Footer
----------------------------- */
.site-footer {
  margin-top: var(--space-section);
  /* 上內距固定約 1.3cm：頁尾上緣到 logo 的距離在各頁一致 */
  padding: 48px 0 36px;
  border-top: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(5, 6, 10, .35), rgba(5, 6, 10, .65));
}

.footer-grid {
  display: grid;
  /* 聯絡欄要放完整的電話與 Email，給它多一點寬度；
     「更多內容」只有四個字的中文名稱，欄位窄一點，卡片才不會空一大片 */
  grid-template-columns: 1.3fr .55fr 1.05fr;
  gap: 26px;
  align-items: start;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.footer-title {
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 26px;
  line-height: 1.05;
}

.footer-accent {
  color: var(--n1);
  text-shadow: 0 0 18px rgba(79, 255, 212, .18);
}

.footer-sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-desc {
  margin: 0;
  color: var(--text-2);
  line-height: 1.85;
  font-size: 14px;
  max-width: 60ch;
}

.footer-col-title {
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 14px;
}

/* 標題下方一條主題色短線（電腦版靠左，手機版置中） */
.footer-col-title::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--n1);
}

/* 更多內容（電腦、平板）：和右邊「聯絡我們」同樣的橫向卡片，一列一項，
   圖示 ｜ 頁面名稱＋英文小字 ｜ 箭頭，兩欄高度一致、底部對齊 */
.footer-links {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
}

/* 清單本身有 10px 間距，標題下方少留一點，第一張卡才會和右邊「聯絡我們」同一個高度開始 */
.footer-links .footer-col-title { grid-column: 1 / -1; margin-bottom: 4px; }

.footer-link {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, .12);
  background: rgba(12, 16, 30, .35);
  color: var(--text-1);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

/* 這些連結放在 <nav> 裡，會吃到上方導覽列「nav a::after」的底線動畫，
   在卡片中間畫出一條線；頁尾不需要，關掉 */
.footer-links .footer-link::after { content: none; }

/* 右側箭頭（真的圖示元素） */
.footer-link-arrow {
  font-size: 17px;
  color: var(--text-3);
  transition: transform .2s ease, color .2s ease;
}

.footer-link:hover {
  border-color: rgba(79, 255, 212, .40);
  background: rgba(12, 16, 30, .55);
  transform: translateY(-1px);
}

.footer-link:hover .footer-link-arrow {
  color: var(--n1);
  transform: translateX(3px);
}

.footer-link-ic {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(120, 180, 255, .08);
  color: var(--text-2);
  font-size: 18px;
  transition: color .2s ease, background .2s ease;
}

.footer-link:hover .footer-link-ic {
  background: rgba(79, 255, 212, .12);
  color: var(--n1);
}

.footer-link-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.footer-link-label { font-size: 15px; font-weight: 500; }

/* 聯絡我們（電腦、平板）：一張一列的橫向卡片
   發光圖示 ｜ 主題色小標籤＋完整聯絡資訊 ｜ 箭頭（滑過會往右移） */
.contact-list {
  display: grid;
  gap: 10px;
}

.contact-row {
  display: grid;
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 40px 12px 12px;

  border-radius: 14px;
  border: 1px solid rgba(120, 180, 255, .12);
  background:
    linear-gradient(90deg, rgba(79, 255, 212, .05), transparent 60%),
    rgba(12, 16, 30, .4);
  color: var(--text-2);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.contact-row::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 16px;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}

.contact-row:hover {
  border-color: rgba(79, 255, 212, .40);
  background:
    linear-gradient(90deg, rgba(79, 255, 212, .10), transparent 70%),
    rgba(12, 16, 30, .55);
  transform: translateY(-1px);
}

.contact-row:hover::after {
  color: var(--n1);
  transform: translate(3px, -50%);
}

.contact-row:focus-visible,
.footer-link:focus-visible {
  outline: 2px solid var(--n1);
  outline-offset: 2px;
}

.contact-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(79, 255, 212, .22);
  background: radial-gradient(circle at 30% 25%, rgba(79, 255, 212, .22), rgba(79, 255, 212, .06) 70%);
  box-shadow: 0 0 16px rgba(79, 255, 212, .12);
  color: var(--n1);
  font-size: 20px;
}

.contact-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.contact-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--n1);
  opacity: .85;
}

.contact-value {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-bottom {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(120, 180, 255, .10);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 13px;
}

/* 平板（641~980）：品牌介紹一整排，下面「更多內容」和「聯絡我們」左右並排 */
@media (max-width: 980px) {
  .footer-grid {
    /* 「更多內容」窄、「聯絡我們」寬 */
    grid-template-columns: minmax(0, .6fr) minmax(0, 1fr);
    gap: 28px 24px;
  }

  /* 品牌介紹獨占一整排：logo、標語和介紹文字置中，右邊不會空一塊 */
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-logo { justify-content: center; }

  .footer-desc {
    margin: 0 auto;
    max-width: 46em;
  }

  .footer-title { font-size: 22px; }
}

/* 手機（640 以下）：整個頁尾置中
   - 品牌、標語、介紹置中
   - 「更多內容」2 × 2 的按鈕
   - 「聯絡我們」三格並排的圖示按鈕（LINE／電話／Email），拇指一按就到 */
@media (max-width: 640px) {
  .site-footer { padding: 44px 0 28px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-logo {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .footer-sub { letter-spacing: .08em; }

  .footer-desc {
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.8;
    max-width: 34em;
  }

  .footer-col-title { margin-bottom: 14px; font-size: 13px; }
  .footer-col-title::after { margin: 8px auto 0; }

  /* 手機：更多內容回到 2 × 2 的按鈕，只留中文名稱 */
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .footer-link {
    display: flex;
    justify-content: center;
    padding: 12px 8px;
  }


  .footer-link-arrow,
  .footer-link-ic { display: none; }

  .footer-link-label { font-size: 14px; font-weight: 400; }

  .contact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .contact-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    padding: 14px 6px 12px;
    text-align: center;
  }

  .contact-row::after { display: none; }

  .contact-ic { width: 42px; height: 42px; }

  .contact-label {
    font-family: inherit;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--text-1);
    opacity: 1;
  }

  /* 三格放不下完整內容，手機上只留標籤；完整資訊在 title 與 aria-label */
  .contact-value { display: none; }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: 12px;
  }
}

/* ----------------------------
   12) Global responsiveness
----------------------------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .nav { gap: 12px; }
  .nav-cta { min-width: unset; }
  .cards { grid-template-columns: 1fr; }
}



/* ========================================
   Hero Responsive Fix
======================================== */

.hero-grid > * {
  min-width: 0;
}

.marquee-wrap {
  width: 100%;
  overflow: hidden;
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .holo {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .holo-inner,
  .logo-wrap,
  .vps-frame {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .slogan {
    width: 100%;
  }

  .slogan__line {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .slogan__text {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 8px;
  }

  .holo-inner {
    padding: 12px;
  }

  .holo-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 8px 2px;
  }

  .holo-meta strong {
    font-size: 17px;
  }

  .holo-meta .tag {
    font-size: 11px;
  }

  .logo-wrap {
    padding: 8px;
    border-radius: 14px;
  }

  .slogan__text {
    font-size: 13px;
    line-height: 1.6;
  }
}




/* =========================================================
   HERO SIGNAL FLOW
   永遠維持：
   [互動設計 / 技術架構] → [匯流] → [數位服務]
========================================================= */

.hero-signal {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin:
    clamp(26px, 3vw, 44px)
    0
    clamp(26px, 3vw, 42px);

  position: relative;

  /* 讓裡面的字級可以依據這個區塊本身寬度縮放 */
  container-type: inline-size;
}


/* =========================================================
   通過
========================================================= */

.hero-signal__through {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: clamp(12px, 2cqw, 18px);

  padding:
    clamp(5px, 1cqw, 8px)
    clamp(10px, 1.5cqw, 15px);

  border-radius: 999px;

  font-family: var(--mono);
  font-size: clamp(9px, 1.25cqw, 11px);
  font-weight: 700;
  letter-spacing: .18em;

  color: #06110f;

  background:
    linear-gradient(
      100deg,
      rgba(79, 255, 212, .96),
      rgba(103, 183, 255, .92)
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 20px rgba(79,255,212,.16);
}


.hero-signal__through-dot {
  width: 6px;
  height: 6px;

  flex: none;

  border-radius: 50%;

  background: #06110f;

  animation:
    heroThroughPulse 2.2s ease-in-out infinite;
}


/* =========================================================
   整體結構

   重點：
   不論桌機、平板、手機永遠都是三欄
========================================================= */

.hero-signal__layout {
  width: 100%;
  min-width: 0;

  display: grid;

  /*
     左側文字稍寬
     中間線條
     右側成果

     不使用固定 px，所以不會把 hero-grid 右側 holo 擠出去
  */
  grid-template-columns:
    minmax(0, .88fr)
    minmax(0, .78fr)
    minmax(0, 1fr);

  align-items: center;

  gap: 0;
}


/* =========================================================
   左側能力
========================================================= */

.hero-signal__left {
  min-width: 0;

  display: grid;

  /*
     兩列等高、間距改由卡片自己的 margin 提供，
     卡片中心才會固定落在 25% / 75%，對上 SVG 的 y=45 / y=135
  */
  grid-auto-rows: 1fr;
  gap: 0;

  --hero-signal-gap: clamp(18px, 4cqw, 34px);
}


.hero-signal__item {
  min-width: 0;
  position: relative;

  align-self: center;
  margin-block: calc(var(--hero-signal-gap) / 2);

  padding:
    clamp(10px, 1.5cqw, 14px)
    clamp(8px, 1.8cqw, 12px)
    clamp(10px, 1.5cqw, 14px)
    clamp(16px, 2cqw, 22px);

  text-align: left;

  border-radius: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(14, 27, 38, .78),
      rgba(10, 18, 30, .48) 72%,
      rgba(10, 18, 30, .20)
    );

  border:
    1px solid rgba(79, 255, 212, .10);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 10px 24px rgba(0,0,0,.15);

  backdrop-filter: blur(5px);
}

.hero-signal__item--engine {
  background:
    linear-gradient(
      90deg,
      rgba(13, 24, 40, .78),
      rgba(10, 17, 30, .48) 72%,
      rgba(10, 17, 30, .20)
    );

  border-color:
    rgba(103, 183, 255, .11);
}


/* 左側裝飾線 */
.hero-signal__item::before {
  content: "";

  position: absolute;

  left: 0;
  top: 4px;
  bottom: 4px;

  width: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      rgba(79,255,212,1),
      rgba(79,255,212,.15)
    );

  box-shadow:
    0 0 14px rgba(79,255,212,.22);
}


.hero-signal__item--engine::before {
  background:
    linear-gradient(
      180deg,
      rgba(103,183,255,1),
      rgba(103,183,255,.15)
    );

  box-shadow:
    0 0 14px rgba(103,183,255,.20);
}


/* 英文小標 */
.hero-signal__mini {
  display: block;

  margin-bottom:
    clamp(3px, .6cqw, 6px);

  font-family: var(--mono);

  font-size:
    clamp(7px, 1.05cqw, 10px);

  font-weight: 700;

  letter-spacing: .20em;

  color:
    rgba(79,255,212,.72);

  white-space: nowrap;
}


.hero-signal__item--engine
.hero-signal__mini {
  color:
    rgba(103,183,255,.75);
}


/* 專業規劃的 / 專業穩定的 */
.hero-signal__sub {
  display: block;

  margin-bottom:
    clamp(1px, .5cqw, 5px);

  font-size:
    clamp(20px, 2cqw, 17px);

  font-weight: 500;

  line-height: 1.25;

  color:
    rgba(233,242,255,.76);

  white-space: nowrap;
}


/* 互動設計 / 技術架構 */
.hero-signal__headline {
  display: block;

  margin: 0;

  font-family: var(--rounded);

  /*
     這裡故意不再用 4vw / 5vw。
     cqw 是以 hero-signal 本身寬度計算，
     所以不會因整個螢幕很寬就把左欄字撐爆。
  */
  font-size:
    clamp(24px, 5.6cqw, 48px);

  font-weight: 650;

  line-height: 1;

  letter-spacing: -.04em;

  color: var(--text-1);

  white-space: nowrap;

  text-shadow:
    0 0 20px rgba(255,255,255,.025);
}


/* =========================================================
   中央 SVG
========================================================= */

.hero-signal__flow {
  width: 100%;
  min-width: 0;

  /* 高度跟著左欄走，線條端點才對得上卡片 */
  align-self: stretch;

  position: relative;
}


.hero-signal__svg {
  display: block;

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/* 中央匯流點：用 HTML 畫，避免被 SVG 的非等比縮放壓成橢圓 */
.hero-signal__hub {
  position: absolute;

  left: 42.3%;
  top: 50%;

  width: clamp(30px, 8cqw, 54px);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);

  display: grid;
  place-items: center;
}


/* 靜態線 */
.hero-signal__path,
.hero-signal__output {
  fill: none;

  stroke-width: 3;

  vector-effect: non-scaling-stroke;

  opacity: .92;

  stroke-linecap: round;
}


/* 流水光 */
.hero-signal__energy {
  fill: none;

  stroke: rgba(79,255,212,.98);

  stroke-width: 4;

  vector-effect: non-scaling-stroke;

  stroke-linecap: round;

  stroke-dasharray: 22 88;

  filter:
    drop-shadow(0 0 4px rgba(79,255,212,.9))
    drop-shadow(0 0 10px rgba(79,255,212,.35));

  animation:
    heroSignalFlow 2.5s linear infinite;
}


.hero-signal__energy--two {
  stroke:
    rgba(103,183,255,.95);

  filter:
    drop-shadow(
      0 0 5px
      rgba(103,183,255,.68)
    );

  animation-delay: -.9s;
}


.hero-signal__energy--out {
  animation-duration: 1.8s;

  stroke:
    rgba(79,255,212,1);
}


/* 中央外圈 */
.hero-signal__ring {
  grid-area: 1 / 1;

  border-radius: 50%;

  background: rgba(5,15,22,.84);

  border:
    1px solid rgba(79,255,212,.20);
}


.hero-signal__ring--outer {
  width: 100%;
  height: 100%;
}


.hero-signal__ring--outer {
  animation:
    heroSignalRing 2.8s ease-in-out infinite;
}


.hero-signal__ring--inner {
  width: 66%;
  height: 66%;

  border-color:
    rgba(79,255,212,.42);
}


/* 中央核心 */
.hero-signal__core {
  grid-area: 1 / 1;

  width: 26%;
  height: 26%;

  border-radius: 50%;

  background: #4fffd4;

  box-shadow:
    0 0 10px rgba(79,255,212,.75);

  animation:
    heroSignalCore 2s ease-in-out infinite;
}


/* 箭頭 */
.hero-signal__arrow {
  fill: none;

  stroke:
    rgba(79,255,212,1);

  stroke-width: 3;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  filter:
    drop-shadow(
      0 0 6px
      rgba(79,255,212,.65)
    );

  animation:
    heroSignalArrow 1.8s ease-in-out infinite;
}


/* =========================================================
   右側成果
========================================================= */

.hero-signal__result {
  min-width: 0;
  position: relative;

  padding:
    clamp(12px, 1.6cqw, 18px)
    clamp(12px, 1.6cqw, 18px);

  text-align: left;

  border-radius: 16px;

  background:
    linear-gradient(
      110deg,
      rgba(12, 23, 34, .74),
      rgba(11, 18, 32, .46)
    );

  border:
    1px solid rgba(79, 255, 212, .12);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.018),
    0 12px 28px rgba(0,0,0,.18);

  backdrop-filter: blur(5px);

  overflow: hidden;
}

.hero-signal__result::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      180px 80px at 15% 50%,
      rgba(79,255,212,.08),
      transparent 70%
    );
}


.hero-signal__result-kicker {
  display: block;

  margin-bottom:
    clamp(3px, .8cqw, 8px);

  font-family: var(--mono);

  font-size:
    clamp(7px, 1cqw, 10px);

  font-weight: 700;

  letter-spacing: .24em;

  color:
    rgba(233,242,255,.48);

  white-space: nowrap;
}


/* 打造最適合你的 */
.hero-signal__result-sub {
  display: block;

  margin-bottom:
    clamp(2px, .6cqw, 6px);

  font-size:
    clamp(18px, 2cqw, 20px);

  line-height: 1.25;

  color:
    rgba(233,242,255,.78);

  white-space: nowrap;
}


/* 數位服務 */
.hero-signal__result-title {
  position: relative;

  display: inline-block;

  font-family: var(--rounded);

  font-size:
    clamp(25px, 6cqw, 52px);

  font-weight: 700;

  line-height: 1;

  letter-spacing: -.04em;

  white-space: nowrap;

  background:
    linear-gradient(
      90deg,
      #e9f2ff 0%,
      #e9f2ff 34%,
      #81e8df 70%,
      #4fffd4 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  animation:
    heroResultGlow
    3.2s
    ease-in-out
    infinite;
}


/* 掃光 */
.hero-signal__result-title::after {
  content: "";

  position: absolute;

  top: -15%;
  bottom: -15%;

  left: -35%;

  width: 24%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transform:
    skewX(-20deg);

  filter:
    blur(2px);

  pointer-events: none;

  animation:
    heroResultSweep
    4.5s
    ease-in-out
    infinite;
}


.hero-signal__result-underline {
  display: block;

  width: 82%;

  height: 1px;

  margin-top:
    clamp(8px, 1.5cqw, 14px);

  background:
    linear-gradient(
      90deg,
      rgba(79,255,212,.95),
      rgba(103,183,255,.26),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(79,255,212,.14);
}


/* =========================================================
   RESPONSIVE
   重要：永遠不切成上下
========================================================= */


/* 平板 */
@media (max-width: 860px) {

  .hero-signal {
    width: 100%;
    margin-top: 26px;
  }

  .hero-signal__layout {
    /*
      還是三欄
      只是中間縮短
    */
    grid-template-columns:
      minmax(0, .90fr)
      minmax(0, .72fr)
      minmax(0, 1fr);

    gap: 0px;
  }

  .hero-signal__left {
    --hero-signal-gap: clamp(14px, 3cqw, 24px);
  }

  .hero-signal__headline {
    font-size:
      clamp(22px, 5.8cqw, 44px);
  }

  .hero-signal__result-title {
    font-size:
      clamp(23px, 6cqw, 48px);
  }

}


/* 手機 */
@media (max-width: 560px) {

  .hero-signal {
    /*
      手機 hero 本身已經是滿寬單欄，
      流程圖就在這個寬度內做左右排版
    */
    margin-top: 22px;
    margin-bottom: 28px;
  }

  .hero-signal__through {
    margin-bottom: 12px;
  }

  .hero-signal__layout {
    /*
      仍然保持：
      左 | 中 | 右
    */
    grid-template-columns:
      minmax(0, .90fr)
      minmax(46px, .62fr)
      minmax(0, 1fr);

    gap: 0;
  }

  .hero-signal__left {
    --hero-signal-gap: 18px;
  }

  /*
    以下尺寸全部用 cqw（流程圖自身寬度）計算，
    文字 + 內距永遠小於欄寬，卡片才不會被字撐滿、圓點也不會壓到字。
    左欄約 35.7cqw：3 + 6.8 × 4 字 + 3.5 ≈ 33cqw
    右欄約 39.7cqw：3.2 + 4.1 × 7 字 + 3.2 ≈ 35cqw
  */
  .hero-signal__item {
    padding:
      8px
      3.5cqw
      8px
      3cqw;
  }

  .hero-signal__mini {
    font-size:
      clamp(6px, 1.9cqw, 8px);

    letter-spacing:
      .15em;
  }

  .hero-signal__sub {
    font-size:
      clamp(11px, 4cqw, 15px);
  }

  .hero-signal__headline {
    font-size:
      clamp(16px, 6.8cqw, 28px);

    letter-spacing:
      -.045em;

    white-space: nowrap;
  }

  .hero-signal__hub {
    width: clamp(24px, 8cqw, 54px);
  }

  .hero-signal__result {
    padding:
      10px
      3.2cqw;
  }

  .hero-signal__result-kicker {
    font-size:
      clamp(5px, 1.8cqw, 7px);

    letter-spacing:
      .14em;
  }

  .hero-signal__result-sub {
    font-size:
      clamp(11px, 4.1cqw, 15px);
  }

  .hero-signal__result-title {
    font-size:
      clamp(16px, 7cqw, 28px);

    white-space: nowrap;
  }

  .hero-signal__result-underline {
    width: 100%;
  }
}



/* =========================================================
   動畫
========================================================= */

@keyframes heroSignalFlow {
  from {
    stroke-dashoffset: 110;
  }

  to {
    stroke-dashoffset: 0;
  }
}


@keyframes heroSignalRing {

  0%,
  100% {
    opacity: .35;
    transform: scale(.94);
    transform-origin: center;
  }

  50% {
    opacity: .85;
    transform: scale(1.08);
    transform-origin: center;
  }
}


@keyframes heroSignalCore {

  0%,
  100% {
    opacity: .78;
  }

  50% {
    opacity: 1;
  }
}


@keyframes heroSignalArrow {

  0%,
  100% {
    opacity: .65;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(5px);
  }
}


@keyframes heroThroughPulse {

  0%,
  100% {
    opacity: .65;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}


@keyframes heroResultGlow {

  0%,
  100% {
    filter:
      drop-shadow(
        0 0 0
        rgba(79,255,212,0)
      );
  }

  50% {
    filter:
      drop-shadow(
        0 0 8px
        rgba(79,255,212,.18)
      );
  }
}


@keyframes heroResultSweep {

  0%,
  65% {
    left: -35%;
    opacity: 0;
  }

  72% {
    opacity: .7;
  }

  92% {
    left: 120%;
    opacity: 0;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}


/* 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {

  .hero-signal__energy,
  .hero-signal__ring,
  .hero-signal__core,
  .hero-signal__arrow,
  .hero-signal__through-dot,
  .hero-signal__result-title,
  .hero-signal__result-title::after {
    animation: none;
  }
}



.hero-signal__terminal {
  position: absolute;

  right: 0;
  top: 50%;

  width: 9px;
  height: 9px;

  transform: translate(50%, -50%);

  border-radius: 50%;

  background: var(--n1);

  box-shadow:
    0 0 0 4px rgba(79,255,212,.055),
    0 0 12px rgba(79,255,212,.55);

  z-index: 5;
}

.hero-signal__item--engine
.hero-signal__terminal {
  background: var(--n2);

  box-shadow:
    0 0 0 4px rgba(103,183,255,.055),
    0 0 12px rgba(103,183,255,.48);
}


/* 四個重點：收進同一個面板，每項之間用細虛線分隔（所有尺寸共用）；
   關鍵字和內文接在同一行，比四張獨立卡片省掉一半以上的高度 */
.hero-points {
  list-style: none;
  margin: 4px auto 0;
  padding: 2px 20px;
  display: block;

  border: 1px solid rgba(120, 180, 255, .12);
  border-radius: 14px;
  background: rgba(8, 12, 22, .55);
  backdrop-filter: blur(6px);
}

.hero-points > li {
  position: relative;
  margin: 0;
  padding: 8px 0 8px 16px;

  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.hero-points > li + li { border-top: 1px dashed rgba(120, 180, 255, .12); }

/* 每項前面的發光小點 */
.hero-points > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(8px + .58em);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--n1);
  box-shadow: 0 0 10px rgba(79, 255, 212, .7);
}

.hero-points > li > b:first-child { letter-spacing: .02em; }

/* 最後一項「最終目標」是結論：底色稍微亮一點、文字顏色提高 */
.hero-points > li:last-child {
  margin: 0 -20px;
  padding: 9px 20px 9px 36px;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(90deg, rgba(79, 255, 212, .10), rgba(79, 255, 212, .02));
  color: var(--text-1);
}

.hero-points > li:last-child::before { left: 20px; top: calc(9px + .58em); }

/* 「專業呈現」「可靠實用」各自保持完整，不要從中間斷行 */
.hero-points > li:last-child > b.glow { display: inline-block; white-space: nowrap; }

.hero-points + .slogan { margin-top: 22px; }

/* =========================================================
   第一屏手機版（640px 以下）：重點清單與結尾標語
   - 只調整排版，文字內容不變（寫在 app/page.tsx 的 .hero-points 與 .slogan）
   - 流程圖維持左右排列（見上方 HERO SIGNAL FLOW 的說明）
========================================================= */
@media (max-width: 640px) {
  /* 手機：重點面板收緊一點 */
  .hero-points { padding: 2px 14px; }

  .hero-points > li {
    padding: 10px 0 10px 14px;
    font-size: 13.5px;
    line-height: 1.65;
  }

  .hero-points > li::before { top: calc(10px + .62em); }

  .hero-points > li:last-child {
    margin: 0 -14px;
    padding: 11px 14px 11px 28px;
  }

  .hero-points > li:last-child::before { left: 14px; top: calc(11px + .62em); }

  /* 結尾兩句標語：置中、上下兩行有層次，中間一條短的漸層線 */
  .slogan {
    margin-top: 6px;
    gap: 0;
    justify-items: center;
    text-align: center;
  }

  .slogan__line + .slogan__line {
    margin-top: 12px;
    padding-top: 12px;
    position: relative;
  }

  .slogan__line + .slogan__line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--n1), var(--n2));
    transform: translateX(-50%);
  }

  .slogan__text {
    padding-bottom: 0;
    font-size: 15px;
    line-height: 1.7;
    white-space: normal;
  }

  /* 第一句當成小標：主題色、字距拉開 */
  .slogan__line:first-child .slogan__text {
    font-size: 13px;
    letter-spacing: .18em;
    color: var(--n1);
  }

  .slogan__text::after { display: none; }
}


/* =========================================================
   第一屏結尾兩句標語：放在下方跑馬燈的下面（app/page.tsx），整個畫面置中
========================================================= */
.hero > .slogan {
  margin-top: 30px;
  justify-items: center;
  text-align: center;
}

.hero > .slogan .slogan__line { justify-content: center; }

/* 底下的漸層線也跟著置中 */
.hero > .slogan .slogan__text::after {
  left: 50%;
  transform: translateX(-50%);
}

/* 電腦版：右邊展示卡和左欄等高——上緣切齊左欄最上方（主標題那一行），
   底部切齊左邊重點面板的底部；多出來的高度給作品圖片牆 */
@media (min-width: 861px) {
  .hero-grid { align-items: stretch; }

  .hero-grid > .holo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .hero-grid > .holo > .holo-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .hero-grid > .holo .logo-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .hero-grid > .holo .vps-frame {
    flex: 1;
    aspect-ratio: auto;
    min-height: 320px;
  }
}

/* 電腦版：四個重點每項都排成一行。
   字級依面板寬度自動縮放（最長那一項約 46 個字寬），放得下就不換行；
   面板太窄、字會小於 10px 時才允許換行，避免字小到看不清楚 */
@media (min-width: 861px) {
  .hero-points { container-type: inline-size; }

  .hero-points > li {
    font-size: clamp(10px, calc((100cqw - 56px) / 46), 14.5px);
  }

  @container (min-width: 516px) {
    .hero-points > li { white-space: nowrap; }
  }
}