/* ============================================================
   Encore 安可日子 v3 — 淺色精緻編輯風
   原站 Hero 忠實還原 ＋ 重新編排的全站區塊
   襯線大標 × 等寬標籤 × 紙白 × 森綠 × 金
   ============================================================ */

:root {
  --paper: #FFFEFA;
  --paper-2: #F7F2E7;
  --card: #FFFFFF;
  --ink: #272B27;
  --ink-2: #565B4E;
  --ink-3: #6E7263;
  --faint: #9A9D8F;
  --line: #EAE3D3;
  --line-strong: #D9CFB8;
  --gold: #A38245;
  --gold-deep: #7E622F;
  --gold-bright: #D8B25E;
  --gold-soft: #F4EBD8;
  --forest: #2F4A3C;
  --forest-2: #253B30;
  --cream: #F2EDE0;
  --serif: "Noto Serif TC", "Songti TC", "STSong", "PMingLiU", serif;
  --display: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  --latin: "Playfair Display", "Georgia", "Times New Roman", serif;
  --sans: "PingFang TC", "Noto Sans TC", "Heiti TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font: 16px/1.8 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "palt";
}

::selection { background: rgba(163, 130, 69, .25); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: #CFC5AB; border-radius: 6px; border: 2px solid var(--paper-2); }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3 { margin: 0; }
h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(27px, 3.2vw, 40px);
  line-height: 1.4;
  letter-spacing: .015em;
}

:focus-visible { outline: 3px solid #BD9A53; outline-offset: 4px; border-radius: 2px; }

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

.skip-link {
  position: fixed; top: -64px; left: 16px; z-index: 300;
  background: var(--gold-deep); color: #fff; font-weight: 700;
  padding: 10px 18px; border-radius: 6px; transition: top .25s var(--ease);
}
.skip-link:focus-visible { top: 14px; }

/* ---- 頂部閱讀進度條 ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, #CBB173, #AB8B4B 55%, #937035);
  box-shadow: 0 0 10px rgba(163, 130, 69, .5);
  transition: width .15s linear;
}

.grain {
  position: fixed; inset: -50%; z-index: 99; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { width: min(1300px, calc(100% - 100px)); margin: auto; }
.section { padding: 74px 0; position: relative; }

/* ---- 字體元件 ---- */
.kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.kicker::before { content: ""; width: 30px; height: 1px; background: var(--gold); flex: none; }
.lead { font-size: 16px; line-height: 1.9; color: var(--ink-2); }

/* ---- 金色按鈕（原站樣式） ---- */
.gold-button {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 12px 26px; border-radius: 99px;
  background: linear-gradient(115deg, #CBB173, #AB8B4B 55%, #937035);
  color: #fff; font-size: 15px; font-weight: 500;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 7px 20px rgba(155,122,50,.13);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.gold-button:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 12px 28px rgba(155,122,50,.22); }
.gold-button.big { font-size: 16.5px; padding: 16px 36px; }

/* ---- 導覽列 ---- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s, box-shadow .35s;
}
.site-header.scrolled {
  background: rgba(255, 254, 250, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-nav {
  height: 82px; width: min(1350px, calc(100% - 80px)); margin: auto;
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
}
.wordmark img { width: 155px; height: auto; }
.site-links { display: flex; align-items: center; gap: 30px; font-size: 14.5px; }
.site-links a:not(.gold-button) { position: relative; padding: 6px 0; }
.site-links a:not(.gold-button)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.site-links a:not(.gold-button):hover::after,
.site-links a[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.site-links .nav-cta { font-size: 13px; padding: 9px 22px; }

.menu-toggle {
  display: none; background: var(--card); border: 1px solid var(--line-strong);
  border-radius: 10px; width: 44px; height: 44px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.menu-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); transition: transform .3s var(--ease); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================
   HERO — 忠實還原原站
   ============================================================ */
.stage-wrap { padding-top: 82px; }
.stage {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: 35px;
  min-height: 570px; width: min(1440px, 100%); padding: 35px 60px 50px; margin: auto;
}
.stage::before {
  content: ""; position: absolute; inset: -100px -25% -20px; z-index: -3;
  background:
    radial-gradient(ellipse at 73% 45%, rgba(237, 224, 201, .4), transparent 48%),
    radial-gradient(ellipse at 25% 100%, rgba(238, 225, 196, .31), transparent 40%);
}
.stage::after {
  content: ""; position: absolute; left: 25%; right: -15%; bottom: -12px; height: 150px; z-index: -2;
  background: url("assets/silk-wave.svg") center / 100% 100% no-repeat; opacity: .55;
}
/* 漂浮金色光暈 */
.hero-orbs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-orbs i {
  position: absolute; border-radius: 50%; filter: blur(34px);
  background: radial-gradient(circle, rgba(216, 178, 94, .5), rgba(216, 178, 94, .12) 55%, transparent 72%);
  animation: drift 11s ease-in-out infinite alternate;
}
.hero-orbs i:nth-child(1) { width: 250px; height: 250px; left: 4%; top: 6%; }
.hero-orbs i:nth-child(2) { width: 190px; height: 190px; left: 44%; bottom: 4%; animation-delay: -3s; animation-duration: 13s; }
.hero-orbs i:nth-child(3) { width: 150px; height: 150px; right: 6%; top: 12%; animation-delay: -6s; animation-duration: 9s; }
.hero-orbs i:nth-child(4) { width: 120px; height: 120px; left: 60%; top: 40%; opacity: .7; animation-delay: -8s; animation-duration: 12s; }
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); opacity: .55; }
  50% { opacity: .85; }
  100% { transform: translate(26px, -30px) scale(1.12); opacity: .55; }
}
.stage > section { position: relative; z-index: 3; padding-bottom: 35px; }
.stage .kicker { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; color: #9B865E; margin-bottom: 13px; }
.stage .kicker::before { display: none; }
.stage h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(34px, 3.7vw, 53px); line-height: 1.4; letter-spacing: -.02em;
  margin-bottom: 20px; color: #202720;
}
.stage h1 span { display: block; }
.stage h1 em {
  font-style: normal; color: transparent; display: inline-block; white-space: nowrap;
  background: linear-gradient(110deg, #202720 36%, #A38245 50%, #B8924E 54%, #202720 66%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sheen 5.2s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 118% 0; } 50% { background-position: -18% 0; } }
.intro { font-size: 17px; line-height: 1.9; color: #51594E; max-width: 620px; }
.keep-phrase { display: inline-block; white-space: nowrap; }
.brand-statement { margin-top: 14px; }
.brand-statement p { font-size: 15px; color: #67705E; line-height: 1.9; }
.brand-statement strong { font-weight: 600; color: #4A5343; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 26px; font-size: 15px; }
.hero-actions > a:last-child { color: #947239; border-bottom: 1px solid #C9B891; padding-bottom: 2px; }
.hero-actions > a:last-child:hover { color: var(--gold-deep); border-color: var(--gold); }

.scene { position: relative; min-width: 0; height: 535px; isolation: isolate; }
.hero-sculpture {
  position: absolute; left: -7%; top: -40px; width: 116%; max-width: none;
  height: 570px; object-fit: contain; z-index: -1; pointer-events: none;
}
.top {
  position: absolute; top: 4px; right: 25px; z-index: 4;
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  padding: 5px 13px; background: rgba(255, 252, 243, .85);
  border: 1px solid #EEE0C3; border-radius: 20px; box-shadow: 0 4px 10px rgba(149, 116, 53, .05);
}
.group {
  width: 24px; height: 24px; display: grid; place-items: center;
  background: #E9DAB1; color: #917034; border-radius: 50%; font-size: 12px; font-weight: 600;
}
.chat { position: relative; height: 370px; }
.row {
  display: none; position: absolute; width: 340px; align-items: flex-start; gap: 10px;
  padding: 18px 19px; background: rgba(255, 255, 255, .92);
  border: 1px solid #fff; border-radius: 15px;
  box-shadow: 0 11px 32px rgba(106, 85, 36, .11), 3px 4px 0 rgba(238, 232, 220, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.row.visible { display: flex; animation: arrive .38s ease-out; }
.row[data-slot="0"] { left: 3%; top: 10px; transform: rotate(-3deg); }
.row[data-slot="1"] { right: -2%; top: 130px; transform: rotate(3deg); }
.row[data-slot="2"] { left: 10%; top: 250px; transform: rotate(-2deg); }
@keyframes arrive { from { translate: 0 8px; } to { translate: 0 0; } }

.avatar { width: 31px; height: 31px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 500; }
.tone-a .avatar { background: #ECDFC6; color: #907443; }
.tone-b .avatar { background: #DEE8EE; color: #5E8196; }
.tone-c .avatar { background: #E7DFF0; color: #7C668F; }
.tone-gold .avatar { background: #E9DAB1; color: #917034; }
.msg { min-width: 0; }
.name { font-size: 11px; color: #7D8176; margin-bottom: 5px; }
.bubble { font-size: 15px; line-height: 1.7; color: #52594C; }
.brand-row .bubble { color: #84682F; }
.brand-row .name { color: #A38245; font-weight: 500; }
.test-options { display: flex; gap: 8px; margin-top: 8px; }
.test-options span { font-size: 11px; background: #F1E9D5; color: #8D703B; padding: 3px 8px; border-radius: 5px; }

.typing { position: absolute; left: 45%; top: 360px; display: flex; gap: 4px; opacity: 0; }
.typing.on { opacity: 1; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: #A9946C; animation: pulse .7s infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .3; translate: 0 -3px; } }

.outcome {
  position: absolute; right: 0; bottom: 93px; max-width: 340px;
  font-size: 12px; color: #8C743D; opacity: 0; transition: opacity .3s; text-align: right;
}
.outcome.visible { opacity: 1; }
.outcome strong { font-size: 13px; font-weight: 500; display: block; }
.outcome small { display: block; font-size: 11px; letter-spacing: .06em; color: #8F8879; }

.scene-caption { position: absolute; bottom: 2px; left: 0; right: 0; padding: 0 5px; }
.steps { display: flex; justify-content: space-between; gap: 8px; }
.steps span { font-size: 11px; color: #8F8A7E; white-space: nowrap; transition: color .3s; }
.steps b { font-weight: 400; margin-right: 4px; color: #B6985A; }
.steps span.on { color: #796131; }
.controls { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.controls button { background: transparent; border: 0; color: #9A885F; font-size: 11px; padding: 3px; }
.controls button:last-child { text-decoration: underline; text-underline-offset: 4px; }
.controls button:hover { color: var(--gold-deep); }
.note { font-size: 11px; text-align: right; color: #8C8A7E; line-height: 1.5; margin-top: 5px; }

/* ---- 信任帶：無限跑馬燈 ---- */
@keyframes marquee { to { transform: translateX(-50%); } }
.trust-strip {
  width: min(1380px, calc(100% - 50px)); margin: -5px auto 0; min-height: 110px;
  border-radius: 45px 45px 0 0; background: #fff;
  display: flex; align-items: center; overflow: hidden;
  position: relative; z-index: 4; box-shadow: 0 -12px 35px rgba(224, 211, 177, .07);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trust-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.trust-strip:hover .trust-track { animation-play-state: paused; }
.trust-set { display: flex; align-items: center; gap: 85px; padding-right: 85px; flex: none; }
.trust-strip img { height: 52px; width: 150px; object-fit: contain; filter: grayscale(1); opacity: .52; transition: filter .25s, opacity .25s; }
.trust-strip img:hover { filter: none; opacity: 1; }

/* ---- 金色絲帶跑馬燈 ---- */
.ribbon {
  background: linear-gradient(90deg, var(--forest-2), var(--forest) 50%, var(--forest-2));
  overflow: hidden; padding: 13px 0; position: relative; z-index: 3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ribbon-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-set { display: flex; align-items: center; gap: 40px; padding-right: 40px; flex: none; }
.ribbon-set span {
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .08em;
  color: rgba(242, 237, 224, .88); white-space: nowrap;
}
.ribbon-set i { color: var(--gold-bright); font-style: normal; font-size: 11px; animation: twinkle 1.8s ease-in-out infinite alternate; }

/* ---- 區塊標記 ---- */
.section-marker {
  position: absolute; top: 64px; right: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: none;
}
.section-marker span {
  font-family: var(--latin); font-size: 84px; font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 130, 69, .35);
}
.section-marker em { font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .3em; color: var(--faint); }

.section-head { margin-bottom: 36px; position: relative; z-index: 1; }
.section-head .kicker { margin-bottom: 12px; }

/* ---- 卡片金色追光（跟隨滑鼠） ---- */
.qa-row, .svc-row, .story-card, .compare-column, .insight-feature, .cycle-step { position: relative; }
.qa-row::after, .svc-row::after, .story-card::after, .compare-column::after,
.insight-feature::after, .cycle-step::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 178, 94, .15), transparent 72%);
  opacity: 0; transition: opacity .45s;
}
.qa-row:hover::after, .svc-row:hover::after, .story-card:hover::after,
.compare-column:hover::after, .insight-feature:hover::after, .cycle-step:hover::after { opacity: 1; }

/* ============================================================
   01 真實狀況 — 語錄牆（痛點大字 × 解方金卡）
   ============================================================ */
.reality { background: #fff; }
.reality-head { max-width: 700px; margin-bottom: 38px; position: relative; z-index: 1; }
.reality-head h2 { margin-bottom: 18px; }

.qa-ledger { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qa-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.qa-row:hover { transform: translateY(-3px); border-color: rgba(163, 130, 69, .5); box-shadow: 0 14px 34px rgba(106, 85, 36, .1); }

.qa-left { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.qa-ghost {
  font-family: var(--latin); font-weight: 900; font-size: 34px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 130, 69, .4);
  transition: color .35s, -webkit-text-stroke-color .35s;
}
.qa-row:hover .qa-ghost { color: var(--gold); -webkit-text-stroke-color: transparent; }
.qa-copy small { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; display: block; margin-bottom: 7px; }
.qa-quote { font-family: var(--display); font-weight: 500; font-size: 18px; line-height: 1.6; margin-bottom: 8px; }
.qa-quote em { font-style: normal; background: linear-gradient(transparent 64%, rgba(216, 178, 94, .5) 64%); padding: 0 2px; }
.qa-cost {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: #A5533B;
  background: rgba(165, 83, 59, .07); border: 1px solid rgba(165, 83, 59, .28);
  border-radius: 999px; padding: 2px 11px; margin-bottom: 7px;
}
.qa-copy p { font-size: 13px; line-height: 1.75; color: var(--ink-2); }

.qa-fix {
  margin-top: auto;
  background: linear-gradient(160deg, var(--gold-soft), #FBF7EC);
  border: 1px solid rgba(163, 130, 69, .22); border-radius: 12px;
  padding: 14px 17px;
  transition: border-color .35s;
}
.qa-row:hover .qa-fix { border-color: rgba(163, 130, 69, .5); }
.qa-fix small { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 6px; }
.qa-fix small::before { content: "→ "; color: var(--gold); }
.qa-fix h4 { font-family: var(--display); font-size: 15px; line-height: 1.6; margin-bottom: 5px; }
.qa-fix p { font-size: 12.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 8px; }
.qa-fix a { color: var(--gold-deep); font-size: 12.5px; border-bottom: 1px solid rgba(163, 130, 69, .4); padding-bottom: 2px; transition: border-color .25s; }
.qa-fix a:hover { border-color: var(--gold-deep); }

/* ============================================================
   02 鐵粉生態閉環 — 森綠底水平循環
   ============================================================ */
.loop { background: linear-gradient(180deg, var(--forest-2), var(--forest) 30%, var(--forest)); color: var(--cream); overflow: hidden; }
.loop::before {
  content: ""; position: absolute; left: 50%; top: -180px; width: 900px; height: 460px;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(216, 178, 94, .15), transparent 65%);
}
.loop .kicker { color: var(--gold-bright); }
.loop .kicker::before { background: var(--gold-bright); }
.loop .section-marker.light span { -webkit-text-stroke-color: rgba(216, 178, 94, .4); }
.loop .section-marker.light em { color: rgba(242, 237, 224, .45); }
.loop-head { text-align: center; max-width: 720px; margin: 0 auto 44px; position: relative; z-index: 1; }
.loop-head .kicker { justify-content: center; }
.loop-head .kicker::after { content: ""; width: 30px; height: 1px; background: var(--gold-bright); }
.loop-head h2 { color: #fff; margin-bottom: 18px; }
.loop-head .lead { color: rgba(242, 237, 224, .78); }

.cycle {
  list-style: none; display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr;
  gap: 0; align-items: stretch; position: relative; z-index: 1;
}
.cycle-step {
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(216, 178, 94, .28);
  border-radius: 18px; padding: 28px 22px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.cycle-step:hover { transform: translateY(-6px); border-color: rgba(216, 178, 94, .6); background: rgba(216, 178, 94, .1); }
.cycle-no {
  font-family: var(--latin); font-weight: 900; font-size: 15px; letter-spacing: .12em;
  color: var(--gold-bright);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(216, 178, 94, .45); border-radius: 50%;
}
.cycle-icon svg { width: 36px; height: 36px; color: var(--gold-bright); margin: 4px 0; }
.cycle-step h3 { font-family: var(--display); font-size: 19px; color: #fff; }
.cycle-step p { font-size: 12.5px; line-height: 1.8; color: rgba(242, 237, 224, .66); }
.cycle-arrow { display: grid; place-items: center; color: var(--gold-bright); }
.cycle-arrow svg { width: 34px; height: 20px; animation: nudge 2s ease-in-out infinite; }
.cycle-arrow:nth-of-type(2) svg { animation-delay: .35s; }
.cycle-arrow:nth-of-type(4) svg { animation-delay: .7s; }
.cycle-arrow:nth-of-type(6) svg { animation-delay: 1.05s; }
@keyframes nudge { 0%, 100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(5px); opacity: 1; } }

.cycle-return { position: relative; max-width: 900px; margin: 6px auto 0; text-align: center; padding-top: 56px; }
.cycle-return::before {
  content: ""; position: absolute; top: 40px; left: 50%; width: 460px; height: 120px;
  transform: translateX(-50%); pointer-events: none; filter: blur(8px);
  background: radial-gradient(ellipse, rgba(216, 178, 94, .22), transparent 68%);
  animation: glowpulse 3.2s ease-in-out infinite;
}
@keyframes glowpulse { 0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.return-arc { position: absolute; top: -8px; left: 0; width: 100%; height: 90px; color: var(--gold-bright); opacity: .7; }
.return-arc path:first-of-type { animation: dashflow 1.4s linear infinite; }
@keyframes dashflow { to { stroke-dashoffset: -26; } }
.loop-center { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--gold-bright); position: relative; }
.loop-center span { font-family: var(--mono); font-size: 13px; color: rgba(242, 237, 224, .75); }
.loop-caption { margin-top: 10px; font-size: 13.5px; color: rgba(242, 237, 224, .6); position: relative; }

/* ============================================================
   03 服務 — 跨頁式服務列（編號欄 × 文字 × 視覺面板）
   ============================================================ */
.svc-ledger { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 11px;
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.svc-row:hover { transform: translateY(-3px); border-color: rgba(163, 130, 69, .5); box-shadow: 0 14px 34px rgba(106, 85, 36, .1); }
.svc-rail { display: flex; flex-direction: row; align-items: baseline; gap: 12px; }
.svc-no {
  font-family: var(--latin); font-weight: 900; font-size: 34px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 130, 69, .4);
  transition: color .35s, -webkit-text-stroke-color .35s;
}
.svc-row:hover .svc-no { color: var(--gold); -webkit-text-stroke-color: transparent; }
.svc-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint); text-transform: uppercase; }
.svc-text h3 { font-family: var(--display); font-size: 19px; margin-bottom: 5px; }
.svc-text .question { font-size: 12.5px; font-weight: 600; color: var(--gold-deep); margin-bottom: 6px; }
.svc-desc { font-size: 13px; line-height: 1.75; color: var(--ink-2); margin-bottom: 12px; }
.svc-text ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.svc-text ul li {
  font-size: 11.5px; color: var(--ink-2); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px;
  transition: border-color .3s, color .3s, background .3s;
}
.svc-row:hover .svc-text ul li { border-color: rgba(163, 130, 69, .4); background: var(--gold-soft); color: var(--gold-deep); }
.svc-text .case { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.svc-art {
  margin-top: auto;
  background: linear-gradient(150deg, var(--gold-soft), #FBF7EC);
  border: 1px solid rgba(163, 130, 69, .2); border-radius: 14px;
  padding: 14px 16px; min-height: 0; display: flex; align-items: center; justify-content: center;
  transition: border-color .35s;
}
.svc-row:hover .svc-art { border-color: rgba(163, 130, 69, .5); }

.journey { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; justify-content: center; }
.journey > span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); }
.journey svg { width: 32px; height: 32px; padding: 8px; box-sizing: content-box; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--gold-deep); }
.journey b { font-family: var(--mono); font-weight: 400; color: var(--gold); font-size: 14px; }

.mini-chat { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 240px; }
.mini-chat span {
  font-size: 11px; color: var(--ink-2); width: fit-content;
  background: var(--card); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: 10px 10px 10px 3px;
}
.mini-chat span:nth-child(2) { align-self: flex-end; border-radius: 10px 10px 3px 10px; background: var(--gold-soft); border-color: rgba(163, 130, 69, .3); color: var(--gold-deep); }
.mini-chat small { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--faint); margin-top: 3px; }

.ai-paper { border: 1px dashed rgba(163, 130, 69, .45); border-radius: 12px; padding: 11px 14px; background: var(--card); width: 100%; max-width: 240px; }
.ai-paper small { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; color: var(--gold-deep); }
.ai-paper b { display: block; font-size: 12.5px; margin: 3px 0 8px; }
.ai-paper i { display: block; height: 4px; border-radius: 3px; background: rgba(39, 43, 39, .08); margin-top: 5px; }
.ai-paper i:nth-of-type(1) { width: 88%; background: linear-gradient(90deg, rgba(163, 130, 69, .55), rgba(39, 43, 39, .07)); }
.ai-paper i:nth-of-type(2) { width: 64%; }
.ai-paper i:nth-of-type(3) { width: 74%; }

.strategy { display: flex; gap: 8px; width: 100%; }
.strategy span {
  flex: 1; text-align: center; padding: 12px 6px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: 11px; background: var(--card); color: var(--ink-2);
  transition: border-color .3s, color .3s;
}
.svc-row:hover .strategy span { border-color: rgba(163, 130, 69, .5); color: var(--gold-deep); }

/* ============================================================
   04 差異比較
   ============================================================ */
.comparison { background: var(--paper-2); }
.compare-card { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.compare-intro .kicker { margin-bottom: 16px; }
.compare-intro h2 { margin-bottom: 16px; }
.compare-overview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare-column { border-radius: 18px; padding: 26px 24px; border: 1px solid var(--line); background: var(--card); }
.compare-column h3 { font-size: 18px; margin-bottom: 16px; color: var(--ink-2); }
.compare-column ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.compare-column li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-3); }
.compare-column .status { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 11px; }
.status.no { background: var(--paper-2); color: var(--faint); border: 1px solid var(--line); }
.status.yes { background: linear-gradient(115deg, #CBB173, #A38245); color: #fff; font-weight: 900; box-shadow: 0 4px 12px rgba(163, 130, 69, .35); }
.compare-column.encore {
  background: linear-gradient(160deg, #FFFDF6, var(--gold-soft) 70%);
  border-color: rgba(163, 130, 69, .5);
  box-shadow: 0 20px 46px rgba(163, 130, 69, .16);
}
.compare-column.encore h3 { color: var(--gold-deep); font-family: var(--display); font-size: 20px; }
.compare-column.encore li { color: var(--ink); }

.full-comparison { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.full-comparison summary {
  cursor: pointer; list-style: none; padding: 15px 22px; font-size: 14px; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px; transition: color .25s;
}
.full-comparison summary::-webkit-details-marker { display: none; }
.full-comparison summary::before { content: "+"; font-family: var(--mono); color: var(--gold-deep); transition: transform .3s; }
.full-comparison[open] summary::before { transform: rotate(45deg); }
.full-comparison summary:hover { color: var(--ink); }
.table-scroll { overflow-x: auto; padding: 4px 22px 14px; }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 13.5px; }
.table-scroll caption { text-align: left; }
.table-scroll th, .table-scroll td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.table-scroll thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold-deep); text-transform: uppercase; }
.table-scroll tbody th { text-align: left; font-weight: 600; color: var(--ink); }
.table-scroll tbody th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
.table-scroll td { color: var(--ink-3); }
.table-scroll td:first-of-type { color: var(--gold-deep); font-weight: 700; background: var(--gold-soft); }
.legend { padding: 0 22px 16px; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================
   05 成功故事
   ============================================================ */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }
.story-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  padding: 30px 28px; display: flex; flex-direction: column; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.story-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, #CBB173, #937035);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.story-card:hover { transform: translateY(-6px); border-color: rgba(163, 130, 69, .45); box-shadow: 0 24px 54px rgba(106, 85, 36, .13); }
.story-card:hover::before { transform: scaleX(1); }
.case-logos { display: flex; gap: 10px; align-items: center; min-height: 38px; margin-bottom: 18px; }
.case-logos img { height: 26px; width: auto; opacity: .85; }
.story-card .number {
  font-family: var(--latin); font-weight: 900; font-size: 54px; line-height: 1;
  color: var(--gold); margin-bottom: 4px; letter-spacing: -.01em;
}
.story-card > small { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-3); margin-bottom: 14px; }
.story-card h3 { font-family: var(--display); font-size: 17.5px; margin-bottom: 8px; }
.case-detail { border-top: 1px solid var(--line); margin-top: auto; }
.case-detail summary {
  cursor: pointer; list-style: none; padding: 11px 0 2px; font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.case-detail summary::-webkit-details-marker { display: none; }
.case-detail summary::before { content: "+"; font-family: var(--mono); color: var(--gold-deep); transition: transform .3s; }
.case-detail[open] summary::before { transform: rotate(45deg); }
.case-detail summary:hover { color: var(--ink); }
.case-detail p { font-size: 13px; color: var(--ink-2); padding-bottom: 10px; }
.story-card > a {
  color: var(--gold-deep); font-size: 13px; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px; transition: gap .3s var(--ease);
}
.story-card > a:hover { gap: 11px; }

/* ============================================================
   06 實戰洞察 — 期刊式（深綠焦點卡 + 側列）
   ============================================================ */
.insight-grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px;
  align-items: stretch; position: relative; z-index: 1;
}
.insight-feature {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, var(--forest-2), var(--forest));
  border-radius: 18px; padding: 26px 28px; overflow: hidden;
  color: var(--cream); text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.insight-feature:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(37, 59, 48, .35); }
.if-no {
  position: absolute; top: 20px; right: 28px;
  font-family: var(--latin); font-weight: 900; font-size: 44px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(216, 178, 94, .45);
}
.if-body { position: relative; z-index: 1; }
.if-body small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--gold-bright); }
.if-body h3 { font-family: var(--display); font-size: 20px; line-height: 1.55; color: #fff; margin: 10px 0 8px; max-width: 24ch; }
.if-body p { font-size: 13px; line-height: 1.75; color: rgba(242, 237, 224, .72); margin-bottom: 16px; max-width: 44ch; }
.if-cta {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--gold-bright); border-bottom: 1px solid rgba(216, 178, 94, .5); padding-bottom: 3px;
  transition: gap .3s var(--ease), color .3s;
}
.insight-feature:hover .if-cta { gap: 14px; color: #fff; }
.if-art { position: absolute; right: -30px; bottom: -42px; width: 190px; height: 190px; pointer-events: none; }
.if-orb { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(216, 178, 94, .28), transparent 65%); }
.if-ring {
  position: absolute; inset: 14px; border-radius: 50%;
  border: 1px dashed rgba(216, 178, 94, .55);
  animation: spin 16s linear infinite;
}
.if-dot {
  position: absolute; top: -5px; left: 50%; margin-left: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 14px rgba(216, 178, 94, .95);
}
@keyframes spin { to { transform: rotate(360deg); } }
.if-glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--mono); font-size: 34px; letter-spacing: .16em; font-weight: 700;
  color: rgba(216, 178, 94, .4);
}

.insight-side { display: flex; flex-direction: column; justify-content: center; }
.insight-row {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
  padding: 18px 14px; border-top: 1px solid var(--line); position: relative;
  transition: background .35s;
}
.insight-row:last-child { border-bottom: 1px solid var(--line); }
.insight-row::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--gold-soft), transparent 55%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.insight-row:hover { background: rgba(247, 242, 231, .6); }
.insight-row:hover::before { opacity: 1; }
.insight-number {
  font-family: var(--latin); font-weight: 900; font-size: 26px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 130, 69, .5);
  transition: color .35s;
}
.insight-row:hover .insight-number { color: var(--gold); -webkit-text-stroke-color: transparent; }
.insight-body small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--ink-3); }
.insight-body h3 { font-size: 15px; margin: 5px 0 3px; font-family: var(--display); line-height: 1.6; }
.insight-body h3 a { color: var(--ink); transition: color .25s; }
.insight-body h3 a:hover { color: var(--gold-deep); }
.insight-body p { font-size: 12.5px; color: var(--ink-3); }
.insight-link {
  font-size: 13px; color: var(--gold-deep); white-space: nowrap;
  opacity: 0; transform: translateX(-10px); transition: all .35s var(--ease);
}
.insight-row:hover .insight-link, .insight-row:focus-within .insight-link { opacity: 1; transform: none; }
.all-insights {
  display: inline-block; margin-top: 22px; color: var(--ink-2); font-size: 14px;
  border-bottom: 1px solid var(--line-strong); padding-bottom: 3px; transition: color .25s, border-color .25s;
}
.all-insights:hover { color: var(--gold-deep); border-color: var(--gold); }

/* ============================================================
   07 預約 — 森綠
   ============================================================ */
.book { background: linear-gradient(180deg, var(--forest), var(--forest-2)); color: var(--cream); text-align: center; overflow: hidden; padding: 96px 0; }
.book-bg { position: absolute; inset: 0; pointer-events: none; }
.book-bg span { position: absolute; border-radius: 50%; }
.book-bg span:nth-child(1) {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(216, 178, 94, .18) 0%, rgba(216, 178, 94, .05) 42%, transparent 68%);
}
.book-bg span:nth-child(2) {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 540px; height: 540px; border: 1px solid rgba(216, 178, 94, .25);
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .9; transform: translate(-50%, -50%) scale(1.05); } }
.book-stars { position: absolute; inset: 0; pointer-events: none; }
.book-stars i {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 8px rgba(216, 178, 94, .8);
  animation: twinkle 2.6s ease-in-out infinite alternate;
}
.book-stars i:nth-child(1) { left: 12%; top: 22%; }
.book-stars i:nth-child(2) { left: 26%; top: 62%; width: 3px; height: 3px; animation-delay: .5s; }
.book-stars i:nth-child(3) { left: 38%; top: 30%; width: 5px; height: 5px; animation-delay: 1.1s; }
.book-stars i:nth-child(4) { left: 55%; top: 18%; animation-delay: .3s; }
.book-stars i:nth-child(5) { left: 68%; top: 48%; width: 3px; height: 3px; animation-delay: 1.6s; }
.book-stars i:nth-child(6) { left: 82%; top: 26%; animation-delay: .8s; }
.book-stars i:nth-child(7) { left: 88%; top: 64%; width: 5px; height: 5px; animation-delay: 2s; }
.book-stars i:nth-child(8) { left: 72%; top: 78%; animation-delay: 1.3s; }
.book-stars i:nth-child(9) { left: 45%; top: 74%; width: 3px; height: 3px; animation-delay: .2s; }
.book-stars i:nth-child(10) { left: 18%; top: 82%; animation-delay: 1.9s; }
@keyframes twinkle { 0% { opacity: .15; transform: scale(.6); } 100% { opacity: 1; transform: scale(1.15); } }
.book-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.book .kicker { justify-content: center; color: var(--gold-bright); }
.book .kicker::before, .book .kicker::after { content: ""; width: 30px; height: 1px; background: var(--gold-bright); }
.book h2 { color: #fff; font-size: clamp(30px, 4vw, 48px); margin: 18px 0 16px; }
.book .lead { text-align: center; color: rgba(242, 237, 224, .78); max-width: 62ch; margin-bottom: 36px; }

/* ============================================================
   頁尾
   ============================================================ */
.site-footer { background: var(--paper-2); padding: 74px 0 0; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 54px; position: relative; z-index: 1; }
.footer-brand .wordmark img { width: 155px; }
.footer-tagline { font-family: var(--display); font-size: 15px; color: var(--gold-deep); margin: 14px 0 10px; }
.footer-mail { color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.footer-mail:hover { color: var(--gold-deep); border-color: var(--gold); }
.footer-col h3 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; color: var(--ink-2); font-size: 14px; padding: 5px 0; transition: color .25s, transform .25s var(--ease); }
.footer-col a:hover { color: var(--gold-deep); transform: translateX(4px); }
.footer-bottom {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding: 22px 0; font-size: 12.5px; color: var(--ink-3);
  position: relative; z-index: 1;
}
.footer-bottom a { color: var(--ink-3); transition: color .25s; }
.footer-bottom a:hover { color: var(--gold-deep); }
.footer-bottom .to-top { margin-left: auto; }
.footer-watermark {
  font-family: var(--latin); font-weight: 900; font-size: clamp(110px, 17vw, 240px); line-height: .78;
  text-align: center; letter-spacing: .04em; user-select: none; pointer-events: none;
  color: transparent; -webkit-text-stroke: 1px rgba(163, 130, 69, .18);
  transform: translateY(26%);
}

/* ---- 進場動畫 ---- */
.reveal.pre { opacity: 0; transform: translateY(26px); }
.reveal.pre.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }

/* ---- 響應式 ---- */
@media (max-width: 1180px) {
  .section-marker span { font-size: 64px; }
  .qa-ledger, .svc-ledger { gap: 14px; }
}

@media (max-width: 1023px) {
  .wrap { width: calc(100% - 56px); }
  .stage { grid-template-columns: 1fr; gap: 40px; padding: 30px 30px 50px; }
  .stage-wrap { padding-top: 82px; }
  .scene { max-width: 620px; margin: 0 auto; width: 100%; }
  .qa-ledger, .svc-ledger { grid-template-columns: 1fr; }
  .cycle { grid-template-columns: 1fr 1fr; gap: 14px; }
  .cycle-arrow { display: none; }
  .compare-card { grid-template-columns: 1fr; gap: 40px; }
  .story-grid { grid-template-columns: 1fr; max-width: 480px; }
  .insight-grid { grid-template-columns: 1fr; }
  .insight-row { grid-template-columns: 56px 1fr; }
  .insight-link { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .site-nav { width: calc(100% - 40px); height: 70px; }
  .menu-toggle { display: flex; }
  .site-links {
    position: fixed; inset: 0; z-index: 90;
    flex-direction: column; justify-content: center; align-items: center; gap: 16px;
    background: rgba(255, 254, 250, .97);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  }
  .site-links.open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
  .site-links a:not(.gold-button) {
    font-family: var(--display); font-size: 30px; font-weight: 700;
    opacity: 0; transform: translateY(18px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .site-links.open a:not(.gold-button) { opacity: 1; transform: none; }
  .site-links.open a:nth-child(1) { transition-delay: .06s; }
  .site-links.open a:nth-child(2) { transition-delay: .12s; }
  .site-links.open a:nth-child(3) { transition-delay: .18s; }
  .site-links.open a:nth-child(4) { transition-delay: .24s; }
  .site-links a:not(.gold-button)::after { display: none; }
  .site-links .nav-cta { margin-top: 20px; }
  .section { padding: 72px 0; }
  .section-marker { display: none; }
  .qa-quote { font-size: 17px; }
  .svc-text h3 { font-size: 18px; }
  .cycle { grid-template-columns: 1fr; }
  .book { padding: 96px 0; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .stage { padding: 20px 18px 44px; }
  .stage h1 { font-size: clamp(28px, 7.6vw, 34px); }
  .stage h1 span { white-space: normal; }
  .stage h1 em { white-space: nowrap; }
  .intro { font-size: 15.5px; }
  .hero-actions { gap: 16px; flex-wrap: wrap; }
  .scene { height: auto; min-height: 560px; }
  .hero-sculpture { height: 470px; top: 13px; left: 0; width: 100%; }
  .row { width: 285px; max-width: calc(100% - 10px); padding: 15px; }
  .bubble { font-size: 14px; }
  .row[data-slot="0"] { left: 0; top: 0; }
  .row[data-slot="1"] { right: 0; top: 126px; }
  .row[data-slot="2"] { left: 2%; top: 257px; }
  .outcome { bottom: 119px; max-width: 100%; }
  .typing { top: 380px; }
  .trust-strip { border-radius: 28px 28px 0 0; }
  .trust-set { gap: 30px; padding-right: 30px; }
  .trust-strip img { height: 40px; width: 120px; }
  .ribbon-set { gap: 24px; padding-right: 24px; }
  .ribbon-set span { font-size: 13px; }
  .hero-orbs i { filter: blur(26px); }
  .qa-row, .svc-row { padding: 18px 16px 16px; }
  .compare-overview { grid-template-columns: 1fr; }
  .story-card .number { font-size: 46px; }
  .if-no { font-size: 46px; }
  .if-body h3 { font-size: 21px; }
  .insight-feature { padding: 28px; }
  .insight-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 14px; }
  .insight-number { font-size: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { gap: 12px; }
  .footer-bottom .to-top { margin-left: 0; }
}

/* ============================================================
   v3.5 深度工藝層 — 立體感 × 雙線框 × 金箔 × 雕飾
   ============================================================ */

/* ---- 紙張底色：多層暈染，去平面感 ---- */
body {
  background:
    radial-gradient(1200px 620px at 88% -6%, rgba(237, 224, 201, .38), transparent 62%),
    radial-gradient(1000px 520px at -4% 32%, rgba(244, 235, 216, .42), transparent 56%),
    linear-gradient(180deg, #FFFEFA, #FAF5E9 55%, #FFFEFA);
}

/* ---- Hero 雕飾雙線框 ---- */
.stage-frame {
  position: absolute; inset: 14px 18px 18px; border-radius: 22px;
  border: 1px solid rgba(163, 130, 69, .3); pointer-events: none; z-index: 0;
}
.stage-frame::before {
  content: ""; position: absolute; inset: 5px; border-radius: 17px;
  border: 1px solid rgba(163, 130, 69, .13);
}

/* ---- Hero 地面投影 + 雕刻同心環 ---- */
.scene::before {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 470px; max-width: 94%; aspect-ratio: 1; height: auto;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: -2;
  border: 1px solid rgba(163, 130, 69, .28);
  outline: 1px solid rgba(163, 130, 69, .12); outline-offset: 16px;
}
.scene::after {
  content: ""; position: absolute; left: 50%; bottom: 2px;
  width: 440px; max-width: 82%; height: 64px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(106, 85, 36, .18), transparent 68%);
  filter: blur(12px); pointer-events: none; z-index: -2;
}

/* ---- 對話卡：頂部金線＋更深的多層陰影 ---- */
.row {
  box-shadow: 0 1px 2px rgba(106, 85, 36, .07), 0 20px 46px rgba(106, 85, 36, .15), 3px 4px 0 rgba(238, 232, 220, .4);
}
.row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 178, 94, .65), transparent);
}

/* ---- 金按鈕：光掃過水面 ---- */
.gold-button { position: relative; overflow: hidden; }
.gold-button::after {
  content: ""; position: absolute; top: -4px; bottom: -4px; left: -80%; width: 46%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); transition: left .65s var(--ease); pointer-events: none;
}
.gold-button:hover::after { left: 140%; }

/* ---- 卡片深度：微漸層紙面＋多層陰影＋內襯雙線框 ---- */
.qa-row, .svc-row {
  background: linear-gradient(168deg, #FFFFFF 55%, #FBF7EC);
  box-shadow: 0 1px 2px rgba(106, 85, 36, .06), 0 12px 30px rgba(106, 85, 36, .09);
}
.qa-row:hover, .svc-row:hover {
  box-shadow: 0 2px 4px rgba(106, 85, 36, .07), 0 22px 48px rgba(106, 85, 36, .15);
}
.qa-row::before, .svc-row::before {
  content: ""; position: absolute; inset: 7px; border-radius: 12px; pointer-events: none;
  border: 1px solid rgba(163, 130, 69, .15); transition: border-color .35s;
}
.qa-row:hover::before, .svc-row:hover::before { border-color: rgba(163, 130, 69, .35); }

/* 編號 hover 金箔化 */
.qa-row:hover .qa-ghost, .svc-row:hover .svc-no {
  background: linear-gradient(115deg, #8A6B33, #D8B25E 50%, #A38245);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke-color: transparent;
}

/* ---- 解方小卡：左側金條 ---- */
.qa-fix { border-left: 3px solid rgba(163, 130, 69, .5); }

/* ---- 服務視覺面板：內框 ---- */
.svc-art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px rgba(106, 85, 36, .06); }

/* ---- 雕飾分隔線：區塊之間的金色髮絲線＋菱形 ---- */
.services::before, .stories::before, .insights::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1300px, 92%); height: 10px; pointer-events: none;
  background:
    radial-gradient(circle, rgba(163, 130, 69, .8) 0 2.4px, transparent 2.8px) 50% 50% / 6px 6px no-repeat,
    linear-gradient(90deg, transparent, rgba(163, 130, 69, .35) 18%, rgba(163, 130, 69, .35) 82%, transparent) 50% 50% / 100% 1px no-repeat;
}

/* ---- 故事卡：紙面漸層＋金箔數字 ---- */
.story-card {
  background: linear-gradient(170deg, #FFFFFF 60%, #FDFAF1);
  box-shadow: 0 1px 2px rgba(106, 85, 36, .05), 0 12px 30px rgba(106, 85, 36, .07);
}
.story-card .number {
  background: linear-gradient(115deg, #8A6B33 5%, #D8B25E 40%, #EFDCA6 50%, #A38245 72%, #8A6B33 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- 比較區：卡片陰影＋Encore 欄緞帶標章 ---- */
.compare-column { box-shadow: 0 1px 2px rgba(106, 85, 36, .05), 0 10px 26px rgba(106, 85, 36, .07); }
.compare-column.encore { position: relative; overflow: hidden; }
.compare-column.encore::before {
  content: "ENCORE"; position: absolute; top: 16px; right: -35px;
  transform: rotate(45deg); z-index: 2;
  background: linear-gradient(115deg, #CBB173, #937035); color: #fff;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  padding: 4px 42px; box-shadow: 0 2px 8px rgba(122, 98, 47, .35);
}

/* ---- 完整比較表：金頭線＋斑馬紋 ---- */
.table-scroll thead th { border-bottom: 2px solid rgba(163, 130, 69, .5); }
.table-scroll tbody tr:nth-child(even) { background: rgba(247, 242, 231, .55); }

/* ---- 信任帶：頂部金線＋內部髮絲線 ---- */
.trust-strip { border-top: 1px solid rgba(163, 130, 69, .28); }
.trust-strip::before {
  content: ""; position: absolute; top: 6px; left: 26px; right: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(163, 130, 69, .4), transparent);
  pointer-events: none;
}

/* ---- 絲帶：金色邊線＋織紋＋內陰影 ---- */
.ribbon {
  border-top: 1px solid rgba(216, 178, 94, .4);
  border-bottom: 1px solid rgba(216, 178, 94, .22);
  box-shadow: inset 0 10px 24px rgba(0, 0, 0, .18), inset 0 -8px 20px rgba(0, 0, 0, .14);
}
.ribbon::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 7px);
}

/* ---- 閉環：底部雕刻同心環 ---- */
.loop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-radial-gradient(circle at 50% 118%, transparent 0 79px, rgba(216, 178, 94, .055) 79px 80px);
}

/* ---- 循環步驟卡：內襯框 ---- */
.cycle-step::before {
  content: ""; position: absolute; inset: 7px; border-radius: 12px; pointer-events: none;
  border: 1px solid rgba(216, 178, 94, .16); transition: border-color .35s;
}
.cycle-step:hover::before { border-color: rgba(216, 178, 94, .4); }

/* ---- 洞察焦點卡：內襯金框 ---- */
.insight-feature::before {
  content: ""; position: absolute; inset: 10px; border-radius: 12px; pointer-events: none;
  border: 1px solid rgba(216, 178, 94, .25);
}

/* ---- 洞察列：hover 左金條 ---- */
.insight-row { border-left: 3px solid transparent; }
.insight-row:hover { border-left-color: var(--gold); }

/* ---- 預約區：金色點陣織紋 ---- */
.book::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(216, 178, 94, .16) 1px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
}

/* ---- 幽靈編號強化 ---- */
.section-marker span { -webkit-text-stroke: 1.2px rgba(163, 130, 69, .42); }

/* ---- 頁尾浮水印：金箔漸層填色 ---- */
.footer-watermark {
  background: linear-gradient(180deg, rgba(163, 130, 69, .34), rgba(163, 130, 69, .04) 85%);
  -webkit-background-clip: text; background-clip: text;
}

/* ---- 導覽列 scrolled 更立體 ---- */
.site-header.scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 34px rgba(106, 85, 36, .07); }

/* ============================================================
   v3.6 立體構圖層 — 真實狀況 × 我們怎麼做
   ============================================================ */

/* 卡片自體定位（內襯框／追光的正確錨點） */
.qa-row, .svc-row { position: relative; }

/* 斜置色帶托底：卡片「坐」在色帶上，不再浮在白紙 */
.qa-ledger::before, .svc-ledger::before {
  content: ""; position: absolute; z-index: -1;
  left: -7%; right: -7%; top: 50%; height: min(64%, 360px);
  transform: translateY(-50%) rotate(-2deg); border-radius: 48px;
  background: linear-gradient(100deg, rgba(244, 235, 216, .95), rgba(250, 245, 233, .45) 52%, rgba(244, 235, 216, .55));
  box-shadow: 0 30px 70px rgba(106, 85, 36, .09), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.svc-ledger::before { transform: translateY(-50%) rotate(1.8deg); }

/* 巨幅幽靈字：區塊深處的背景層 */
.reality::after, .services::after {
  position: absolute; right: -1%; top: 34px; z-index: 0; pointer-events: none;
  font-family: var(--latin); font-weight: 900; font-size: clamp(88px, 10vw, 138px);
  line-height: 1; letter-spacing: .04em; color: transparent;
  -webkit-text-stroke: 1px rgba(163, 130, 69, .13); white-space: nowrap;
}
.reality::after { content: "REALITY"; }
.services::after { content: "SERVICE"; top: 18px; }

/* 編號跨出卡緣：破格層次 */
.qa-row, .svc-row { padding-top: 36px; }
.qa-ghost { position: absolute; top: -22px; left: 20px; z-index: 2; font-size: 54px; }
.qa-left { grid-template-columns: 1fr; }
.svc-rail { position: absolute; top: -20px; left: 22px; z-index: 2; }
.svc-no { font-size: 54px; }

/* 卡片交錯：2/4 下沉，打破均質網格 */
.qa-row:nth-child(even), .svc-row:nth-child(even) { transform: translateY(18px); }
.qa-row:nth-child(odd):hover, .svc-row:nth-child(odd):hover { transform: translateY(-4px); }
.qa-row:nth-child(even):hover, .svc-row:nth-child(even):hover { transform: translateY(12px); }

/* 深淺交替：偶數卡暖紙色 */
.qa-row:nth-child(even), .svc-row:nth-child(even) {
  background: linear-gradient(168deg, #FFFDF6, #F7EFDC);
}

/* 解方貼紙：硬 offset 陰影，像貼上去的便籤 */
.qa-fix { box-shadow: 3px 4px 0 rgba(163, 130, 69, .16), 0 8px 20px rgba(106, 85, 36, .08); }
.svc-row:nth-child(odd) .svc-art { box-shadow: 3px 4px 0 rgba(163, 130, 69, .16), 0 8px 20px rgba(106, 85, 36, .08); }

/* 服務視覺面板：偶數改森綠夜色面板 × 金色線稿 */
.svc-row:nth-child(even) .svc-art {
  background: linear-gradient(150deg, var(--forest-2), var(--forest));
  border-color: rgba(216, 178, 94, .4);
  box-shadow: 3px 4px 0 rgba(30, 42, 35, .28), 0 10px 24px rgba(23, 36, 29, .25);
}
.svc-row:nth-child(even) .svc-art svg { color: var(--gold-bright); }
.svc-row:nth-child(even) .journey svg { background: rgba(255, 255, 255, .06); border-color: rgba(216, 178, 94, .45); }
.svc-row:nth-child(even) .journey b { color: var(--gold-bright); }
.svc-row:nth-child(even) .journey > span { color: rgba(242, 237, 224, .78); }
.svc-row:nth-child(even) .mini-chat span { background: rgba(255, 255, 255, .07); border-color: rgba(216, 178, 94, .3); color: rgba(242, 237, 224, .85); }
.svc-row:nth-child(even) .mini-chat span:nth-child(2) { background: rgba(216, 178, 94, .16); border-color: rgba(216, 178, 94, .45); color: var(--gold-bright); }
.svc-row:nth-child(even) .mini-chat small { color: rgba(242, 237, 224, .5); }
.svc-row:nth-child(even) .ai-paper { background: rgba(255, 255, 255, .05); border-color: rgba(216, 178, 94, .4); }
.svc-row:nth-child(even) .ai-paper small { color: var(--gold-bright); }
.svc-row:nth-child(even) .ai-paper b { color: var(--cream); }
.svc-row:nth-child(even) .ai-paper i { background: rgba(255, 255, 255, .14); }
.svc-row:nth-child(even) .ai-paper i:nth-of-type(1) { background: linear-gradient(90deg, rgba(216, 178, 94, .7), rgba(255, 255, 255, .12)); }
.svc-row:nth-child(even) .strategy span { background: rgba(255, 255, 255, .06); border-color: rgba(216, 178, 94, .4); color: rgba(242, 237, 224, .85); }
.svc-row:nth-child(even) .strategy span:hover { border-color: var(--gold-bright); color: #fff; }

/* 響應式收整 */
@media (max-width: 1023px) {
  .reality::after, .services::after { font-size: 76px; top: 10px; }
}
@media (max-width: 640px) {
  .qa-row, .svc-row { padding: 32px 16px 16px; }
  .qa-row:nth-child(even), .svc-row:nth-child(even) { transform: translateY(10px); }
  .qa-row:nth-child(even):hover, .svc-row:nth-child(even):hover { transform: translateY(6px); }
  .qa-ghost { top: -16px; font-size: 42px; }
  .svc-rail { top: -14px; }
  .svc-no { font-size: 42px; }
  .reality::after, .services::after { font-size: 54px; top: 6px; }
  .qa-ledger::before, .svc-ledger::before { height: 72%; }
}

/* ---- 動畫偏好 ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal.pre { opacity: 1; transform: none; }
  .book-bg span:nth-child(2) { animation: none; }
  .stage h1 em { animation: none; background: none; color: #202720; }
  .hero-orbs i { animation: none; opacity: .5; }
  .scroll-progress { transition: none; }
}