/* ============================================================
   好夢收納所 官網 — 設計系統
   色彩沿用 App tokens（src/constants/colors.ts）
   夜空水彩背景 + 月光金 + 奶油卡片 + 圓角 24
   ============================================================ */
:root {
  --night-deep: #141B36;
  --night: #222B50;
  --night-soft: #3A436A;
  --cream: #FFF9F0;
  --cream-soft: #F6EDDF;
  --moonlight: #F2CB72;
  --moonlight-deep: #D8A94D;
  --mist-purple: #C9C0E4;
  --dusty-rose: #D9AFAE;
  --sage: #B9C9B0;
  --text: #303956;
  --body-text: #606880;
  --muted-text: #979DB3;

  --serif: "Noto Serif TC", "Noto Serif JP", "Songti TC", serif;
  --sans: "Noto Sans TC", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "PingFang TC", "Hiragino Sans", sans-serif;

  --radius-lg: 24px;
  --radius-md: 18px;
  --shadow-card: 0 18px 44px rgba(8, 12, 32, 0.45);
  --shadow-soft: 0 10px 26px rgba(8, 12, 32, 0.3);
  --gold-line: rgba(242, 203, 114, 0.38);
  --gold-line-strong: rgba(242, 203, 114, 0.65);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--cream);
  line-height: 1.85;
  background: var(--night-deep);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── 語言切換：非當前語言內容隱藏 ─── */
html[data-lang="zh"] [data-l]:not([data-l="zh"]),
html[data-lang="ja"] [data-l]:not([data-l="ja"]),
html[data-lang="en"] [data-l]:not([data-l="en"]) { display: none !important; }

/* ─── 全站夜空背景 ─── */
.night-bg { position: fixed; inset: 0; z-index: -2; background: var(--night-deep); }
.night-bg::before {
  content: ""; position: absolute; inset: 0;
  background: url(../assets/bg-stars.jpg) center top / cover no-repeat;
  opacity: 0.85;
}
.night-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(520px 380px at 88% 4%, rgba(242, 203, 114, 0.14), transparent 68%),
    radial-gradient(900px 520px at 10% 100%, rgba(34, 43, 80, 0.85), transparent 70%),
    linear-gradient(180deg, rgba(20, 27, 54, 0.12) 0%, rgba(20, 27, 54, 0.55) 100%);
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* 裝飾星星 */
.sp { position: absolute; color: var(--moonlight); pointer-events: none; user-select: none;
  animation: twinkle 3.4s ease-in-out infinite alternate; text-shadow: 0 0 14px rgba(242,203,114,.8); }
@keyframes twinkle { from { opacity: .25; transform: scale(.85); } to { opacity: 1; transform: scale(1.1); } }

/* ─── 字體階層 ─── */
.display { font-family: var(--serif); font-weight: 700; letter-spacing: 0.1em; line-height: 1.55; }
.gold {
  background: linear-gradient(180deg, #FBE7B4 5%, var(--moonlight) 55%, var(--moonlight-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 14px; letter-spacing: 0.32em; color: var(--moonlight);
  font-family: var(--serif); font-weight: 600;
}
.eyebrow::before, .eyebrow::after { content: "✦"; font-size: 11px; opacity: .8; }
.eyebrow.left { justify-content: flex-start; }

/* ─── Header ─── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(16, 21, 44, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201, 192, 228, 0.14);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 68px; gap: 16px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.brand img {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold-line-strong);
  box-shadow: 0 0 16px rgba(242, 203, 114, 0.35);
}
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 17.5px; letter-spacing: 0.12em; line-height: 1.3; }
.brand-tag { font-size: 10.5px; color: var(--mist-purple); letter-spacing: 0.14em; line-height: 1.4; }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav > a { color: var(--mist-purple); text-decoration: none; font-size: 14px; letter-spacing: 0.06em; transition: color .2s; }
.site-nav > a:hover { color: var(--moonlight); }

.lang-switch {
  display: flex; gap: 3px; background: rgba(58, 67, 106, 0.65);
  border: 1px solid rgba(201, 192, 228, 0.2); border-radius: 999px; padding: 4px;
}
.lang-switch button {
  border: 0; background: transparent; color: var(--mist-purple);
  font-size: 12.5px; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font-family: inherit; letter-spacing: 0.04em; transition: all .2s;
}
.lang-switch button.active {
  background: linear-gradient(180deg, #F7DfA0, var(--moonlight));
  color: var(--night-deep); font-weight: 700;
  box-shadow: 0 2px 10px rgba(242, 203, 114, 0.4);
}

/* ─── 按鈕 ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-size: 16px; font-weight: 700; letter-spacing: 0.1em;
  padding: 15px 38px; border-radius: 999px; transition: transform .25s, box-shadow .25s;
}
.btn-primary {
  background: linear-gradient(180deg, #F9E2A8 0%, var(--moonlight) 45%, #E5B95C 100%);
  color: #3A2E10;
  box-shadow: 0 12px 30px rgba(242, 203, 114, 0.32), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(242, 203, 114, 0.45); }
.btn-ghost { border: 1.5px solid rgba(201, 192, 228, 0.55); color: var(--mist-purple); }
.btn-ghost:hover { border-color: var(--moonlight); color: var(--moonlight); transform: translateY(-2px); }

/* ─── Section 骨架 ─── */
section { padding: 88px 0; position: relative; scroll-margin-top: 90px; }
h2.section-title {
  text-align: center; font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px); letter-spacing: 0.12em; line-height: 1.6;
  margin: 14px 0 14px;
}
p.section-sub { text-align: center; color: var(--mist-purple); max-width: 640px; margin: 0 auto 52px; font-size: 15px; letter-spacing: 0.05em; }
.star-divider { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 0 auto; max-width: 320px; color: var(--gold-line-strong); }
.star-divider::before, .star-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold-line)); }
.star-divider::after { background: linear-gradient(90deg, var(--gold-line), transparent); }

/* ─── Hero ─── */
.hero { padding: 96px 0 72px; overflow: visible; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: center; }
.hero h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(30px, 4.6vw, 46px); letter-spacing: 0.12em; line-height: 1.62; margin: 22px 0 20px; }
.hero .sub { color: var(--mist-purple); font-size: clamp(15px, 1.6vw, 17px); max-width: 460px; letter-spacing: 0.04em; }
.hero .cta-row { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; }
.hero .eyebrow { justify-content: flex-start; }
.trust-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--mist-purple); letter-spacing: 0.05em;
  border: 1px solid rgba(201, 192, 228, 0.28); background: rgba(34, 43, 80, 0.5);
  border-radius: 999px; padding: 6px 14px;
}

/* ─── iPhone 模擬框 ─── */
.phone-stage { position: relative; display: flex; justify-content: center; padding: 20px 0; }
.phone {
  width: 318px; border-radius: 50px; padding: 11px;
  background: linear-gradient(155deg, #39456f 0%, #10162E 55%, #1c2547 100%);
  box-shadow: 0 34px 80px rgba(5, 8, 24, 0.65), 0 0 0 1px rgba(201,192,228,.14),
    0 0 60px rgba(242, 203, 114, 0.08);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.phone-screen {
  border-radius: 40px; overflow: hidden; background: var(--night-deep);
  aspect-ratio: 9 / 18.6; position: relative; display: flex; flex-direction: column;
}
.phone-screen::before {
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; background: #0B0F22; border-radius: 999px; z-index: 5;
}

/* 首頁畫面模擬(對照 src/app/(tabs)/index.tsx:整張房間插畫為背景,文字與卡片疊在上面) */
.app-home { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.app-home > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.app-home::before { content: ""; position: absolute; inset: 0; background: rgba(4, 14, 39, 0.10); }
.app-greet-block { position: absolute; top: 48px; left: 17px; right: 16px; z-index: 2; }
.app-greet { font-weight: 800; font-size: 18.5px; letter-spacing: 0.03em; line-height: 1.45; color: var(--cream); text-shadow: 0 2px 7px rgba(0, 0, 0, 0.45); }
.app-greet .moon { color: var(--moonlight); }
.app-greet-sub { font-size: 11px; font-weight: 600; color: #F4E9D9; letter-spacing: 0.04em; line-height: 1.6; margin-top: 9px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.app-bottom { position: relative; z-index: 2; padding: 0 13px 12px; display: flex; flex-direction: column; gap: 9px; }
.app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-mini {
  background: #FFF8EE; border: 1px solid #E8D6C0; border-radius: 15px; padding: 10px 11px;
  min-height: 92px; color: var(--text); display: flex; flex-direction: column; gap: 1px; position: relative;
  box-shadow: 0 7px 12px rgba(4, 13, 35, 0.24);
}
.app-mini strong { font-size: 12px; letter-spacing: 0.03em; }
.app-mini .count { font-size: 9.5px; color: #65708A; margin-top: 5px; line-height: 1.5; }
.app-mini .sub2 { font-size: 9px; color: #65708A; line-height: 1.5; padding-right: 38px; }
.app-mini img { position: absolute; right: 5px; bottom: 3px; width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.app-cta {
  background: var(--moonlight); color: var(--text);
  font-weight: 800; font-size: 13px; letter-spacing: 0.06em;
  text-align: center; border-radius: 14px; padding: 13px; box-shadow: 0 8px 14px rgba(224, 169, 68, 0.36);
}
.app-tabbar {
  display: flex; justify-content: space-around; align-items: flex-start;
  padding: 6px 2px 14px; border-top: 1px solid var(--night-soft);
  background: var(--night-deep); position: relative; z-index: 3;
}
.app-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8.5px; font-weight: 600; color: var(--muted-text); letter-spacing: 0.03em; }
.app-tab .ico { font-size: 13px; line-height: 1.2; }
.app-tab.active { color: var(--moonlight); }
.tab-cat {
  width: 42px; height: 42px; margin-top: -19px; border-radius: 50%;
  background: var(--night-soft); border: 3px solid var(--night-deep);
  display: flex; align-items: center; justify-content: center;
}
.tab-cat img { width: 34px; height: 34px; object-fit: contain; }

/* 泡泡註解 */
.bubble {
  position: absolute; z-index: 6;
  background: var(--cream); color: var(--text);
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5;
  padding: 10px 16px; border-radius: 16px;
  border: 1.5px solid var(--gold-line-strong);
  box-shadow: 0 10px 26px rgba(8, 12, 32, 0.4), 0 0 18px rgba(242, 203, 114, 0.18);
  white-space: nowrap;
}
.bubble::after {
  content: ""; position: absolute; width: 11px; height: 11px; background: var(--cream);
  transform: rotate(45deg);
}
.bubble.tail-l::after { left: -7px; top: 50%; margin-top: -6px; border-left: 1.5px solid var(--gold-line-strong); border-bottom: 1.5px solid var(--gold-line-strong); }
.bubble.tail-r::after { right: -7px; top: 50%; margin-top: -6px; border-right: 1.5px solid var(--gold-line-strong); border-top: 1.5px solid var(--gold-line-strong); }
.bubble.tail-b::after { bottom: -7px; left: 26px; border-right: 1.5px solid var(--gold-line-strong); border-bottom: 1.5px solid var(--gold-line-strong); }

/* ─── 深夜思緒劇場(痛點) ─── */
.pain-stage {
  position: relative; border-radius: 34px; overflow: hidden; text-align: center;
  background:
    radial-gradient(720px 420px at 80% 0%, rgba(58, 67, 106, 0.55), transparent 65%),
    radial-gradient(620px 420px at 8% 100%, rgba(34, 43, 80, 0.75), transparent 70%),
    linear-gradient(180deg, #0F1530, #1A2247 55%, #111834);
  border: 1px solid rgba(201, 192, 228, 0.22);
  box-shadow: var(--shadow-card), inset 0 0 90px rgba(10, 14, 34, 0.6);
  padding: 62px 48px 56px;
}
.pain-stage .moon-glyph {
  position: absolute; top: 34px; right: 46px; font-size: 38px; line-height: 1;
  filter: drop-shadow(0 0 20px rgba(242, 203, 114, 0.65)); opacity: 0.95;
  animation: floaty 8s ease-in-out infinite;
}
.think-field { position: relative; height: 300px; margin: 38px auto 6px; max-width: 880px; }
.think {
  position: absolute; text-align: left; max-width: 100%;
  background: rgba(22, 29, 58, 0.86);
  border: 1px solid rgba(201, 192, 228, 0.34);
  border-radius: 18px 18px 18px 5px;
  padding: 12px 19px 11px;
  box-shadow: 0 16px 34px rgba(5, 8, 24, 0.55), 0 0 26px rgba(201, 192, 228, 0.07);
  animation: bob 6.5s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-9px) rotate(var(--rot, 0deg)); }
}
.think .tm { display: block; font-family: var(--serif); font-size: 10.5px; letter-spacing: 0.26em; color: var(--mist-purple); opacity: 0.8; margin-bottom: 3px; }
.think .tx { font-size: 14.5px; color: #E3E6F2; letter-spacing: 0.04em; line-height: 1.7; white-space: nowrap; }
.think .hl { color: var(--moonlight); font-weight: 700; }
.pain-punch { font-family: var(--serif); font-weight: 700; font-size: clamp(19px, 2.7vw, 26px); letter-spacing: 0.12em; line-height: 1.9; margin-top: 30px; }
.pain-sub { color: var(--mist-purple); font-size: 14.5px; letter-spacing: 0.08em; margin-top: 12px; }
.pain-cta { margin-top: 28px; }
@media (max-width: 900px) {
  .pain-stage { padding: 46px 22px 44px; }
  .pain-stage .moon-glyph { top: 20px; right: 22px; font-size: 30px; }
  .think-field { height: auto; display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
  .think { position: static !important; }
  .think:nth-child(even) { align-self: flex-end; }
  .think .tx { white-space: normal; }
}

/* ─── 三步驟 ─── */
.step { display: grid; gap: 64px; align-items: center; grid-template-columns: 1fr 1fr; margin-bottom: 96px; }
.step:last-of-type { margin-bottom: 0; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--gold-line-strong); color: var(--moonlight);
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  box-shadow: 0 0 22px rgba(242, 203, 114, 0.25), inset 0 0 12px rgba(242, 203, 114, 0.12);
  margin-bottom: 18px;
}
.step-body h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 2.8vw, 27px); letter-spacing: 0.12em; line-height: 1.6; margin-bottom: 14px; }
.step-body p { color: var(--mist-purple); font-size: 15px; letter-spacing: 0.04em; max-width: 430px; }
.step-note { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; }

/* 模擬卡片(心事表單) */
.sim-card {
  background: var(--cream); color: var(--text);
  border-radius: var(--radius-lg); padding: 24px 22px;
  box-shadow: var(--shadow-card); position: relative;
  border: 1px solid rgba(216, 169, 77, 0.25);
}
.sim-card .sim-title { font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-align: center; margin-bottom: 14px; }
.sim-label { font-size: 12.5px; font-weight: 700; color: var(--text); letter-spacing: 0.05em; margin: 14px 0 8px; }
.sim-input {
  background: #FFFFFF; border: 1px solid #E8DFCE; border-radius: 14px;
  padding: 13px 14px; font-size: 12.5px; color: var(--muted-text); line-height: 1.7; min-height: 68px;
  box-shadow: inset 0 2px 6px rgba(48, 57, 86, 0.05);
}
.sim-count { text-align: right; font-size: 10px; color: var(--muted-text); margin-top: 3px; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat-chip {
  background: #FFFFFF; border: 1px solid #EFE6D4; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 7px;
}
.cat-chip img { width: 30px; height: 30px; object-fit: contain; }
.cat-chip span { font-size: 9.5px; color: var(--body-text); letter-spacing: 0.02em; white-space: nowrap; }
.moon-row { display: flex; gap: 8px; align-items: center; }
.moon-chip {
  flex: 1; text-align: center; background: #FFFFFF; border: 1px solid #EFE6D4;
  border-radius: 12px; padding: 8px 0 6px; font-size: 11px; color: var(--muted-text);
}
.moon-chip .m { display: block; font-size: 14px; }
.moon-chip.active { background: #FDF3DC; border-color: var(--moonlight-deep); color: #8A6A25; font-weight: 700; box-shadow: 0 3px 10px rgba(216,169,77,.25); }
.sim-btn {
  margin-top: 16px; background: linear-gradient(180deg, #F9E2A8, var(--moonlight) 55%, #E5B95C);
  color: #3A2E10; font-weight: 700; font-size: 13.5px; letter-spacing: 0.1em;
  text-align: center; border-radius: 999px; padding: 12px; box-shadow: 0 8px 20px rgba(242,203,114,.3);
}

/* 星星瓶舞台 */
.jar-stage {
  background: var(--cream); border-radius: var(--radius-lg); padding: 34px 28px 28px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(216, 169, 77, 0.25);
  position: relative; text-align: center; overflow: hidden;
}
.jar-stage::before {
  content: ""; position: absolute; top: 18%; left: 55%; width: 220px; height: 220px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 203, 114, 0.45), transparent 70%);
}
.jar-title { font-weight: 700; color: var(--text); font-size: 15px; letter-spacing: 0.1em; margin-bottom: 4px; position: relative; }
.jar-sub { font-size: 12px; color: var(--body-text); position: relative; }
.jar-art { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 4%; margin: 16px 0 18px; }
.jar-art .cat {
  width: 44%; max-width: 190px; aspect-ratio: 3 / 4;
  object-fit: cover; object-position: left top;
  position: relative; z-index: 2; animation: floaty 6s ease-in-out infinite;
}
.jar-art .jar { width: 40%; max-width: 170px; position: relative; z-index: 1; mix-blend-mode: multiply; filter: drop-shadow(0 12px 22px rgba(216, 169, 77, 0.35)); }
.jar-caption { font-size: 11.5px; color: var(--muted-text); margin-top: 12px; position: relative; }

/* 呼吸畫面模擬 */
.breath-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.breath-screen > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.breath-screen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 17, 39, 0.55) 0%, transparent 32%, transparent 58%, rgba(12, 17, 39, 0.6) 100%);
}
.breath-top { position: relative; z-index: 3; text-align: center; margin-top: 54px; }
.breath-top .t { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: 0.3em; text-shadow: 0 2px 14px rgba(12, 17, 39, 0.8); }
.breath-top .s { font-size: 11px; letter-spacing: 0.2em; color: #EAF3F8; text-shadow: 0 1px 10px rgba(12, 17, 39, 0.8); margin-top: 5px; }
.breath-ring {
  position: relative; z-index: 3; margin: auto;
  width: 158px; height: 158px; border-radius: 50%;
  border: 2px solid rgba(242, 203, 114, 0.9);
  box-shadow: 0 0 34px rgba(242, 203, 114, 0.55), inset 0 0 26px rgba(242, 203, 114, 0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  animation: breath 10s ease-in-out infinite;
}
@keyframes breath {
  0%, 100% { transform: scale(1); box-shadow: 0 0 26px rgba(242,203,114,.4), inset 0 0 20px rgba(242,203,114,.22); }
  40% { transform: scale(1.13); box-shadow: 0 0 46px rgba(242,203,114,.7), inset 0 0 34px rgba(242,203,114,.4); }
}
.breath-ring .l { font-size: 14px; font-weight: 700; letter-spacing: 0.24em; text-shadow: 0 1px 8px rgba(12,17,39,.7); }
.breath-ring .s { font-size: 10.5px; letter-spacing: 0.18em; color: #EAF3F8; text-shadow: 0 1px 8px rgba(12,17,39,.7); }
.breath-cta {
  position: relative; z-index: 3; margin: 0 16px 20px; align-self: stretch;
  background: linear-gradient(180deg, #F9E2A8, var(--moonlight) 55%, #E5B95C);
  color: #3A2E10; font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
  text-align: center; border-radius: 999px; padding: 11px;
}

/* ─── 沉浸式場景舞台 ─── */
.immersive-stage {
  position: relative; border-radius: 30px; overflow: hidden;
  min-height: 470px; display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}
.stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.stage-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 17, 39, 0.6) 0%, transparent 34%, transparent 56%, rgba(12, 17, 39, 0.78) 100%); }
.stage-top { position: relative; z-index: 3; text-align: center; padding: 42px 20px 0; }
.stage-title { font-family: var(--serif); font-weight: 700; font-size: clamp(21px, 2.8vw, 27px); letter-spacing: 0.32em; text-shadow: 0 2px 16px rgba(12, 17, 39, 0.9); }
.scene-label { display: none; }
.scene-label.active { display: inline; }
.stage-sub { margin-top: 9px; font-size: 12.5px; letter-spacing: 0.26em; color: #EAF3F8; text-shadow: 0 1px 10px rgba(12, 17, 39, 0.85); }
.stage-ring { margin: 28px auto; width: 172px; height: 172px; }
.stage-bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 0 26px 24px; }
.sound-chip {
  display: inline-flex; align-items: center; gap: 11px;
  background: rgba(12, 17, 39, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--gold-line-strong); border-radius: 999px; padding: 10px 18px;
  color: var(--cream); font-size: 13px; letter-spacing: 0.06em;
  box-shadow: 0 8px 22px rgba(5, 8, 24, 0.4), 0 0 20px rgba(242, 203, 114, 0.15);
}
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i {
  width: 3px; background: var(--moonlight); border-radius: 2px;
  transform-origin: bottom; animation: eq 1.5s ease-in-out infinite;
  box-shadow: 0 0 7px rgba(242, 203, 114, 0.75);
}
.eq i:nth-child(1) { height: 7px; }
.eq i:nth-child(2) { height: 12px; animation-delay: 0.22s; }
.eq i:nth-child(3) { height: 16px; animation-delay: 0.44s; }
.eq i:nth-child(4) { height: 10px; animation-delay: 0.66s; }
.eq i:nth-child(5) { height: 13px; animation-delay: 0.88s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.stage-amb { font-size: 13px; color: #EAF3F8; letter-spacing: 0.05em; text-shadow: 0 1px 10px rgba(12, 17, 39, 0.9); }
/* 漂浮音符 */
.note {
  position: absolute; z-index: 2; color: var(--moonlight);
  text-shadow: 0 0 14px rgba(242, 203, 114, 0.85);
  opacity: 0; animation: noteRise 7.5s linear infinite; pointer-events: none;
}
@keyframes noteRise {
  0% { transform: translateY(26px) rotate(-8deg); opacity: 0; }
  16% { opacity: 0.95; }
  62% { opacity: 0.7; }
  100% { transform: translateY(-150px) rotate(10deg); opacity: 0; }
}
/* 場景縮圖切換 */
.scene-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.scene-thumb {
  position: relative; border-radius: 18px; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid rgba(201, 192, 228, 0.2); background: var(--night); font-family: inherit;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.scene-thumb img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; display: block; }
.scene-thumb .cap {
  position: absolute; inset: auto 0 0 0; padding: 24px 8px 9px; text-align: center;
  font-size: 12.5px; letter-spacing: 0.1em; color: var(--cream);
  background: linear-gradient(180deg, transparent, rgba(12, 17, 39, 0.9));
}
.scene-thumb:hover { transform: translateY(-4px); border-color: rgba(242, 203, 114, 0.5); }
.scene-thumb.active { border-color: var(--moonlight); box-shadow: 0 0 24px rgba(242, 203, 114, 0.4); transform: translateY(-4px); }
.scene-thumb.active .cap::after { content: " ♪"; color: var(--moonlight); }
.scenes-note { text-align: center; font-size: 12.5px; color: var(--muted-text); margin-top: 18px; letter-spacing: 0.05em; }

/* ─── AI 總結與今夜小畫報 ─── */
.ai-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: center; }
/* 忠實還原 App 內畫報:深藍畫面 + 金色標題 + 奶油畫紙 */
.poster-card {
  background: linear-gradient(168deg, #1C2450 0%, #131A38 60%, #171F44 100%);
  color: var(--cream);
  border-radius: var(--radius-lg); border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-card), 0 0 40px rgba(242, 203, 114, 0.07);
  padding: 20px 20px 18px;
  display: flex; flex-direction: column;
}
.poster-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.poster-title {
  font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 0.14em;
  color: var(--moonlight); text-shadow: 0 0 16px rgba(242, 203, 114, 0.4);
}
.poster-chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  background: rgba(58, 67, 106, 0.7); color: var(--mist-purple);
  border: 1px solid rgba(201, 192, 228, 0.28);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.poster-page { background: #FBF3E4; border-radius: 16px; padding: 10px; box-shadow: 0 10px 26px rgba(5, 8, 24, 0.45); }
.poster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.poster-grid img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 11px;
}
.poster-caption { font-size: 12.5px; color: var(--mist-purple); text-align: center; line-height: 1.9; margin-top: 13px; letter-spacing: 0.04em; }
.poster-shelf-label {
  text-align: center; font-size: 11.5px; letter-spacing: 0.14em; color: var(--muted-text);
  margin-top: 14px; display: flex; align-items: center; gap: 12px; justify-content: center;
}
.poster-shelf-label::before, .poster-shelf-label::after { content: ""; height: 1px; width: 42px; background: linear-gradient(90deg, transparent, rgba(201, 192, 228, 0.3)); }
.poster-shelf-label::after { background: linear-gradient(90deg, rgba(201, 192, 228, 0.3), transparent); }
.poster-shelf { display: flex; justify-content: center; gap: 15px; margin-top: 11px; }
.poster-shelf img {
  width: 74px; height: 74px; object-fit: cover; border-radius: 10px;
  border: 3px solid #FBF3E4; box-shadow: 0 7px 16px rgba(5, 8, 24, 0.5);
}
.poster-shelf img:nth-child(1) { transform: rotate(-5deg); }
.poster-shelf img:nth-child(2) { transform: rotate(2deg) translateY(4px); }
.poster-shelf img:nth-child(3) { transform: rotate(6deg); }
.ai-card {
  background: var(--cream); color: var(--text); border-radius: var(--radius-lg);
  border: 1.5px solid rgba(216, 169, 77, 0.5); box-shadow: var(--shadow-card);
  padding: 26px 26px 22px; position: relative;
}
.ai-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ai-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: 0.08em; }
.ai-badge .heart {
  width: 30px; height: 30px; border-radius: 9px; background: #B5A8DE; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.ai-regen { font-size: 11.5px; color: #8B79C0; background: #EFEAF9; border-radius: 999px; padding: 5px 12px; letter-spacing: 0.05em; }
.ai-inputs-label { font-size: 11px; letter-spacing: 0.18em; color: var(--muted-text); margin-bottom: 7px; }
.ai-inputs { display: grid; gap: 7px; margin-bottom: 15px; }
.ai-input { font-size: 12.5px; line-height: 1.8; border-radius: 12px; padding: 8px 13px; letter-spacing: 0.02em; }
.ai-input.worry { background: #EFEAF9; color: #5B527A; }
.ai-input.star { background: #FDF3DC; color: #8A6A25; }
.ai-text { font-size: 14px; line-height: 2.1; color: #4A5270; letter-spacing: 0.03em; }
.ai-text p + p { margin-top: 10px; }
.ai-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(216, 169, 77, 0.5); font-size: 12px; color: var(--body-text); line-height: 1.8; }

/* ─── 更多功能 ─── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.feat-card {
  border-radius: 22px; overflow: hidden; background: var(--cream);
  box-shadow: var(--shadow-card); border: 1px solid rgba(216, 169, 77, 0.22);
  transition: transform .3s, box-shadow .3s;
}
.feat-card:hover { transform: translateY(-5px); box-shadow: 0 26px 54px rgba(5, 8, 24, 0.55); }
.feat-card > img { width: 100%; height: 158px; object-fit: cover; display: block; }
/* 迷你介面模擬(統計、夜晚回顧等沒有插圖、以 UI 呈現的畫面) */
.feat-sim { height: 158px; background: linear-gradient(180deg, #182045, #101631); padding: 12px 13px; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.sim-head { display: flex; justify-content: space-between; align-items: center; }
.sim-head .ttl { font-size: 11.5px; color: var(--cream); font-weight: 700; letter-spacing: 0.08em; }
.seg { display: flex; gap: 3px; background: rgba(58, 67, 106, 0.65); border-radius: 999px; padding: 2px; }
.seg span { font-size: 8.5px; padding: 2px 9px; border-radius: 999px; color: var(--mist-purple); }
.seg .on { background: var(--moonlight); color: var(--night-deep); font-weight: 700; }
.sim-row { display: flex; align-items: center; gap: 9px; background: var(--cream); border-radius: 11px; padding: 6px 9px; }
.sim-row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sim-row .rt { min-width: 0; }
.sim-row .d { display: block; font-size: 8.5px; color: var(--muted-text); letter-spacing: 0.06em; }
.sim-row .t { display: block; font-size: 10.5px; color: var(--text); font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-row .chev { margin-left: auto; color: var(--moonlight-deep); font-size: 13px; }
.stat-nums { display: flex; gap: 7px; }
.stat-chip { flex: 1; display: flex; flex-direction: column; background: var(--cream); border-radius: 10px; padding: 5px 9px 6px; }
.stat-chip .n { display: block; font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
.stat-chip .n small { font-size: 9px; font-weight: 500; color: var(--body-text); }
.stat-chip .l { display: block; font-size: 8.5px; color: var(--muted-text); letter-spacing: 0.04em; }
.stat-chart { flex: 1; background: var(--cream); border-radius: 10px; padding: 5px 10px 3px; display: flex; align-items: center; }
.stat-chart svg { width: 100%; height: 100%; }
.feat-card .body { padding: 16px 18px 18px; color: var(--text); }
.feat-card h3 { font-family: var(--serif); font-size: 16.5px; letter-spacing: 0.08em; margin-bottom: 6px; }
.feat-card p { font-size: 13px; color: var(--body-text); line-height: 1.8; }

/* ─── 隱私 ─── */
.privacy-band {
  background: rgba(22, 29, 58, 0.72); border-radius: 28px;
  padding: 46px 44px; border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-card), inset 0 0 60px rgba(242, 203, 114, 0.04);
}
.privacy-band ul { list-style: none; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.privacy-band li { display: flex; gap: 12px; font-size: 14.5px; color: #D7D9E4; align-items: flex-start; line-height: 1.9; letter-spacing: 0.03em; }
.privacy-band li::before { content: "🌙"; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(242,203,114,.5)); }
.privacy-more { text-align: center; color: var(--muted-text); font-size: 13px; margin-top: 26px; }
.privacy-more a { color: var(--moonlight); }

/* ─── 方案 ─── */
.plan-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); max-width: 660px; margin: 0 auto; }
.plan {
  background: var(--cream); color: var(--text); text-align: center;
  border-radius: var(--radius-lg); padding: 32px 24px 28px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(216, 169, 77, 0.25); position: relative;
}
.plan.featured { border: 1.5px solid var(--moonlight-deep); box-shadow: var(--shadow-card), 0 0 34px rgba(242, 203, 114, 0.18); }
.plan h3 { font-family: var(--serif); font-size: 17px; letter-spacing: 0.1em; }
.plan .price { font-family: var(--serif); font-size: 34px; font-weight: 700; margin: 10px 0 2px; }
.plan .per { font-size: 12.5px; color: var(--muted-text); letter-spacing: 0.08em; }
.plan .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #F9E2A8, var(--moonlight)); color: #3A2E10;
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 16px; letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(242,203,114,.4); white-space: nowrap;
}
.plan-note { text-align: center; color: var(--muted-text); font-size: 12.5px; margin-top: 30px; line-height: 2; letter-spacing: 0.03em; }

/* ─── 結尾 CTA ─── */
.closing-card {
  border-radius: 32px; overflow: hidden; position: relative;
  min-height: 430px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow-card);
}
.closing-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.closing-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12, 17, 39, 0.25) 0%, rgba(12, 17, 39, 0.78) 100%); }
.closing-inner { position: relative; z-index: 2; text-align: center; padding: 60px 24px; }
.closing-inner h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: 0.16em; line-height: 1.7; text-shadow: 0 2px 20px rgba(12, 17, 39, 0.9); }
.closing-inner p { color: #D7D9E4; font-size: 14.5px; letter-spacing: 0.08em; margin: 14px 0 30px; text-shadow: 0 1px 12px rgba(12, 17, 39, 0.9); }

/* ─── 內頁(隱私、條款、支援) ─── */
.page-main { padding: 64px 0 80px; }
.page-main h1 { font-family: var(--serif); font-size: clamp(26px, 4vw, 34px); letter-spacing: 0.14em; text-align: center; margin-bottom: 10px; }
.page-main .updated { text-align: center; color: var(--muted-text); font-size: 13px; margin-bottom: 44px; letter-spacing: 0.04em; }
.page-main .updated a { color: var(--moonlight); }
.doc-card {
  background: var(--cream); color: var(--text);
  border-radius: 28px; padding: 42px 40px;
  box-shadow: var(--shadow-card); border: 1px solid rgba(216, 169, 77, 0.3);
  display: grid; gap: 28px;
}
.doc-card h2 { font-family: var(--serif); font-size: 18.5px; line-height: 1.6; letter-spacing: 0.06em; }
.doc-card h2::before { content: "✦ "; color: var(--moonlight-deep); font-size: 13px; }
.doc-card p, .doc-card li { font-size: 15px; color: var(--body-text); line-height: 2; }
.doc-card ul { padding-left: 24px; display: grid; gap: 6px; }
.doc-card a { color: var(--moonlight-deep); }
.doc-card .section { display: grid; gap: 8px; }

/* 音效與素材授權 */
.credit-list { display: grid; gap: 20px; }
.credit-card {
  background: var(--cream); color: var(--text);
  border-radius: 22px; border: 1px solid rgba(216, 169, 77, 0.28);
  box-shadow: var(--shadow-card); padding: 24px 26px;
  display: grid; grid-template-columns: 104px 1fr; gap: 22px; align-items: start;
}
.credit-card .thumb { width: 104px; height: 104px; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow-soft); }
.credit-scene { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; }
.credit-track { font-size: 13px; color: var(--body-text); margin: 3px 0 12px; line-height: 1.7; }
.credit-fields { display: grid; gap: 6px; font-size: 13.5px; }
.credit-fields .row { display: flex; gap: 12px; line-height: 1.8; }
.credit-fields .k { flex: 0 0 96px; color: var(--muted-text); letter-spacing: 0.04em; }
.credit-fields .v { color: var(--body-text); }
.credit-fields a { color: var(--moonlight-deep); }
.license-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  background: #FDF3DC; color: #8A6A25; border: 1px solid rgba(216, 169, 77, 0.5);
  border-radius: 999px; padding: 2px 12px; margin-left: 8px; vertical-align: 1px;
}
@media (max-width: 560px) {
  .credit-card { grid-template-columns: 1fr; gap: 14px; }
  .credit-card .thumb { width: 84px; height: 84px; }
  .credit-fields .k { flex-basis: 78px; }
}

/* 聯絡頁 */
.contact-email {
  font-family: var(--serif); font-weight: 700; font-size: clamp(17px, 3vw, 22px);
  color: var(--text); letter-spacing: 0.02em; word-break: break-all;
  background: #FDF3DC; border: 1px dashed rgba(216, 169, 77, 0.6); border-radius: 14px;
  padding: 14px 18px; margin: 14px 0 18px;
}
.contact-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.contact-copy { border: 0; cursor: pointer; font-family: inherit; }
.contact-copy .copied-label { display: none; }
.contact-copy.copied .copy-label { display: none; }
.contact-copy.copied .copied-label { display: inline; }
.email-text { font-weight: 700; word-break: break-all; }
.doc-card .email-text { color: var(--moonlight-deep); }
.updated .email-text, .plan-note .email-text { color: var(--moonlight); }

details.faq {
  background: var(--cream); color: var(--text);
  border-radius: 20px; padding: 20px 26px;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(216, 169, 77, 0.28);
}
details.faq + details.faq { margin-top: 16px; }
details.faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; line-height: 1.7; letter-spacing: 0.03em; }
details.faq summary::marker { color: var(--moonlight-deep); }
details.faq div { margin-top: 12px; font-size: 14.5px; color: var(--body-text); line-height: 2; }

/* ─── Footer ─── */
.site-footer { border-top: 1px solid rgba(201, 192, 228, 0.14); padding: 46px 0 54px; margin-top: 30px; background: rgba(12, 16, 36, 0.55); }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin: 26px 0 20px; }
.footer-links a { color: var(--mist-purple); text-decoration: none; font-size: 13.5px; letter-spacing: 0.06em; }
.footer-links a:hover { color: var(--moonlight); }
.site-footer .disclaimer { text-align: center; color: var(--muted-text); font-size: 12.5px; max-width: 660px; margin: 0 auto 16px; line-height: 2; }
.site-footer .copyright { text-align: center; color: var(--muted-text); font-size: 12.5px; letter-spacing: 0.08em; }

/* ─── RWD ─── */
@media (max-width: 900px) {
  .hero-grid, .ai-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 64px 0 56px; text-align: center; }
  .hero .eyebrow { justify-content: center; }
  .hero .sub { margin: 0 auto; }
  .hero .cta-row, .trust-row { justify-content: center; }
  .step { grid-template-columns: 1fr; gap: 36px; margin-bottom: 72px; }
  .step .phone-stage { order: 2; }
  .immersive-stage { min-height: 400px; }
  .scene-thumbs { display: flex; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
  .scene-thumb { flex: 0 0 160px; scroll-snap-align: center; }
  section { padding: 64px 0; }
  .privacy-band { padding: 34px 26px; }
  .doc-card { padding: 30px 22px; }
  .bubble { display: none; }
}
@media (max-width: 640px) {
  .site-nav > a { display: none; }
}
@media (max-width: 520px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .cat-chip span { font-size: 8.5px; }
  .phone { width: 288px; }
  .scene-thumb { flex: 0 0 136px; }
  .stage-bottom { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}